chrome extension开发
一、前言
Chrome插件是一个用Web技术开发，可以增强浏览器功能的软件。它其实和一个普通web应用一样都是由html+css+js经过zip打包组成的，插件可以使用Chrome提供的浏览器API。
在chrome浏览器的【扩展程序】里，可以打开开发者模式，加载一个文件夹来进行插件的开发。可以监听本地开发的代码，实时编译，改动后再刷新加载新的插件来调试。
对于调试完成的插件，可以打包成.crx包文件，去发布到chrome商店。
二、核心介绍
一个插件的核心是manifest.json清单文件，提供有关扩展程序的各种信息。其中，manifest_version、name、version3个是必不可少的。
{
"manifest_version": 2,
"description": "简单的Chrome扩展demo",
"version": "1.0.0",
"name": "chrome_helper",
"browser_action": {
"default_popup": "popup.html",
"default_title": "这是一个示例Chrome插件",
"default_icon": "images/icon-34.png"
},
"background": {
"page": "background.html"
},
"devtools_page": "devtools.html",
"icons": {
"128": "images/icon-34.png"
},
"permissions": [
"<all_urls>",
"storage",
"webRequest",
"webRequestBlocking"
],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"content_scripts": [
{
"matches": ["<all_urls>"],
"run_at": "document_start",
"js": ["dist/content.bundle.js"]
}
]
}
- content_scripts
- background
- popup
content_scripts
document.addEventListener('DOMContentLoaded', function() {
const bd = document.getElementById('bannerbar');
console.log('我被执行了！', bd);
});
向页面注入脚本。content-scripts和原始页面共享DOM，但是不共享JS。
也就是说content_scripts注入的脚本可以拿到DOM节点做分析，但是没办法获取到别的js下的变量。
权限：content-scripts不能访问绝大部分chrome.xxx.api。
可以访问：
chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
chrome.i18n
chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
chrome.storage
Q：那如果我们想注入js脚本后，同时可以获取到页面其他js暴露出来的变量能不能实现呢？
A：能！
inject脚本
如要访问页面JS（比如想要直接用其他js里暴露出来的变量），可以通过content_scripts把我们要执行的脚本注入到页面中。
具体的实现方式就是在content_scripts里把injetc.js动态注入到document里。
function injectCustomJs() {
const jsPath = 'dist/inject.bundle.js';
var temp = document.createElement('script');
temp.setAttribute('type', 'text/javascript');
// 获得的地址类似：chrome-extension://asdasdadavdfscgfdhfgh/js/inject.js
temp.src = chrome.extension.getURL(jsPath);
temp.onload = function() {
// 不想在Element里暴露js的话可以在onload事件里再remove掉这个script节点
console.log('inject');
};
document.head.appendChild(temp);
}
background
后台进程脚本。在manifest.json里通过background引入background.html，可以在html里再引入js资源。
打开方式：在扩展程序里打开。
图片
特性：
- 生命周期长，从浏览器页面打开时候开始加载，关闭时终止。
- 权限大，可以调用几乎可以调用所有的Chrome扩展API（除了devtools）。
- 无跨域限制，可以跨域访问任何网站而无需要求对方设置CORS。
Tip: chrome-extension://id/xx.html这种方式打开的网页都可以无限制跨域。
background因为无跨域又可以调用所有的api。可以实现dom操作和api拦截等。
通过chrome.webRequest来实现api篡改和拦截。
// 示例。拦截并所有发给baidu.com的请求
chrome.webRequest.onBeforeRequest.addListener(
function(details) {
// console.log('onBeforeRequest', details);
return {cancel: details.url.indexOf("://www.baidu.com/") !== -1};
},
{urls: ["<all_urls>"]},
["blocking", "extraHeaders"]
);
注意：
调用webRequest需要在manifest.json先声明webRequest权限，及要拦截的url过滤。
我这里先放过去了所有的url，直接写的"<all_urls>"。
附（webRequest的API）：
图片
popup
插件弹窗。配置在manifest.json里的browser_action里，可以配置一个弹窗网页、title、和插件的icon。
特性：
- 生命周期短。这点和background不同，popup在鼠标点击icon打开popup弹窗的时候开始生命周期，在关闭popup页面时候结束。
- 权限和background非常类似，调用的api一样。
- popup中可以直接通过chrome.extension.getBackgroundPage()获取background的js，也可以直接访问background的DOM。
popup页面的打开是在插件icon上右击选择审查弹出内容。
图片
三、数据和通信
storage
chrome.storage可以在插件里的数据存储。
storage分位sync和local两个维度。sync是同步到插件的，可以跟随chrome账户做同步，local顾名思义就是存储在chrome本地。
message
content_scripts、background、popup三者可以通过chrome.extension.onMessage来通信。
chrome.extension.onMessage.addListener((request, sender, sendResponse) => {
console.log('收到消息')
sendResponse('发送返回值');
});
chrome.tabs.query可以拿到当前激活态的tab页面。
chrome.extension.getBackgroundPage可以返回当前扩展在后台运脚本的window对。
四、注意事项
- 开发调试过程中，因为加载的目标文件夹是固定的。可以监听文件改动，实时编译。
-
每次修改代码后，需要在扩展程序页面，重新刷新加载。如果有报错，可以在加载界面看到。
图片
参考：
