前端拓展：如何开发一个 Chrome 插件？，阿里+头条+抖音+百度+蚂蚁+京东面经

当页面运行之后，脚本内容也会在插件定义的时间运行，当页面点击按钮时，会出现两次弹窗。

content-scripts配置：

{

…

“content_scripts”: [

{

// 在匹配的URL中运行，<all_urls>表示所有的URL都会运行。

“matches”: [“<all_urls>”],

// 注入的js,会按顺序运行。

“js”: [“./js/content.js”],

// css引入需谨慎，因为可能会影响全局的样式,同样也能接收多个css文件，会按顺序插入到页面中

“css”: [“./css/style.css”],

// 代码注入的时机，可选值： “document_start”, “document_end”, or “document_idle”，最后一个表示页面空闲时，默认document_idle

“run_at”: “document_start”

},

{

“matches”: [“https://www.baidu.com/”],

“js”: [“./js/other.js”],

“run_at”: “document_start”

}

],

…

}

content.js代码如下：

console.log(‘hello, from content.js’);

other.js代码如下：

console.log(‘hello, from other.js…’)

更新插件，当在 https://bytedance.feishu.cn/drive/home/运行时：

因为【 https://bytedance.feishu.cn/drive/home/】只匹配到了<all_urls>的规则，所以之后运行content.js

当在https://www.baidu.com/运行时：

同时命中了2个规则，所以content.js和other.js都会运行，顺序也是正确的。

content-scripts 和原始页面共享DOM，但是不共享JS，如要访问页面JS（例如某个JS变量），只能通过inject-scripts来实现。content-scripts能够访问的Chrome API的权限也比较低，只能访问以下四个API：

• chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)

• chrome.i18n

• chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)

• chrome.storage

Inject-scripts

inject-scripts 是通过DOM操作插入的JS代码，通常在content-scripts只能操作DOM，但是却无法访问页面的JS，借助content-scripts可以操作DOM的能力，往页面中插入JS文件，给页面提供调用插件API的能力，以及和background通信的能力。

在插入之前，需配置一下web可访问的资源，同时content-scripts的调用时机换成"document_end"或者"document_idle"，不然会无法获取DOM,导致插入失败。在manifest.json中添加以下内容：

{

…

“conten