chrome扩展开发总体流程如下:
1. 新建文件夹,并在其中添加所需的所有文件。
2. 将chrome扩展程序管理页面打开,开启开发者模式,然后点击“加载已解压的扩展程序”,选择1中新建的文件夹。这样扩展便会运行,即可进行调试。当修改了扩展中的文件后,可以点扩展程序中的刷新按钮,或者关闭扩展再打开,或者重启浏览器,都可以更新扩展。
3. 将chrome扩展程序管理页面打开,点击“打包扩展程序”,选择1中的文件夹,会自动生成扩展文件crx和密钥文件pem。
开发过程中,主要针对前两步:
一. 扩展所需文件
manifest.json是必须的,这是扩展的配置文件,在该文件中定义了扩展所需要的各种资源和设置。
至少有1个图标,格式推荐png。
其他的html,js,css等文件根据manifest.json的配置来添加。
manifest.json必须放在根目录下,其他文件路径和文件名随意,只要manifest.json中可以对应起来即可。
例如,推荐的一个结构:
根目录下是manifest.json文件,其他文件放在各自对应的文件夹下。
二. 扩展调试开发
针对上图的结构,manifest.json如下:
{
// 必须字段
"name": "Plugin Template",
"version": "1.0",
"manifest_version": 2,
// 建议字段
"description": "This is atemplate.",
"icons": {
"16": "image/icon-16.png",
"48": "image/icon-48.png",
"128": "image/icon-128.png"
},
// 可选
"browser_action": {
"default_icon": "image/icon-128.png",
"default_title": "My Test Template",
"default_popup": "html/browser.html"
},
// 自定义
"permissions": [
"*://www.baidu.com/*",
"background",
"tabs"
],
"background": {
"scripts": [
"lib/jquery-3.3.1.min.js",
"js/background.js"
],
"page": "html/background.html"
},
"content_scripts": [
{
"matches": [
"*://www.baidu.com/*"
],
"js": [
"lib/jquery-3.3.1.min.js",
"js/content.js"
]
}
]
}
实际开发中,根据需要来配置manifest.json。如上:
1. 需要使用地址栏右侧图标,且需要点击后弹出气泡界面,于是使用browser_action,且设置其图标,标题,与弹出的界面页。
2. 需要对浏览器的tabs进行操作,故需使用background环境,于是设置background。要启用background环境的js和页面,于是设置scripts和page属性。
3. 需要对web页面进行修改,故需使用content_scripts进行js注入,但仅需要注入js,不需要注入css,所以这里只配置js。希望在js中使用jquery库,所以将jquery库放在前面。希望该扩展只对百度生效,故配置matches,令其只匹配百度的URL。
4. 根据上面的需求,设置permissions,提供对应的权限。