ChromeExtention

插件基本组成结构与介绍

不同JS的权限对比

JS种类	可访问的API	DOM访问情况	JS访问情况	直接跨域
injected-script	和普通JS无任何差别，不能访问任何扩展API	可以	可以	不可以
content-script	只能访问 extension、runtime等部分API	可以	不可以	不可以
popup-js	可访问绝大部分API，除了devtools系列	不可直接访问	不可以	可以
background-js	可访问绝大部分API，除了devtools系列	不可直接访问	不可以	可以
devtools-js	只能访问 devtools、extension、runtime等部分API	可以访问devtools	可以访问devtools	不可以

组成间的通信方式

	injected-script	content-script	popup-js	background-js
injected-script	无	window.postMessage()	无	无
content-script	window. postMessage()	-	chrome.runtime. sendMessage() chrome.runtime. connect()	chrome.runtime. sendMessage() chrome.runtime. connect()
popup-js	-	chrome.tabs. sendMessage() chrome.tabs.connect()	-	chrome.extension. getBackgroundPage()
background-js	-	chrome.tabs. sendMessage()	chrome.tabs. connect() chrome.extension. getViews()	-
devtools-js	chrome.devtools. inspectedWindow. eval()	-	chrome.runtime. sendMessage()	chrome.runtime. sendMessage()

注：-表示不存在或者无意义，或者待验证。

webRequest

HTTP请求的生命周期

webRequest事件回调

调试（背景页、注入脚本 不同）

Service Worker 调试入口

Content Script 调试入口 - F12

参考

API - Mozilla | MDN
从浏览器原理出发聊聊Chrome插件
Chrome Extension v3 开发指南
Chrome 插件 V3 版本 Manifest.json 中的内容脚本（Content Scripts）解析
最新版 V3 chrome 插件开发~ demo + 坑
Chrome Extension Manifest v2升v3初体验
终于实现了Chrome MV3 的网络请求更改
Chrome Extensions v3 迁移清单
迁移到 Manifest V3
Chrome 插件 V2 迁移至 V3 版本

[Chrome插件开发]监听网页请求和响应
chrome扩展程序获取responseBody的最佳方案——改写XHR

油猴开发指南 - 油猴中文网
Extension Manifest Converter - github

常见问题

1. 通信问题最多！
2. 对于原生开发，jquery无疑是最好用的工具。
3. content-scripts和原始页面共享DOM，但不共享JS；如要访问页面JS（例如某个JS变量），只能通过injected js来实现。
4. V3 中 background.js 中localStorage被禁止使用（注意，只是background），所以需要有替代方案，两个：

• indexedDB ：如果是简单使用，不太建议，太重
• chrome.storage ：简单使用合适，但它有另外的问题

5. content-scripts不能访问绝大部分chrome API，除了下面这4种：

• chrome.extension
• chrome.i18n
• chrome.runtime
• chrome.storage

6. webRequest onCompleted 事件中 没有 responseBody，需用 chrome.devtools.network.onRequestFinished 来获取 responseBody。