分析网站的优势和不足,外贸网站推广收费,协会网站信息平台建设,js 网站制作Chrome扩展通信
chrome扩展的5种js
js类型介绍popup单击插件图标后的弹窗中的js#xff0c;由于单击图标打开popup#xff0c;焦点离开又立即关闭#xff0c;生命周期一般很短。content-script与页面共享DOM#xff0c;但是不共享JS#xff0c;可访问部分chrome扩展API。…Chrome扩展通信
chrome扩展的5种js
js类型介绍popup单击插件图标后的弹窗中的js由于单击图标打开popup焦点离开又立即关闭生命周期一般很短。content-script与页面共享DOM但是不共享JS可访问部分chrome扩展API。background权限最高几乎可调用所有Chrome扩展API除了devTools且可以无限制跨域。生命周期最长跟随浏览器开关。injected-script通过DOM操作的方式向页面注入的一种JS和原始页面共享js即可访问原始页面变量方法等无法访问Chrome扩展API。devtools每打开一个开发者工具窗口都会创建devtools的页面的实例F12窗口关闭页面也随之关闭故devtools的生命周期和devtools窗口是一致的。可访问一组特有的DevTools APIbackground都无权访问chrome.devtools.panels面板相关chrome.devtools.inspectedWindow获取被审查窗口的相关信息chrome.devtools.network获取有关网络请求信息。
Chrome插件提供的2种额外的通信方式
chrome.tabs.sendMessage和chrome.runtime.sendMessage 用于简单的一次性请求;chrome.tabs.connect和chrome.runtime.connect用于长时效连接。
通信接口使用限制
inject-scriptcontent-scriptpopup-jsbackgroundinject-script-window.postMessage--content-scriptwindow.postMessage-chrome.runtime.sendMessage chrome.runtime.connectchrome.runtime.sendMessage chrome.runtime.connectpopup-js-chrome.tabs.sendMessage chrome.tabs.connect-chrome.runtime.sendMessage chrome.runtime.connectbackground-js-chrome.tabs.sendMessage chrome.tabs.connectchrome.tabs.sendMessage chrome.tabs.connect-devtools-jschrome.devtools.inspectedWindow.evalchrome.runtime.sendMessagechrome.runtime.sendMessage chrome.runtime.onMessageExternal 接口用于扩展间通信与chrome.tabs.sendMessage 用法类似。 一次性请求
一次性请求类似于HTTP请求包含一次请求和一次返回且如果接收方不在线就会出现请求失败
扩展程序popup、background向content-script一次性通信
//popup.js发送
function sendToContentScript(message, callback){chrome.tabs.query({active: true, currentWindow: true}, tabs {chrome.tabs.sendMessage(tabs[0].id, message, callback);});
}
sendToContentScript({cmd:test, value:popup_to_content}, res {console.log(res) *// {res:content_to_popup}*
} );// content_script.js接收
chrome.runtime.onMessage.addListener((request, sender, sendResponse) {console.log(request) *// {cmd:test, value:popup_to_content}*if(request.cmd content_to_bg){sendResponse({res:content_to_popup})// 若异步使用sendResponse需添加return true*}
})双方通信直接发送的都是JSON对象不是JSON字符串所以无需解析很方便当然也可以直接发送字符串
content-script主动向扩展程序background、popup一次性通信
// content_script.js发送
chrome.runtime.sendMessage({cmd: test, value:content_to_bg}, res {console.log(res); //{res:bg_to_content}
});// background.js接收
chrome.runtime.onMessage.addListener((request, sender, sendResponse) {console.log(request); // {cmd: test, value:content_to_bg}sendResponse({res:bg_to_content})
});注意事项
content_scripts向popup主动发消息的前提是popup处于打开状态否则需要利用background作中转使用chrome.runtime.sendMessage后无论是否需要回应接收方都需调用sendReponse反馈若不调用则发送方就会报错如果background和popup同时监听那么它们都可以同时收到消息但是只有一个可以sendResponse一个先发送了那么另外一个再发送就无效
页面脚本包括inject-script和content-script之间一次性通信
由于inject-script和content-script内均可获取到原始页面的window对象故可通过window.postMessage来进行通信。该方法还可规避跨域的限制,可以在任意页面之间进行通信。
//inject-script
window.postMessage({cmd:test,value:inject_to_content},*)//content-script
window.addEventListener(message, e {console.log(e.data) //{cmd:test,value:inject_to_content}
})长时效连接
长连类似 WebSocket建立连接后会一直保持双方可以随时互发消息。
chrome.tabs.connect和chrome.runtime.connect 长时效连接通信示例
扩展程序和web页面之间建立长连接只需要从一端建立就可以了。 在popup或js或background发起连接请求
//popup.js或background.js 发起连接需要指定发送到某个标签页
chrome.tabs.query({active: true, currentWindow: true}, tabs {const port chrome.tabs.connect(tabs[0].id, {name: popup});//向指定tabd页发起连接请求port.postMessage({cmd: popup-connect,value:extension});port.onMessage.addListener(msg {if(msg.cmd connected) {//do somethingport.postMessage({cmd: done});}});
});在content-script发起连接和监听消息
// content-script直接建立长链接
const port chrome.runtime.connect({name: content});
port.postMessage({cmd: cnt-connect});
port.onMessage.addListener(msg {if(msg.cmd connected){//do somethingport.postMessage({cmd: done});}
});任意一端监听连接请求
chrome.runtime.onConnect.addListener(port {if(port.name popup) {port.onMessage.addListener(msg {if(msg.cmd popup-connect) port.postMessage({cmd: connnected});});}else if(port.name content){......}
});postMessage和messageChannel 长时效连接通信
同一MessageChannel实例下的port1和port2两个对象可以通过postMessage和onmessage方法相互发送和接收消息;port1和port2是MessagePort实例MessagePort继承了Transferable接口可在不同可执行上下文之间传递。window.postMessage(message, targetOrigin, [transfer]),第三个参数可以用来传递Transferable对象
//inject-script
const {port1,port2} new MessageChannel();
window.addEventListener(load, () {
port1.onmessage (e) {console.log(e)
}
window.postMessage(来自inject_script的信息, *, [port2]);
});//content-script
window.addEventListener(message, e{e.port[0].postMessage(来自content-script的信息)
});
