代码之家 › 专栏 › 技术社区 › Legends

Chrome扩展:如何从内容发送消息。js弹出窗口。js-页面操作

google-chrome-extension google-chrome

Legends · 技术社区 · 8 年前

镀铬v64。

我想从内容发送消息。js弹出窗口。js。

我设法从弹出窗口发送了一条消息。js到内容。js。但如何以相反的方式进行呢?我还下载了一个扩展示例,它也不起作用。

我必须添加特殊权限吗? 我尝试了一次性消息和长时间运行的消息通道。

权限:

 "permissions": [
    "background",
    "tabs",
    "activeTab",
    "storage",
    "webRequest",

所容纳之物js公司

chrome.runtime.sendMessage({
    data: "mauzen"
}, function (response) {
   return true;
});
debugger;
var port = chrome.runtime.connect({
    name: "knockknock"
});
port.postMessage({
    joke: "Knock knock"
});
port.onMessage.addListener(function (msg) {
    debugger;
    if (msg.question == "Who's there?")
        port.postMessage({
            answer: "Madame"
        });
    else if (msg.question == "Madame who?")
        port.postMessage({
            answer: "Madame... Bovary"
        });
});

出身背景js公司

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    sendResponse({
        data: "background"
    });
    if (request.data === "success") {
        alert("success");
    } else {
        //alert(request.data);
    }
});

console.assert(port.name == "knockknock");
port.onMessage.addListener(function (msg) {
    if (msg.joke == "Knock knock")
        port.postMessage({
            question: "Who's there?"
        });
    else if (msg.answer == "Madame")
        port.postMessage({
            question: "Madame who?"
        });
    else {
        port.postMessage({
            question: "background"
        });
    }
});

弹出窗口。js公司

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
    sendResponse({
        data: "popup"
    });
    if (message.data === "success") {
        alert("success");
    } else {
        // alert(message.data);
    }
});

chrome.runtime.onConnect.addListener(function (port) {
    console.assert(port.name == "knockknock");
    port.onMessage.addListener(function (msg) {
        if (msg.joke == "Knock knock")
            port.postMessage({
                question: "Who's there?"
            });
        else if (msg.answer == "Madame")
            port.postMessage({
                question: "Madame who?"
            });
        else {
            port.postMessage({
                question: "popup"
            });
        }
    });
});

2 回复 | 直到 7 年前

Legends 8 年前

这是我发现的,我进行了一些测试。

发送消息 从内容。js公司 在弹出窗口中编写脚本,您可以执行以下操作:

 chrome.runtime.sendMessage({
                    data: "Hello popup, how are you"
                }, function (response) {
                    console.dir(response);
                });

和 在弹出窗口中。js公司 :

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
    sendResponse({
        data: "I am fine, thank you. How is life in the background?"
    }); 
});

从内容发送的消息。js弹出窗口。只有当弹出窗口处于活动状态(=打开)时,才会收到js

,即单击工具栏中的page\u action(browser\u action)图标,弹出窗口出现,然后打开/激活。只有这样,它才能发送和接收消息!

你可以这样测试

将以下脚本放入 所容纳之物js公司:

 var timer = 0;
  var si = setInterval(() => {
            try {
               chrome.runtime.sendMessage({
                    data: "Hello popup, how are you"
                }, function (response) {
                    console.dir(response);
                });
                timer++;
                if (timer === 5) {
                    clearInterval(si);
                }
            } catch (error) {
                // debugger;
                console.log(error);
            }
        }, 2000);

在**弹出窗口中。js公司 :**

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
    alert("I am popup!");
    sendResponse({
        data: "I am fine, thank you. How is life in the background?"
    }); 
});

只要 setInterval 执行您可以单击扩展图标,打开弹出窗口,然后它将显示警报。

holmberd 8 年前

从您的代码来看,您似乎正在将一条消息从内容脚本发送到后台和弹出脚本,与您所描述的相反。

从扩展到内容脚本发送消息需要使用 chrome.tabs.sendMessage 看见 https://developer.chrome.com/apps/messaging