使用chrome.runtime.sendmessage从网页与打包的应用程序进行通信 [英] Using chrome.runtime.sendmessage to communicate from a webpage to a packaged app

问题描述

我试图从网页与打包的应用进行通信。这个想法是让网页从串口设备读取一个数字。由于我想访问串口设备，我需要一个打包的应用程序，并且不能使用扩展名。这与保持Chrome Packaged应用程序在后台运行？非常相似，似乎 Chrome文档说这是可能的。

我怎么能从常规网页执行chrome.runtime.sendMessage？当我这样做时，我得到* Uncaught TypeError：无法读取未定义的属性'sendMessage'。我的简单功能是：
$ b $ pre $ 函数doFunction（）{
chrome.runtime.sendMessage（editorExtensionId，{openUrlInEditor：url }，
函数（响应）{
if（！response.success）
handleError（url）;
}）;
}


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

  {
name：Hello World！，
description ：我的第一款Chrome应用，
version：0.1，
app：{
background：{
scripts：[background .js] 
} 
}，
图标：{16：calculator-16.png，128：calculator-128.png}，
权限：[
serial，
*：// localhost / *
]，
externally_connectable：{
 ：[
*：// localhost / *] 
} 
} 
  

也许这是我用来测试的：// localhost / 。但Chrome不会抱怨。

有什么想法吗？

解决方案

Xan的评论确实有效。

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

我将foo.com添加到主机文件，然后通过网络服务器提供我的网页，它的工作！我可以从我的网页与我打包的应用程序进行通信。

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

故事的士气：在本地测试时，您需要添加具有伪二级域名的条目以

这是我的manifest.json：

name：RFID标签阅读器，
description：读取通过USB阅读器连接的RFID标签，
版本：0.0.0.1，
app：{
background：{
scripts：[background.js]
}
}，
图标：{
16：rfid-16.png，
128：rfid-128.png
}，
权限：[
序列，
*：//www.foo.com/*，
*：//arealsite.net/*
，
externally_connectable： {
匹配：[
*：//www.foo.com/*，
*：//arealsite.net/*
]

I'm trying to communicate from a web page to a packaged app. The idea is to have the web page read a number from a serial device. Because I want to access the serial device, I need a packaged app and can't use an extension. This is pretty similar to Keep Chrome Packaged App running in background? and it seems that Chrome documentation says this is possible.

How can I execute the chrome.runtime.sendMessage from a regular web page? When I do so, I get *Uncaught TypeError: Cannot read property 'sendMessage' of undefined. My simple function is:

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

My packaged app loads and can access the serial ports. But my suspicion is the manifest isn't "enabling" the chrome.runtime of the regular webpage. Manifest.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/*"]
}
}

Maybe it's the ://localhost/ which I'm using for testing. But Chrome does not complain.

Any ideas out there? Thanks in advance.

解决方案

Xan's comment did the trick.

While Chrome did not complain about *://localhost/*, it did not work. Chrome did complain about other combinations such as file://localhost/.

I added foo.com to host file and then served up my web page through a web server, and it worked! I can communicate from my web page to my packaged app.

Note that browsing to file://www.foo.com/hostpage.html did not work. But browing to http://www.foo.com:3000/hostpage.html did. (I'm using Rails, hence the 3000 port).

Morale of the story: When testing locally, you need to add an entry with a bogus second level domain to your host file.

Here's my 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/*"
    ]
  }
}

这篇关于使用chrome.runtime.sendmessage从网页与打包的应用程序进行通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！