Google Chrome-擴展程序和網頁無法通信

Question

我正在嘗試從網頁訪問擴展名以及從擴展名訪問網頁。 這是我下面的單元測試，但都失敗了。 我如何從擴展名獲得反饋到我的網頁？ 以及如何驗證我的網頁是否已連接到擴展程序，或者是否已收到查詢？

擴展名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

注意：

太多的混亂了。 沒有很好的解釋和記錄。 我們應該在這里很好地回答他們，以便它像湯匙一樣清晰。

使用localhost無關緊要，它可以與Google Chrome一起使用。 我能夠以http：//localhost/index.html的身份運行它，而無需制作假域名。

此步驟的目標：使我的網頁（此處的網頁表示http：//或https://www.example.com/file_iam_working.html ）連接擴展名 （此處的擴展名是manifest.json and background.js文件），並且為了避免混淆整個應用程序 ，我們正在研究此問題的網頁和擴展程序 。

我將在以后只為應用編寫文檔，以便它易於閱讀並自己完成，而不會浪費太多時間。 讓我們不要困惑。

步驟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。 如果是應用程序，它將有另一個名為“啟動”的按鈕，我們不是將其作為應用程序，因此請忽略它。

步驟3：運行您的網頁以連接到您剛剛准備的擴展程序 。

a）運行網絡服務器

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瀏覽器中，進入控制台並查看擴展程序到網頁的輸出，如下所示：

保持微笑:)並做出更輕松的答案，這樣孩子們就可以學習它，而不必認為它的火箭科學如此復雜。

Answer 2

您正在混合使用Chrome中的各種通信類型。 您需要重新閱讀文檔中的指南。

您的背景監聽onMessage事件，該事件僅注冊擴展內部的消息。

它還嘗試使用chrome.tabs.sendMessage發送消息，該消息僅與內容腳本通信。 其中沒有任何東西。

您的網頁代碼發送的消息被認為是外部消息，因此需要onMessageExternal偵聽器。

請注意，背景頁面無法將消息發送到網頁：如果需要雙向通信，則可以使用connect / onConnectExternal建立端口，或在混合內容中添加諸如that和that之類的內容腳本。

一個單獨的問題是Chrome可能不允許localhost作為可連接域。 一種解決方案是使用hosts文件將偽造域分配給您的計算機。

Google Chrome-擴展程序和網頁無法通信

問題描述

2 個解決方案

解決方案1
2 2016-02-03 23:43:01

解決方案2
1 已采納 2016-02-03 22:31:56

Google Chrome-擴展程序和網頁無法通信

問題描述

2 個解決方案

解決方案1 2 2016-02-03 23:43:01

解決方案2 1 已采納 2016-02-03 22:31:56

解決方案1
2 2016-02-03 23:43:01

解決方案2
1 已采納 2016-02-03 22:31:56