chrome扩展OnMessage

use*_*935 8 background google-chrome google-chrome-extension

我是Chrome扩展程序的新手,当然我坚持每一步,但这特别难.也许这是一个愚蠢的错误,但这是我想要做的:

将简单消息从内容脚本发送到后台页面并将其作为变量处理.所以我在我的内容脚本中有这个:

$(document).ready(function() { 
    var d = document.domain;    
       chrome.extension.sendMessage({dom: d});  

 });
Run Code Online (Sandbox Code Playgroud)

在我的后台脚本中:

chrome.extension.onMessage.addListener(function(request) {
    alert(request.dom);
});
Run Code Online (Sandbox Code Playgroud)

因此,警报工作正常.但它"走向"我正在浏览的页面而不是HTML扩展,这意味着,当点击我的扩展按钮时,它将显示为在页面加载时编码到内容脚本中.

请,任何帮助将不胜感激.

Sud*_*han 16

我的演示扩展如下

文件和角色

a)manifest.json (文档)

b)myscript.js(内容脚本见文档)

c)background.js(背景HTML文件参见文档)

d)popup.html(浏览器动作弹出参见文档)

e)popup.js(背景页面中的修改值的接收者)

的manifest.json

已注册所有要显示的文件(Viz背景,弹出窗口,内容脚本)和权限

{
"name":"Communication Demo",
"description":"This demonstrates modes of communication",
"manifest_version":2,
"version":"1",
"permissions":["<all_urls>"],
"background":{
    "scripts":["background.js"]
},
"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["myscript.js"]
    }
  ],
"browser_action":{
    "default_icon":"screen.png",
    "default_popup":"popup.html"
}  
}
Run Code Online (Sandbox Code Playgroud)

myscript.js

使用sendMessage()API与后台页面进行通信

var d = document.domain;
chrome.extension.sendMessage({
    dom: d
});
Run Code Online (Sandbox Code Playgroud)

background.js

使用onMessage()onConnect()监听器为Content和popup.js添加了事件监听器

var modifiedDom;
chrome.extension.onMessage.addListener(function (request) {
    modifiedDom = request.dom + "Trivial Info Appending";
});
chrome.extension.onConnect.addListener(function (port) {
    port.onMessage.addListener(function (message) {
        if (message == "Request Modified Value") {
            port.postMessage(modifiedDom);
        }
    });
});
Run Code Online (Sandbox Code Playgroud)

popup.html

示例浏览器操作HTML页面注册popup.js以避免内联脚本

<!doctype html>
<html>

    <head>
        <script src="popup.js"></script>
    </head>

    <body></body>

</html>
Run Code Online (Sandbox Code Playgroud)

popup.js

使用Port\Long Lived Connection与后台页面进行通信以获取结果

var port = chrome.extension.connect({
    name: "Sample Communication"
});
port.postMessage("Request Modified Value");
port.onMessage.addListener(function (msg) {
    console.log("Modified Value recieved is  " + msg);
});
Run Code Online (Sandbox Code Playgroud)

希望这有帮助,如果您需要更多信息,请告诉我

  • **重要说明**,`chrome.extension`的消息传递函数已被弃用.使用`chrome.runtime`等价物. (3认同)