Chrome Ext 打开选项卡并向新建选项卡的内容脚本发送消息答案

【问题标题】：Chrome Ext Open Tab and Send Message to Content Script of Newly Created TabChrome Ext 打开选项卡并向新建选项卡的内容脚本发送消息
【发布时间】：2014-03-25 05:01:20
【问题描述】：

我正在尝试在我的 chrome 扩展中从弹出窗口中打开一个新选项卡（它正在工作），然后还将一条消息传递给将注入新打开的选项卡的内容脚本。在弹出窗口中单击按钮后，将在我的 popup.js 中调用此代码。

选项卡按预期打开，但内容脚本未按预期执行。我正在尝试利用 create 方法的回调函数。回调内部的代码已经过单独测试，并且在单独运行时可以按预期工作，我只是无法弄清楚如何将这些正确地组合在一起。我想这可能是因为内容脚本尚未加载而发生的，所以我尝试了一些方法来等到标签加载时没有运气。下面是我一直在处理的代码。

$("#submit_button").click(function() {
  chrome.tabs.create({url: "http://myurl.com", index: 0}, function(tab) {
    chrome.tabs.sendMessage(tab.id, {"value": "amazon_paste", "object": chrome.extension.getBackgroundPage().jsonOrderObj});
  });
});

这是注释掉创建选项卡并手动转到网址后的工作代码：

//chrome.tabs.create({url: "http://myurl.com", index: 0}, function(tab) {

        chrome.tabs.getSelected(null, function(tab) {
            chrome.tabs.sendMessage(tab.id, {"value": "amazon_paste", "object": chrome.extension.getBackgroundPage().jsonOrderObj});
        });
//});

这也是我的 JSON 清单：

{
  "name": "Amazon Order Extension",
  "version": "2.0",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": ["https://sellercentral.amazon.com/gp/orders-v2/confirm-shipment/*"],
      "js": ["jquery.js", "amazon_content_script.js"]
    },
    {
        "matches": ["http://myurl.com"],
        "js": ["jquery.js", "inventory_content_script.js"]
    }
  ],
  "permissions": ["background", "tabs"],
  "background": {
     "page": "background.html"
  },
  "description": "",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

【问题讨论】：

您能否通过alert() 或console.log 确认内容脚本确实有效？你能发布你的 manifest.json 吗？
看来我的情况是一样的。在stackoverflow.com/q/17564324/1566008，我看到来自 create 的回调行为与预期不同：(
是的，我已通过警报确认内容脚本正在运行。我注释掉了打开的选项卡，手动转到新选项卡中的 url 并运行代码，它按预期工作。 @JeremiahMegel 我在上面添加了工作代码示例。
@JeremiahMegel 抱歉，我忘了早点发布我的清单。现已发布。
@boldSOCKS 我也有同样的问题。这有什么好运气吗？似乎创建选项卡并向其内容脚本发送消息不是受支持的消息传递模式。

标签： google-chrome google-chrome-extension

【解决方案1】：

对于“外部”网站，您的 manifest.json 中似乎应该有一个 "externally_connectable" 键：

"externally_connectable": {
  "matches": [
    "*://*.example.com/*"
  ]
}

添加这个对你有用吗？

来源：http://developer.chrome.com/extensions/messaging#external-webpage

【讨论】：