由于内容脚本的注入方式，您的脚本不起作用。
问题
当您（重新）加载扩展程序时，与某些人的预期相反，Chrome不会将内容脚本注入与清单中的模式匹配的现有选项卡中。只有在加载扩展后，任何导航才会检查 URL 是否匹配并注入代码。
所以，时间线：
- 您打开一些选项卡。没有内容脚本有1。
- 你加载你的扩展。它的顶级代码被执行：它尝试将消息传递给当前选项卡。
- 由于那里还没有侦听器，所以它失败了。（这可能是
chrome://extensions/页面，无论如何你不能在那里注入）
- 如果之后您尝试导航/打开一个新选项卡，侦听器将被注入，但您的顶级代码不再被执行。
1 - 如果您重新加载扩展程序，也会发生这种情况。如果注入了内容脚本，它会继续处理其事件/不会被卸载，但无法再与扩展进行通信。（详情见文末附录）
解决方案
解决方案 1：您可以首先询问您要发送消息的选项卡是否已准备好，然后在静音时以编程方式注入脚本。考虑：
// Background
function ensureSendMessage(tabId, message, callback){
chrome.tabs.sendMessage(tabId, {ping: true}, function(response){
if(response && response.pong) { // Content script ready
chrome.tabs.sendMessage(tabId, message, callback);
} else { // No listener on the other end
chrome.tabs.executeScript(tabId, {file: "content_script.js"}, function(){
if(chrome.runtime.lastError) {
console.error(chrome.runtime.lastError);
throw Error("Unable to inject script into tab " + tabId);
}
// OK, now it's injected and ready
chrome.tabs.sendMessage(tabId, message, callback);
});
}
});
}
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
ensureSendMessage(tabs[0].id, {greeting: "hello"});
});
和
// Content script
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if(request.ping) { sendResponse({pong: true}); return; }
/* Content script action */
});
解决方案 2：始终注入脚本，但要确保它只执行一次。
// Background
function ensureSendMessage(tabId, message, callback){
chrome.tabs.executeScript(tabId, {file: "content_script.js"}, function(){
if(chrome.runtime.lastError) {
console.error(chrome.runtime.lastError);
throw Error("Unable to inject script into tab " + tabId);
}
// OK, now it's injected and ready
chrome.tabs.sendMessage(tabId, message, callback);
});
}
和
// Content script
var injected;
if(!injected){
injected = true;
/* your toplevel code */
}
这更简单，但在扩展重新加载时会很复杂。重新加载扩展后，旧脚本仍然存在1但它不再是“您的”上下文 - 因此injected将是未定义的。注意可能会执行两次脚本的副作用。
解决方案 3：在初始化时不加选择地注入您的内容脚本。仅当可以安全地运行相同的内容脚本两次或在页面完全加载后运行它时，这才是安全的。
chrome.tabs.query({}, function(tabs) {
for(var i in tabs) {
// Filter by url if needed; that would require "tabs" permission
// Note that injection will simply fail for tabs that you don't have permissions for
chrome.tabs.executeScript(tabs[i].id, {file: "content_script.js"}, function() {
// Now you can use normal messaging
});
}
});
我还怀疑您希望它在某些操作上运行，而不是在扩展负载上运行。例如，您可以使用浏览器操作并将代码包装在chrome.browserAction.onClicked侦听器中。
关于孤立内容脚本的附录
当扩展程序被重新加载时，人们会期望 Chrome 清理所有内容脚本。但显然情况并非如此。内容脚本的侦听器未被禁用。但是，任何带有父扩展的消息都将失败。这可能应该被视为一个错误，并且可能会在某个时候得到修复。我将称这种状态为“孤儿”
在以下两种情况下，这都不是问题：
- 内容脚本没有页面事件的监听器（例如只执行一次，或者只监听来自后台的消息）
- 内容脚本对页面不做任何事情，只向有关事件的背景发送消息。
但是，如果情况并非如此，您就会遇到问题：内容脚本可能正在执行某些操作，但会失败或干扰其自身的另一个非孤立实例。
对此的解决方案是：
- 跟踪所有可以被页面触发的事件监听器
- 在对这些事件采取行动之前，向后台发送“心跳”消息。3a. 如果后台响应，我们很好，应该执行操作。3b. 如果消息传递失败，我们就是孤儿，应该停止；忽略该事件并注销所有侦听器。
代码、内容脚本：
function heartbeat(success, failure) {
chrome.runtime.sendMessage({heartbeat: true}, function(reply){
if(chrome.runtime.lastError){
failure();
} else {
success();
}
});
}
function handler() {
heartbeat(
function(){ // hearbeat success
/* Do stuff */
},
function(){ // hearbeat failure
someEvent.removeListener(handler);
console.log("Goodbye, cruel world!");
}
);
}
someEvent.addListener(handler);
后台脚本：
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if(request.heartbeat) { sendResponse(request); return; }
/* ... */
});