从弹出窗口发送消息到内容脚本？答案

【问题标题】：Send message from popup to content script?从弹出窗口发送消息到内容脚本？
【发布时间】：2012-11-30 13:39:11
【问题描述】：

假设我想在单击 google chrome 扩展程序的弹出页面中的按钮时运行内容脚本？

我尝试了以下方法：

//popup.js
document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('button').addEventListener('click', clicked);
  main();
});

function clicked(){
    chrome.tabs.getCurrent(
        function(tab){
            console.log(tab);
            chrome.tabs.sendMessage(tab.id, "doSomething");     
        }
    ); 
}

在内容脚本中：

chrome.extension.onMessage.addListener(
    function(message, sender, sendResponse){
        console.log("hello world");
    }
);

问题是来自chrome.tabs.getCurrent( ) 的回调中的tab 未定义。

【问题讨论】：

标签： javascript events google-chrome google-chrome-extension message

【解决方案1】：

您是否已为 manifest.json 中的选项卡授予权限，如此处所示。

 "permissions": [
    "tabs"
  ],

此外，以下代码返回的 tab.id 是弹出视图 (NOT A CONTENT SCRIPT TAB.ID)

chrome.tabs.getCurrent(
        function(tab){
            console.log(tab);
            chrome.tabs.sendMessage(tab.id, "doSomething");     
        }
    );

如果您想向您正在浏览的标签发送消息，请使用以下代码的 tab.id，它会给出正确的结果

chrome.tabs.query({"status":"complete","windowId":chrome.windows.WINDOW_ID_CURRENT,"active":true}, function(tabs){
     console.log(JSON.stringify(tabs[0]));
     console.log(tabs[0].id); 
});

如果您需要更多信息，请告诉我

【讨论】：

tabs.query 返回一个数组。可能应该提到状态是可选的。 "windowId":chrome.windows.WINDOW_ID_CURRENT 可以替换成"currentWindow:true 看起来更整洁一些。也许还有一个指向 tabs.getCurrent 的链接，这样他们就可以重新阅读文档，很多人都弄错了……我确实做了很多次；）

【解决方案2】：

@Sudarshan 提供的答案有效且工作正常，但我刚刚找到了解决问题的另一种方法。只是想我把它放在这里：

function clicked() {
    chrome.tabs.executeScript(null,
      {code:"console.log('hello world');"});
}

它将注入并执行脚本。

【讨论】：