Question

我正在尝试从网页访问扩展程序，从扩展程序访问网页。这是我的以下单元测试，但它都失败了。我如何从扩展程序获得反馈到我的网页？以及如何验证我的网页是否已连接到扩展程序或是否已收到查询？

Extension Manifest.json：

{
  "name" : "Idle - Simple Example",
  "version" : "1.0.1",
  "description" : "Demonstrates the Idle API",
  "externally_connectable": {
    "matches": ["http://localhost/*"]
  },  
  "background" : {
    "scripts": ["background.js"]
  },
  "permissions" : [ "idle" ],
  "manifest_version": 2
}

扩展background.js：

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
    console.log(response.farewell);
  });
});

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ? "from a content script:" + sender.tab.url : "from the extension");
    if (request.greeting == "hello")
      sendResponse({farewell: "goodbye"});
  });

网页http://localhost/index.html：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>I am WebPage</title>
</head>
<body>

<script type="text/javascript" >
if(chrome && chrome.runtime && chrome.runtime.sendMessage) {
  console.log("Step 1: trying");
  chrome.runtime.sendMessage("omodcbfdcmifigpokakmlmobfidhgnij",{greeting: "hello"}, function(response) {
    console.log(response);
  });

}
</script>

</body>
</html>

Answer 1

您正在混合Chrome中的不同通信类型。您需要重新阅读文档中的guide。

您的后台侦听onMessage事件，该事件仅记录扩展程序内部的消息。

它还尝试发送带有chrome.tabs.sendMessage的消息，该消息仅与内容脚本通信。其中你没有。

您的网页代码会发送一条被视为外部的邮件，因此需要onMessageExternal个侦听程序。

请注意，后台页面无法向网页发送消息：如果您需要双向通信，则可以使用connect / onConnectExternal建立端口，也可以在内容中添加内容脚本例如that和that。

另一个问题是Chrome可能不允许localhost作为可连接的域。解决方案是分配fake domain to your machine with hosts file。

Answer 2

注意：

有太多的混淆。没有很好地解释和记录。我们应该在这里很好地回答它们，这样它就像勺子一样清晰。

如果使用localhost并不重要，它可以与Google Chrome一起使用。我能够以http://localhost/index.html的形式运行它而不会伪造域名。

此步骤的目标：将我的网页（此处为网页表示http：//或https://www.example.com/file_iam_working.html）连接扩展程序（这里扩展名表示manifest.json and background.js文件），还有一个名为 app ，以免混淆整件事，我们正在开展网页和扩展在这个问题上。

我将稍后记录 app ，以便它易于阅读并自行完成而不会浪费太多时间。不要混淆。

第1步：让manifest.json和background.js进行扩展

的manifest.json：

{
  "name" : "Idle - Simple Example",
  "version" : "1.0.1",
  "description" : "Demonstrates the Idle API",
  "externally_connectable": {
    "matches": [
      "*://localhost/*"
    ]
  }, 
  "background": {
      "scripts": [ "background.js" ]
  },   
  "permissions" : [ 
    "idle",
    "*://localhost/*"
  ],
  "manifest_version": 2
}

background.js：

console.log("Step 1 - boot");
chrome.runtime.onMessageExternal.addListener(function(request, sender, sendResponse) {
    console.log(sender.tab ? "from a content script:" + sender.tab.url : "from the extension");
    if (request.greeting == "hello")
      sendResponse({farewell: "goodbye"});
});

第2步：在Google Chrome

中加载扩展程序

a）导航至：

b）单击第一个按钮，然后加载目录/文件夹

c）一旦重新加载为扩展程序，您将看到如下（大约）并且它有一个ID。如果它是应用程序，它将有另一个名为＆＃34; launch＆＃34;的按钮，我们不会将其作为应用程序而忽略它。

第3步：运行网页以连接您刚刚准备的扩展程序。

a）运行web-server

b）制作您的网页，以便您可以http://localhost/index.html或https://localhost/index.html打开它，在此示例中，我们为http://制作此防弹。所以我创建了一个文件index.html并使用以下源代码。

的index.html：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>I am WebPage, like Facebook or Stackoverflow. Think like kid of 5 years old</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
</head>
<body>

<script type="text/javascript" >  

if(chrome && chrome.runtime && chrome.runtime.sendMessage) {
  console.log("Step 1: trying");
  chrome.runtime.sendMessage("omodcbfdcmifigpokakmlmobfidhgnij",{greeting: "hello"}, function(response) {
    console.log(response);
  });

}
</script>

</body>
</html>

第4步：在您的Google Chrome浏览器中转到控制台，查看扩展程序到网页的输出，如下所示：

保持微笑:)并让答案更轻松，让孩子们可以学习 - 而不用认为它的火箭科学就像复杂一样。

Google Chrome浏览器 - 扩展程序和网页无法通讯

2 个答案: