从chrome扩展程序到网页的通信(Communication from chrome extension to web page)

从chrome扩展程序到网页的通信(Communication from chrome extension to web page)

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

任何想法将不胜感激 :)

I know it's possible to postMessage from a web page to a chrome extension and get a ok response back to the web page, but is it possible the other way around ?

My question "I need to be able to sent a request into a webpage and wait for a response i can use in the extension. Maybe not with postMessage ?"

I know the docs says "Only the web page can initiate a connection." (https://developer.chrome.com/extensions/messaging#external-webpage)

Here is want i have tried so fare.

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 (not part of the extension)

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); } })

Any idea will be appreciated :)

最满意答案

您可以使用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 });

请注意，它需要标签 权限 。

You can use chrome.tabs.executeScript API to do this.

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 });

Please note that it needs tabs permission.