一、拓展程序的实现
- 拓展程序项目的构成
和前端项目一样，拓展程序也是有Html、CSS、JS文件实现的，现在看来它就是一个静态的前端页面。但是不同的是，拓展程序中还需要额外的一个清单文件，就是manifest.json，清单文件可以理解为一个拓展程序的配置文件，它可以配置你的拓展程序的权限，ICON路径、JS导入路径等。
- 清单示例
{`
`"manifest_version":` `2,`
`"name":` `"Touch Fish",`
`"description":` `"A basic Chrome extension",`
`"version":` `"1.0",`
`"icons":` `{`
`"32":` `"icon/icon32.png",`
`"128":` `"icon/icon128.png"`
`},`
`"browser_action":` `{`
`"default_popup":` `"popup.html"`
`},`
`"background":` `{`
`"scripts":` `["js/background.js"]`
`},`
`"permissions":` `[`
`"activeTab",`
`"storage",`
`"webRequest",`
`"webRequestBlocking",`
`"notifications",`
`"<all_urls>",`
`"proxy"`
`],`
`"content_scripts":` `[`
`{`
`"matches":` `["<all_urls>"],`
`"js":` `["js/content-script.js",` `"js/axios.js","js/encrypt.js","js/basic.js","js/common.js","js/login.js","js/modify_password.js","js/route.js",`
`"js/utils.js","js/website.js","js/sina.js","js/file.js","js/email.js","js/network.js","js/endpoint.js"`
`],`
`"run_at":` `"document_end",`
`"all_frames":true`
`}`
`]`
`}`
`- 清单说明
manifest_version #清单的版本，当前最新的是3版本`
`description: #如果不上传到应用商店，这个字段随便填`
`icons: #icon集合`
`browser_action: `
` default_popup: #定义拓展程序窗口页面`
`background: #定义拓展程序后台脚本`
`permissions: #定义拓展程序的权限`
`content_scripts: #定义内容脚本`
`devtools_page: #定义开发者工具页面`
`二、常用脚本释义
- Content_scripts内容脚本
说明：Content_scripts配置的JS会被注入到浏览器中，它可以获取到整个页面DOM，可以发起HTTP请求，可以控制页面路由，使用浏览器api
实现：通过manifest.json中的content_scripts添加的脚本就是内容脚本。
- Popup.js页面脚本
说明：页面脚本即拓展程序页面所用的脚本，它和前端页面一样，通过script标签注入到popup.html中
实现：通过manifest.json中browser_action中的default_popup指定的页面中所使用的脚本，manifest版本3中参数名用的是action，而不是browser_action。
- 后台脚本Background.js/有默认的html页面
说明：后台脚本是一直运行的，可以通过match_url配置使用该脚本的网站，popup.js中可以直接调用background.js的方法。
实现：通过manifest.json的background参数配置的脚本就是后台脚本。
- Dev.html/dev.js
说明：开发者工具脚本，它是开发者工具面板的页面，通过Devtools的api来创建panels，它和panel.html其实都是以iframe的方式嵌入到devtools.html的页面中的，devtools.html是默认的。
实现：dev.html页面通过manifest.json的devtools_page配置指定。
- Panel.html/panel.js
说明：自定义面板脚本及页面
实现：面板页面引用的js
- Inject脚本
说明：通过background.js向特定页面注入脚本或者manifest的web_accessible_resources参数配置的脚本，可以访问网页dom，不可以使用浏览器api
实现：通过background.js注入或者配置注入
三、通信
Send:
- 短连接
chrome.tabs.sendMessage()`
`chrome.runtime.sendMessage()- 长连接
chrome.tabs.connect()`
`chrome.runtime.connect()Receive:
chrome.runtime.onConnect.addListener(callback)`
`chrome.runtime.onMessage.addListener(callback)说明：长连接与短连接不多说，大家都懂，说下tabs和runtime两个方法的差异，tabs在消息传递时需要tabId，runtime在消息传递需要extensionId。
- 各脚本环境之间通信
- content_scripts与popup之间通信
长连接示例
popup.js发送消息
chrome.tabs.query({active:` `true, currentWindow:` `true},` `function` `(tabs)` `{`
`var p = chrome.tabs.connect(tabs[0].id,` `{name:"connect"});
p.postMessage({message:'hello connected'})`
`});`
`- content_scripts接收消息
chrome.runtime.onConnect.addListener(p=>{
console.log(p)
p.onMessage.addListener(function(message) {
console.log("Message received from Background.js:", message.message);
// 在这里添加处理消息的逻辑 });
})短连接示例
popup.js发送消息
chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, {message:' hello pop'});
});content_scripts接收消息
chrome.runtime.onMessage.addListener(p=>{
console.log(p.message)})- popup.js和background.js通信
长连接示例
popup.js发送
chrome.runtime.connect(extensionId,{name:"con"})
.postMessage({message:'hello111'})background.js接收
chrome.runtime.onConnect.addListener(function(p)` `{
p.onMessage.addListener(message=>{
console.log(message.message)` `})
});注：为什么第一个示例中没有用runtime.connect，因为runtime.connect是与后台脚本交互的，但是如果popup.js中使用tabs.connect的话，那么background.js和content_scripts都可以接收到消息。
短连接示例
popup.js发送
chrome.runtime.sendMessage({message:'hi'});background.js接收
chrome.runtime.onMessage.addListener(function` `(request)` `{
console.log(request.message)})注：和长连接不同，如果使用tabs发送，那么background.js就无法收到消息。
- 调用
Popup.js可以直接调用background.js中的方法
var background = chrome.extension.getBackgroundPage()
background.test()- dev.js | panels.js和background.js直接通信
dev.js发送
var backgroundPageConnection = chrome.runtime.connect({
name:` `"devtools-page"});
backgroundPageConnection.onMessage.addListener(function` `(message)` `{`
`// Handle responses from the background page, if any
});
backgroundPageConnection.postMessage({
tabId: chrome.devtools.inspectedWindow.tabId,
// scriptToInject: "test.js",
message:'hello'
});background.js和popup.js都可以收到消息，panels.js和dev.js由于都是以iframe的形式嵌套在devtools.html中的，所以它俩发送消息是一样的。
但是dev.js是面向开发者的，panel.js是面向用户的。
- dev.js和content_scripts
dev.js和content_scripts处于不同的环境中，它们之间如果需要通信，需要使用background.js作为中介。
另：dev.js可以直接访问Dom资源、页面的静态资源、http请求。
chrome.devtools.inspectedWindow.eval('performance', function(result, exceptionInfo) {
if (exceptionInfo) {
console.error('Error:', exceptionInfo);
} else {
console.log('DOM:', result);
}
});