chrome 插件开发初试

chrome浏览器支持 插件与app开发

插件：

1.先配置manifest.json, 配置主要的"default_popup"
popup.html, 弹出页js,后台js, 注入的js

2.在popup.htmll中引入弹出页js,不能在popup.html写script标签，chrome不支持

3.DOM与注入页是独立的，不能直接通信，要使用chrome文档中的通信方式进行通信

分为content-script, background, devtool,popup

content-script与可以访问页面dom, 但js环境是独立的，不能访问页面js，

background通信devtool要通过:
background:chrome.runtime.onConnect.addListener(function (port) {
const extensionListener = function (message, sender, sendResponse) {};
port.onMessage.addListener(extensionListener);
port.onDisconnect.addListener(function(port) {
port.onMessage.removeListener(extensionListener);
});
});
devtool: portRef = chrome.runtime.connect({name: "fish"});
portRef.postMessage({name:'ON_TRACKER'});

content-script与devtool通信：
content-script:
chrome.extension.onMessage.addListener(this.messageListener);

devtool:
chrome.tabs.query({active: true}, function(tabs){
chrome.tabs.sendMessage(tabs[0].id,{action:'ON_TRACKER'}, function(response){});
});

content-script与页面 js通信
document.addEventListener document.dispatchEvent