使用 chrome.runtime.sendmessage 从网页通信到打包的应用程序答案

【问题标题】：Using chrome.runtime.sendmessage to communicate from a webpage to a packaged app使用 chrome.runtime.sendmessage 从网页通信到打包的应用程序
【发布时间】：2014-05-08 02:22:37
【问题描述】：

我正在尝试从网页与打包的应用程序进行通信。这个想法是让网页从串行设备中读取一个数字。因为要访问串口设备，所以需要一个打包好的app，不能使用扩展。这与Keep Chrome Packaged App running in background? 非常相似，似乎Chrome documentation 表示这是可能的。

如何从常规网页执行 chrome.runtime.sendMessage？当我这样做时，我得到 *Uncaught TypeError: Cannot read property 'sendMessage' of undefined。我的简单功能是：

function doFunction(){
    chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url},
      function(response) {
        if (!response.success)
          handleError(url);
      });
}

我的打包应用程序加载并可以访问串行端口。但我怀疑清单没有“启用”常规网页的 chrome.runtime 。清单.json：

{
  "name": "Hello World!",
  "description": "My first Chrome App.",
  "version": "0.1",
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "16": "calculator-16.png", "128": "calculator-128.png" },
  "permissions": [
    "serial",
    "*://localhost/*"
  ],
  "externally_connectable": {
  "matches": [
      "*://localhost/*"]
}
}

也许是我用于测试的 ://localhost/。但 Chrome 没有抱怨。

有什么想法吗？提前致谢。

【问题讨论】：

Err，// For tests. 不是有效的 JSON，您不能在此文件中包含 cmets。试着把它拿出来。
感谢您的想法。我把它拿出来，没有任何变化。 Chrome 会加载打包的应用程序并正常运行。请注意，它没有打包。不幸的是，我的常规网页（来自文件：//localhost/）仍然未定义 chrome.runtime。
来自文档：'URL 模式必须至少包含一个二级域 - 即，禁止使用诸如 "*"、"*.com"、"*.co.uk" 和 "*.appspot.com" 之类的主机名模式。尝试在您的 hosts 文件中为 127.0.0.1 定义一个二级别名并使用它。

标签： google-chrome google-chrome-app

【解决方案1】：

Xan 的评论成功了。

虽然 Chrome 没有抱怨 *://localhost/*，但它不起作用。 Chrome 确实抱怨过其他组合，例如 file://localhost/。

我将 foo.com 添加到主机文件中，然后通过 Web 服务器提供我的网页，并且成功了！我可以从我的网页与打包的应用程序进行通信。

请注意，浏览到 file://www.foo.com/hostpage.html 不起作用。但是浏览到http://www.foo.com:3000/hostpage.html 确实如此。（我使用的是 Rails，因此使用了 3000 端口）。

故事的精神：在本地测试时，您需要在主机文件中添加一个带有虚假二级域的条目。

这是我的 manifest.json：

{
  "name": "RFID Tag Reader",
  "description": "Reads RFID Tags connected via USB reader",
  "version": "0.0.0.1",
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": {
    "16": "rfid-16.png",
    "128": "rfid-128.png"
  },
  "permissions": [
    "serial",
    "*://www.foo.com/*",
    "*://arealsite.net/*"
  ],
  "externally_connectable": {
    "matches": [
      "*://www.foo.com/*",
      "*://arealsite.net/*"
    ]
  }
}

【讨论】：

您本可以要求我将我的评论转换为答案。但是哦，好吧。在 cmets 中回答是我自己的错。
对不起。我不太了解堆栈溢出。如果您想将其转换为答案然后我接受它，那对我来说很好。
我按照建议做了，但没有运气。您的清单最终看起来如何？ @Crivens
对于主机文件的新手，只需将此条目添加到Mac上的/etc/hosts：127.0.0.1 your-test-domain.com。如果它不能立即工作，请尝试清除缓存。它可能与浏览器有关。
在“externally_connectable”中添加"*://localhost/*"作为“匹配项”也对我有用（Chrome 86.0.4240.111）

【解决方案2】：

将"*://localhost/*" 添加到externally_connectable 对我有用。

【讨论】：