这里就不过多的阐述谷歌浏览器插件的一些概念了,直接上他们如何通信
主要涉及两个api
chrome.runtime.onMessage.addListener
chrome.runtime.sendMessage
popup.js
//主动发消息chrome.tabs.sendMessage
domcument.addEventListener('click',async () => {
//这里权限需要配置 tabs
const [tab] =await chrome.tabs.query({active:true,currentWindow:true})
//发消息
chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) {
console.log(response); // 向content-script.js发送请求信息
}
});
})
//接受消息
chrome.runtime.onMessage.addListener((request, _sender, sendResponse) => {
const { val1, val2,url } = request;
console.log('request',request);
});
content.js
这里是接受消息
chrome.runtime.onMessage.addListener(
function(request, sender, sendMessage) {if (request.greeting == "hello"){
let body = document.body.innerHTML
sendMessage(body);
} else {
sendMessage("FUCK OFF");
}
});
background
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
chrome.tabs.onActivated.addListener(() => {
chrome.runtime.sendMessage({ val1: 1, val2: 2,message:message });
});
});