如何与嵌入页面 Chrome 扩展程序通信？答案

【问题标题】：How to Communication with the embedding page Chrome Extension?如何与嵌入页面 Chrome 扩展程序通信？
【发布时间】：2015-10-29 15:37:48
【问题描述】：

我需要在扩展中实现消息传递。从 background.js 中的 content_script`a 中寻找了一种使用 window.postMessage() 和 window.addEventListener() 交换文档的方法，但消息没有发送。通过 content_script 我在 head 中加载了 js 代码。这是 background.js 的代码：

window.addEventListener ("message", function (event) {
  // We only accept messages from ourselves
  if (event.source! = window)
    return;

  if (event.data.type && (event.data.type == "FROM_PAGE")) {
    console.log ("Content script received:" + event.data.text);
    port.postMessage (event.data.text);
  }
}, False);

这在 content_script.js 中：

var s = document.createElement ('script');
s.src = chrome.extension.getURL ('inject.js');
(Document.head || document.documentElement) .appendChild (s);
s.onload = function () {
    s.parentNode.removeChild (s);
};

inject.js 中的这个：

window.postMessage ({type: "FROM_PAGE", text: "Hello from the webpage!"}, "*");

我做错了什么？

【问题讨论】：

window 后台页面中的对象引用自身，而不是当前查看的页面。至于你做错了什么 - 一切。你读过the documentation 并检查过the official sample extensions吗？

标签： javascript google-chrome-extension

【解决方案1】：

你应该使用：

chrome.runtime.onMessage.addListener

和

chrome.runtime.sendMessage

在不同的 js 组件之间传递消息。这个答案对我帮助很大：Chrome Extension how to send data from content script to popup.html

【讨论】：

我无法在 inject.js 中使用 chrome API。做什么？
您可以使用以下方式注入脚本：chrome.tabs.executeScript(null, {file: "my_file.js"});我使用该脚本使用 chrome.api 向 background.js 发送消息。

【解决方案2】：

网页与内容脚本或后台脚本之间的基本通信流程是：

使用内容脚本与Web共享DOM，使用window.postMessage发送消息，content.js接收消息后使用扩展API将消息转发给background.js。

manifest.json

{
  "name": "you name",
  "description": "you description",
  "version": "1.1.0",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "all_frames": true
    }
  ],
  "manifest_version": 2
}

web.html

<body>
  <button id="me">Button</button>
</body>

content.js

window.addEventListener('message', event => {
  chrome.runtime.sendMessage(`${event.data} forwarded to the background.js`);
});

document.querySelector('#me').addEventListener('click', () => {
  window.postMessage('Message from DOM', '*');
});

background.js

chrome.runtime.onMessage.addListener(msg => console.log(msg));

长期连接

content.js

const port = chrome.runtime.connect();
window.addEventListener('message', event => {
  port.postMessage(event.data);
});

document.querySelector('#me').addEventListener('click', () => {
  window.postMessage('Message from DOM', '*');
});

background.js

chrome.runtime.onConnect.addListener(port => {
  port.onMessage.addListener(msg => {
    console.log('msg: ', msg);
  });
});

另一种直接与 background.js 通信的方式

manifest.json（添加 externally_connectable）

{
  "name": "you name",
  "description": "you description",
  "version": "1.1.0",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "all_frames": true
    }
  ],
  "manifest_version": 2,
  "externally_connectable": {
    "matches": ["http://localhost/*"]
  }
}

web.html

<body>
  <button id="me">Button</button>
  <script>
   // Your extension ID, (pabahpeigkdpglhnjponplchdffchkdj).
    document.querySelector('#me').addEventListener('click', () => {
      chrome.runtime.sendMessage('pabahpeigkdpglhnjponplchdffchkdj', 'Web Message');
    });
  </script>
</body>

background.js

chrome.runtime.onMessageExternal.addListener(request => {
  console.log('request: ', request);
});

【讨论】：