Firefox WebExtensions将消息从浏览器发送到扩展,并在回调函数中获得响应

时间:2016-10-20 13:43:54

标签: javascript firefox google-chrome-extension firefox-webextensions

我正在尝试将Chrome扩展程序转换为FireFox WebExtensions。我的网页与后台脚本之间的通信存在问题。 从内容脚本我将一些功能注入浏览器页面。该函数需要调用浏览器扩展并获得响应。

  

的manifest.json   

{
"manifest_version" : 2,
"name" : "Sample",
"description" : "Sample",
"version" : "1.0",

"icons" : {
    "48" : "icons/link-48.png"
},

"applications" : {
    "gecko" : {
        "id" : "sample@sss.com",
        "strict_min_version" : "48.0"
    }
},

"permissions" : ["notifications", "alarms", "storage"],

"background" : {
    "scripts" : [
        "js/jquery.js",
        "background-script.js"
    ]

},
"web_accessible_resources" : ["js/content.js"], // Not working in firefox
"externally_connectable" : {
    "matches" : [
        "http://localhost/*",]
},
"content_scripts" : [{
        "matches" : ["<all_urls>"],
        "js" : ["js/jquery.js",
            "js/script.js",
            "content-script.js"
        ],
        "run_at" : "document_start"
    }
],
"default_locale" : "en"
}
  

内容的script.js

var port = chrome.runtime.connect();

window.addEventListener("message", function(event) {

if (event.source != window)
    return;

if (event.data.type && (event.data.type == "FROM_PAGE")) {
    console.log("Content script received: " + event.data.text);
    chrome.runtime.sendMessage({
        hello: 1
    },function (response)
    {
        //Need to send response back to browser
    });
}
}, false);
  

背景的script.js

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
    alert('bg');
    var response_Text = '-1';

    if (request.hello) {
        console.log('hello received');
        sendResponse("213");
    }
});
  

浏览器页面

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

我使用 window.postMessage 发送一些内容。

是否可以获得此功能的回调值或任何可用于从网页向分机发送消息并获得响应的方法?

1 个答案:

答案 0 :(得分:2)

  

浏览器页面

将您的回调转换为String并附加详细参数

var callbackstring=callback.toString(); *

并发送

var evt = document.createEvent("CustomEvent");
evt.initCustomEvent("eventname", true, true, {callback:callbackstring});
window.dispatchEvent(evt);
  

内容脚本

从事件对象中检索回调串,如

var callbackstring=event.detail.callback;

使用 eval 功能并将字符串转换为功能

eval("var callback="+callbackstring);

现在,您可以在侦听器中轻松触发回调

callback(response);