在这里,您可以开始构建Chrome扩展程序,从而最终提高您的工作效率并加快我们的任务。无论是现场比赛得分,音乐,GeeksforGeeks新文章更新还是整页截图,您都可以为每项任务构建自己的Chrome扩展程序。

所以有一些基本的东西需要,就像制作一个带有清单的网站!

HTML:所有网站的构建块,Web开发人员使用标准标记语言以及CSS和JAVASCRIPT来创建网站,移动用户界面和应用程序。

CSS: 用于为HTML元素设置样式的样式表语言。

JavaScript: 通常用于在Web浏览器中创建交互式效果。

JSON: JavaScript Object Notation是一种开放标准格式,它使用人类可读的文本来传输由属性 - 值对组成的数据对象。它是用于异步浏览器/服务器通信(AJAJ)的主要数据格式,主要取代XML(由AJAX使用)。

Chrome扩展程序遵循特定的目录结构。这意味着,文件名已经修复,应按照指示以某种方式组织。
Chrome应用包含以下组件:

该清单告诉Chrome您的应用,它是什么,如何启动它以及它需要的额外权限。
在后台脚本用于创建活动页面负责管理应用程序的生命周期。
所有代码都必须包含在Chrome应用包中。这包括HTML,JS,CSS和Native Client模块。
所有图标和其他资产也必须包含在包中。
目录结构
JSON
<content> .js [Javascript Files]
<markup> .html [HTML文件]
PNG
在这里,我们将为本教程制作一个简单的“Hello World”扩展。需要基本理解的高效且有意义的扩展将在下一步跟进

开始了!

第1步:创建一个新目录,这是我们保存所有文件的地方。

步骤2创建一个名为Manifest.json的文件

这是基本格式。

{
“manifest_version”:2,
“name”:“EXTENSION NAME”,
“description”:“DESCRIPTION”,
“版本”:“1.0”,
“browser_action”:{
“default_icon”:“ICON(WITH EXTENSION)”,
“default_popup”:“布局HTML文件”
},
“权限”:[
//任何其他许可
]
}
这是我们的Manifest.json文件

{
“manifest_version”:2,
“名字”:“你好世界!”,
“description”:“此扩展显示Hello World消息!”,
“版本”:“1.0”,
“browser_action”:{
“default_icon”:“icon.png”,
“default_popup”:“window.html”
}
}
所以,一旦你掌握了manifest.json,就让我们继续吧。

步骤3 创建一个名为window.html的新文件。

当您点击Chrome扩展程序按钮时,它是POPS UP的HTML。

<!DOCTYPE html>
<HTML>
<HEAD>
<script src =“background.js”> </ script>
</ HEAD>
<BODY>
<DIV>您好!Geeks For Geeks !! </ div>
<div>这是Chrome扩展程序!</ div>
<div>这是一些html </ div>
</ BODY>
</ HTML>
我们很棒!

步骤4 创建javascript文件,让我们调用它,background.js,因为我们正在创建一个简单的HTML文件,所以你可以完全跳过这一步,因为我们现在的项目不需要任何javascript。

我正在创建它只是为了演示如何在扩展中包含脚本。

步骤4 您必须观察到图标是扩展的一个组成部分,您可以在其中单击并开始执行扩展。

我正在添加一个图标文件,您可以从中获得一个想法。

icon.png(https://developer.chrome.com/extensions/examples/tutorials/getstarted/icon.png)

可以了,好了!

构建基本的Chrome扩展程序-IDC帮帮忙

这是创建所有4个文件后您的目录必须查看的方式。

最后一个 :-

要加载扩展,

将扩展文件所在的目录拖放到浏览器中的chrome:// extensions以加载它。
如果扩展名有效,它将立即加载并激活!
如果它无效,将显示错误消息,是时候进行调试。

构建基本的Chrome扩展程序-IDC帮帮忙

打开chrome:// extensions页面。
将文件夹拖到chrome:// extensions页面。

构建基本的Chrome扩展程序-IDC帮帮忙
安装成功!
点击图标,将显示消息!

这个简单的Hello World扩展为我们提供了如何开始创建Chrome扩展的基本知识,因为我们现在熟悉manifest.json和目录结构,这两个新的东西除了基本的Web技术,如HTML,CSS,JavaScript, JQuery等