10、chrome拓展程序的实现
一、拓展程序的实现
- 拓展程序项目的构成
和前端项目一样，拓展程序也是有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);}
});参考文档：API 参考 | Chrome for Developers