javascript - 从 Chrome 扩展程序到网页的通信

Question

我知道可以将消息从网页发送到 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);
  }
})  

任何想法都会受到赞赏:)

Answer 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 .