从 chrome 扩展程序到网页的通信答案

【问题标题】：Communication from chrome extension to web page从 chrome 扩展程序到网页的通信
【发布时间】：2017-04-20 21:57:45
【问题描述】：

我知道可以将网页中的消息发布到 chrome 扩展程序并得到一个好的响应返回到网页，但是否有可能反过来？

我的问题“我需要能够将请求发送到网页并等待我可以在扩展程序中使用的响应。也许不能使用 postMessage ？ "

我知道文档说“只有网页可以启动连接”。 (https://developer.chrome.com/extensions/messaging#external-webpage)

这是我迄今为止尝试过的。

background.js

chrome.extension.sendMessage("Hello from extension to webpage");
window.postMessage("Hello from extension to webpage");
chrome.tabs.sendMessage(TAB_ID, "Hello from extension to webpage");

webpage.js（不是扩展的一部分）

window.onmessage = (event) => {
  // Waiting for that message.
  console.info("Event received ", event);
}
window.chrome.runtime.connect(CHROME_EXTENSION_APP_ID).onMessage.addListener(function (){
  function(request, sender, sendResponse) {
     console.info("Event received from the extension", event);
  }
})

我们将不胜感激任何想法 :)

【问题讨论】：

使用内容脚本和普通的 DOM 消息，如 CustomEvent。
尝试检查 Communication with the embedding page 和相关的 SO post，如上所述，如果您使用的是内容脚本，则可以。您还可以查看forum，它讨论了将消息从扩展程序传递到网页。希望这会有所帮助。

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

您可以使用chrome.tabs.executeScript API 来执行此操作。

        var dataToWebPage = {text: 'test', foo: 1, bar: false};
        chrome.tabs.executeScript({
            code: '(' + function(params) {
                //This function will  work in webpage
                console.log(params); //logs in webpage console 
                return {success: true, response: "This is from webpage."};
            } + ')(' + JSON.stringify(dataToWebPage) + ');'
        }, function(results) {
            //This is the callback response from webpage
            console.log(results[0]); //logs in extension console 
        });

请注意，它需要标签 permission。

【讨论】：