chrome扩展后台、js到content.js之间的消息传递

Question

我想在chrome扩展background.js到content.js.之间发送一条消息

背景看起来像这样：

setInterval(function(){
chrome.tabs.query({active: true}, function(tabs){
chrome.tabs.sendMessage(tabs[0].id, {"message": "sample_msg"});
});
},
1000);

content.js看起来像这样：

chrome.runtime.onMessage.addListener(function(message, sender) {
console.log('blablabla');
});

manifest.json看起来像这样：

{
"manifest_version": 1,
"name": "Chrome Extension",
"description": "",
"version": "0.0.1",
"background": {
"scripts": [
"/src/background.js"
]
},
"content_scripts": [
{
"matches": [
"*://google.com/*"
],
"js": [
"/src/content.js"
],
"all_frames": true
}
],
"browser_action": {
"default_popup": "/src/popup.html"
},
"permissions": [
"<all_urls>",
"activeTab",
"tabs",
"cookies",
"background",
"contextMenus",
"unlimitedStorage",
"storage",
"notifications",
"identity",
"identity.email",
"webRequest",
"webRequestBlocking"
]
}

我读了很多书，但我不明白为什么它不起作用？我能帮忙吗？方向议论

Answer 1

sendMessageAPI似乎是正确的，但URL匹配似乎有问题。

您的内容脚本将只注入google.com域，正如您在清单文件中的matches密钥中提到的那样。

打开google.com并查看地址栏，您可以看到URL
https://www.google.com/，因此要使您的内容脚本注入谷歌域，您需要更改matches

"matches": [
"https://*.google.com/*"
]

此外，将onMessage侦听器更改为以下

chrome.runtime.onMessage.addListener( 
function(request, sender, sendResponse) {
console.log("Received message", request.message);
}
);

现在转到google.com并刷新页面。