编写一个简单的chrome插件

Posted 2020-12-26 zyhphq

编写一个chrome插件，你需要准备好一个好看的图片作为扩展程序的图标。准备好图标后，我们就要开始设计插件了。

1、chrome扩展需要的文件
可以这么理解，chrome扩展程序就是一个web应用，所以我们实际是要写html代码。而chrome插件需要的文件就包括配置文件(manifest.json)、扩展图标(icon.png 可以是任意的名字，在配置文件中会使用到)、popup弹出窗口html文件(popup.html)以及其他静态资源文件(如images、css、js等)。如下图，我建立了一个jubar的文件用作chrome扩展文件夹。

2、Browser Actions（扩展图标）
只要chrome启用了某个chrome扩展程序，对应地将该程序的扩展图片显示在地址栏的右侧。

3、popup弹出窗口
接下来，就是编写popup弹出窗口了。

4、编写配置文件manifest.json
{
"name": "Jubar",
"manifest_version":2,
"version": "4.0.1",
"description": "Gather your friends and family",
"browser_action": {
"default_icon": "icon.png" ,
"default_title": "Jubar",
"default_popup": "popup.html"
}
}

必须属性：
name、version、manifest_version
1、name 插件名称；
2、version 插件的版本号；
3、manifest_version 指定清单文件格式的版本，在Chrome18之后，应该都是2，所以这个值直接设定为2就OK了；

推荐属性：
description、icons、default_locale
1、description 插件描述，简单介绍插件用途；
2、icons 插件图标，需准备16*16（扩展信息栏）、48*48（扩展管理页面）、128*128（用在安装过程中）的三个图标文件，建议为PNG格式，因为PNG对透明的支持最好；
3、default_locale 国际化支持，支持何种语言的浏览器，虽然官方推荐，不过我没用；

其他属性
browser_action代表扩展图标段显示，它会定义图标地址、标题（也就是鼠标悬停提示）和默认的popup页面。我们这里定义的popup页面为popup.html。

 

6、打包扩展程序
1、打开Chrome –> 更多工具 –> 扩展程序
2、打开“开发者模式”