嘉定专业做网站/个人推广网站
概述
学习目标：如何开发一个简单的浏览器插件。
学习前提：HTML、CSS、JavaScript基础
官方文档：http://chrome.cenchy.com
入门
其实跟着官方的说明文档就能很快入门，而且是中文文档。
第一步，在电脑本地的任意位置创建一个文件夹，名为HelloWorld，也可以叫其他名字。
第二步，在HelloWorld文件夹下创建一个名为manifest.json的文件，必须叫这个名字。内容如下：
{"manifest_version": 2,"name": "HelloWorld","description": "这是一个谷歌浏览器的入门插件","version": "1.0","permissions": ["http://*/*","https://*/*"],"browser_action": {"default_icon": "icon.png","default_popup": "hello.html"}
}关于该文件的参数更详细的说明请参考官网：http://chrome.cenchy.com/manifest.html
必须的字段只有：name和version。
接着我们找一个png格式的图标，放到HelloWorld目录下，并且重命名为icon.png，正是上面配置的default_icon参数的值。（注：也可以从阿里巴巴矢量图标库下载一个https://www.iconfont.cn/search/index?searchType=icon&q=hello）
在browser_action参数中还配置了一个default_popup参数，默认显示的HTML页面，我们在HelloWorld目录下创建一个名为hello.html，页面内容很简单，只显示一个HelloWorld就可以了，代码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>hello</title></head><body><h1>Hello World</h1></body>
</html>
到此，一个简单的谷歌浏览器插件就做好了。
第三步，打开谷歌浏览器，加载我们写的插件。
打开“扩展程序”
进入开发者模式
点击“加载已解压的扩展程序”，选择“HelloWorld”文件夹
就可以看到我们自己定义的插件了
在浏览器的标签栏上能看到icon.png的小图标
点击该图标，就可以运行该插件了。
到此，完成插件的开发。
对于一些API的获取请参考谷歌浏览器的官方文档，并且官方文档中有很多代码示例，可以参考。至于更复杂的功能，更美观的界面，就需要HTML、CSS、JavaScript一起发力了。
在浏览器插件所在的目录下同样可以使用JavaScript等的API。
本项目源码地址：GitHub的Demo