最近自己开发了一个扩展程序小应用，记录下开发的过程
一、开始
这个文档我感觉不是最新的，但是基本使用是可以参考的
新建一个文件夹，新建popup.html，增加icon作为扩展的图标，文件夹中新建manifest.json文件内容为
{
"manifest_version": 2, // 必填字段，这是值班版本号
"name": "App name", // 必填字段
"description": "This extension demonstrates a browser action with kittens.",
"version": "1.0", // 必填字段
"icons": {
"16": "...", // 页面右击鼠标展示的扩展程序图标
"48": "...", // 在浏览器右上角展示的图标
"128": "...", // 在扩展程序列表展示的图标
}, // 插件在浏览器中展示的图标，有三种尺寸
"permissions": [], // 扩展使用的一组权限
"browser_action": {
"default_icon": "icon.png", // 默认的icon，若是icons没有设置的情况下
"default_popup": "popup.html" // 点击扩展图标展示的html
},
"background": {}, // 插件本身执行的文件
"content_scripts": [], // 在浏览器页面上注入的文件
}
以上是一些基础配置
打开chrome浏览器的扩展程序，打开开发者模式，点击加载已解压的扩展程序，选择上面新建文件夹路径，扩展程序列表就会看到新建的扩展程序
在浏览器右上角会显示新扩展程序，点击打开一个气泡窗口，里面就是popup.html的内容
二、功能开发
插件的三个模块
chrome插件可以分为三个模块，在manifest.json文件中有相应的配置项
-
content-script
这是在浏览器页面上注入的文件，浏览器页面加载时会执行。这边配置项是一个数组，可以注入多个文件 -
popup
这是点击扩展程序图标时展示的页面，每次点击图标都会重新执行这块的代码 -
background
这是插件直接运行的代码，浏览器启动后就会执行的代码
Chrome自带的api
此处列举几个自己用到的，具体api可见文档
- 浏览器通知
文档中的通知使用webkitNotifications.createNotification方法会报错
// 使用浏览器自带的Notification对象，使用方式如下
const notification = new Notification({
body: "" // 提示的具体内容
})
notification.show()
- 增加页面的右键菜单
/**
* 创建右键菜单
*/
const parent = chrome.contextMenus.create({
title: "***的插件", // 右键菜单名
});
/**
* 创建右键插件子菜单
*/
chrome.contextMenus.create({
title: "开", // 子菜单名称
parentId: parent, // 父菜单id
type: "radio", // 菜单类型
checked: false, // 初始值
onclick: handleSwitch, // 点击事件
});
chrome.contextMenus.create({
title: "关",
parentId: parent,
type: "radio",
checked: true,
onclick: handleSwitch,
});
模块的交互方式
开发应用过程中不免会有各个模块传递信息的需求，以下提供了各模块之间数据传递的方法
- popup发送数据给content-script
content-script文件中增加一个message监听
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
// request 请求的数据，若是监听器监听多个请求，可以通过在数据中增加type类型加以区分
// sender 请求的详细信息，页面地址等
// sendResponse 返回response的方法
if (request.type === "getCopy") {
sendResponse(...)
}
if (request.type === "giveSwitch") {
}
});
// popup.js文件
首先先获取页面的tabid
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
console.log(tabs.length ? tabs[0].id : null);
});
// 拿到tabid后执行，因为需要知道发送到浏览器哪个页面上
/**
* msg 传递的数据
* res 监听器返回的数据
*/
chrome.tabs.sendMessage(tabid, msg, res => {
console.log(res)
})
注： 上面chrome插件提供的api都是异步的，可以使用Promise处理成链式调用
- content-script发送消息给popup
popup.js
// 增加message监听
chrome.runtime.onMessage((request, sender, sendRepsonse) => {
// 懒。。。同上
})
content-script.js
chrome.runtime.sendMessage(msg, res => {})
注：
content-scrips.js向popup发送消息可以成功，但是拿不到返回值。有了解的可以告知下
不过应该很少从content-script向popup发送消息，因为popup是点开才能执行
-
popup发送消息给background，与content-script发送消息给popup一样
-
background发送消息给content-script，与popup发送消息给content-script一样
-
popup可以直接调用background脚本的方法和属性
background.js
const globalData: any
// 注： 这边的数据必须在全局作用域下
popup.js
const bg = chrome.extension.getBackgroundPage();
// bg相当于background模块的window
console.log(bg.globalData) // 可以获取到background脚本的数据
业务代码
业务代码在这边就不展示了，根据自身的需求来
调试
-
content-script
因为是执行在页面上的，可以直接打开页面的控制台进行调试 -
popup
右击扩展程序图标，点击审查弹出内容，可以打开popup.html的控制台进行调试 -
background
可以在浏览器扩展程序管理页面点击查看视图和背景页调试，背景页即为控制台
打包
在浏览器的扩展程序管理有打包扩展程序的按钮，直接点击打包就可以了。我自己的小工具没有去打包
另
- popup和background拿取页面的数据也可以通过cookie的方式，不过要在permission中增加cookie项
- 主要的功能，比如页面右键菜单的创建都是在background模块中
- chrome插件本身自带的好多api暂时没用到，大家可以自行翻阅文档
- 如有不足之处，还请指出
