(轻松修复)如何通过内容插入div.js谷歌浏览器扩展程序?

Question

我想通过内容脚本(content.js(为我的谷歌浏览器扩展程序创建一个叠加层。我应该怎么做？

下面是执行内容脚本的代码：

chrome.webNavigation.onCommitted.addListener(function() {
chrome.windows.getCurrent(function (currentWindow) {
chrome.tabs.query({ active: true, windowId: currentWindow.id }, function (activeTabs) {
activeTabs.map(function (tab) {
chrome.tabs.executeScript(tab.id, { file: 'contentScript.js', allFrames: false });
});
});
});
}, {url: [{urlMatches : 'https://mail.google.com/'}]});

这是我的内容脚本.js

window.addEventListener('DOMContentLoaded', setUpOverlay, false);

function setUpOverlay(){
//Set up overlay div in here
}

Answer 1

实现您想要的最佳方法是使用 chrome 消息 api 并将消息传递给内容脚本以执行代码 以下是它的工作原理：

//popup.js 
chrome.tabs.query({active:true,currentWindow:true},(tabs)=>{
chrome.tabs.sendMessage(tabs[0].id,'execoverlay',(resp)=>{
console.log(resp.msg)
})
})
//contentScript.js
chrome.runtime.onMessage.addListener((request,sender,sendMessage)=>{
if(request==='execoverlay'){
// your code goes here 
sendMessage({msg:'recieved'})
}
})