上手chrome插件开发
比想象中要简单
项目基本目录
// 简单的demo目录
├── icon.png
├── manifest.json
├── popup.html
└── popup.js上手调试
打开chrome://extensions/ 开启开发者模式，
选择加载已解压的扩展程序
选中自己的项目文件即可上手调试
项目下文件解析
manifest.json 配置文件
{
// 必须
"manifest_version": 2,
"name": "我的扩展程序",
"version": "版本字符串",
// 可选：浏览器按钮可以包含图标、工具提示、徽章和弹出内容。
"browser_action": {
"default_title": "get cookie In chrome", // 鼠标移动到插件icon会tips
"default_popup": "popup.html", // 点击之后popup出来的部分
"default_icon": "icon.png", // 插件的icon
// page_action 配置的是指浏览器地址栏中的一些交互，较少人这么用
"background": { // 后台运行程勋/脚本配置
"scripts": ["eventPage.js"], // 脚本，
"page": "background.html", // 也可以是html
"persistent": false // 是否长期运作
},
"permissions": [ // 权限配置，表示在js执行过程能使用的权限
"tabs", // 拥有使用chrome tab的权限
"bookmarks", // 可以使用书签的权限
"http://www.blogger.com/", // 设置站点权限
"http://*.google.com/",
"unlimitedStorage" // 不限制存储
...// 详细配置请看下面
],
....
},
}
上面提到部分的详细说明文档：
permissions 权限清单
通讯
1.chrome.runtime.sendMessage 适合
content.js => background.js 通讯
content.js => popup.js 通讯
background.js => popup.js 通讯
2.chrome.tabs.sendMessage适合
background.js => content.js
popup.js => content.js
3.接受信息用chrome.runtime.onMessage.addListener
4.popup页面可以通过chrome.extension.getBackgroundPage() 方式调用background的函数
一些小坑
1.引入vue 会出现 安全性问题，需要在manifest.json中设置
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
2.如果需要在background中使用jquery, 需要提前将jquery在background.js之前引入 ，
如 ：
"background": {
"scripts": [jquery-3.4.1.min.js", "background.js"],
"persistent": true
},
3.每个运行环境都有自己的devTools，比如popup界面需要调出开发者工具需要对着插件的icon点击右键，然后点击审查弹出内容，需要调出background需要在chrome://extensions/ 找到插件，如果background.js配置成功的话 会有一个背景页的链接，点击就会调出开发者工具
4.官方说在background写定时任务需要使用到alarm 但是实际上settimeout和setintervel也是可以的（另外如果防止chrome杀掉后台程序，需要设置manifest.json中的persistent = true）
5.在background 程序中可以发器ajax请求，但是需要api所在服务器支持跨域设置
6.html中的inline javascript 不会被执行
我的小应用(chrome中获取指定网站的cookie)
https://github.com/spademan/g...
希望能给个小星星