这篇博客介绍了如何开发一个简单的Chrome浏览器插件。首先，创建一个包含manifest.json的文件夹，该文件设置插件的基本信息和权限。然后，添加icon.png图标和hello.html作为默认弹出页面。最后，通过浏览器的扩展程序加载插件即可。博客提供了完整的步骤和代码示例，适合有一定HTML、CSS和JavaScript基础的学习者入门。
概述
学习目标：如何开发一个简单的浏览器插件。
学习前提：HTML、CSS、JavaScript基础
入门
其实跟着官方的说明文档就能很快入门，而且是中文文档。
第一步，在电脑本地的任意位置创建一个文件夹，名为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
扫一扫
4982
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
