如何在Chrome扩展中的popup.js和background.js之间进行通信？ [英] How to communicate between popup.js and background.js in chrome extension?

问题描述

来自popup.js的消息被发布两次到background.js，但我从background.js中完全没有收到任何消息。

background.js

 函数登录名（用户名，密码）{ 
 
 console.log（username）; 
 var xhr = new XMLHttpRequest（）; 
 
 xhr.open（POST，http：// localhost：3000 / login /，true）; 
 xhr.setRequestHeader（'Content-type'，'application / json; charset = utf-8'）; 
 data = {username：username，password：password}; 
 console.log（JSON.stringify（data））; 
 xhr.send（JSON.stringify（data））; 
 xhr.onreadystatechange = function（）{
 if（xhr.readyState == 4）{
 // JSON.parse不会评估攻击者的脚本。 
 var resp = JSON.parse（xhr.responseText）; 
 console.log（resp）; 
 var lStorage = localStorage; 
 localStorage.setItem（username，resp [username]）; 
 localStorage.setItem（apiKey，resp [apiKey]）; 
 localStorage.setItem（password，resp [password]）; 
 console.log（localStorage.getItem（username））; 
 
 
 
} 
}; 
 
 
 
 
 $ b chrome.extension.onRequest.addListener（
函数（request，sender，sendResponse）{
 console.log（hello）; 
 if（request.msg ==login）{
 //alert（request.password）; 
 login（request.username，request。密码）;} 
} 
）; 
 
 chrome.extension.onConnect.addListener（function（port）{
 console.log（Connected .....）; 
 port.onMessage.addListener（function （msg）{
 console.log（message recieved+ msg）; 
 port.postMessage（Hi Popup.js）; 
}）; 
}）; 
  

popup.js：

  function login（）{
 alert（document.login.username.value）; 
 chrome.extension.sendRequest（{msg：login，username：document.login.username.value，password：document.login.password.value}）; 
 document.getElementById（'openBackgroundWindow'）。visbility =hidden; 
 
 
 $ b $（document）.ready（function（）{
 
 checkUserAuth（）; 
 console.log（Inside ）; 
 $（＃openBackgroundWindow）。click（login）; 
 
}）; 
 
 
函数checkUserAuth（）{
 console.log（localStorage.getItem（apiKey））; 
 if（localStorage.getItem（apiKey）！= null）
 {
 $（＃openBackgroundWindow）。visbility =hidden; 
} 
} 
 
 
 var port = chrome.extension.connect（{name：Sample Communication}）; 
 port.postMessage（Hi BackGround）; 
 port.onMessage.addListener（function（msg）{
 console.log（message received+ msg）; 
}）; 
  

解决方案

/ em> 使用长连接你可以从background.js到任何活动的扩展页面的popup.js进行通信（这里我包含了popup.html和只发起来自popup.js的示例通信作为样本）

background.js

  chrome.extension.onConnect.addListener（function（port）{
 console.log Connected .....）; 
 port.onMessage.addListener（function（msg）{
 console.log（message received+ msg）; 
 port.postMessage（嗨Popup.js）; 
}）; 
}）
  

popup.js

  var port = chrome.extension.connect（{ 
名称：示例通讯
}）; 
 port.postMessage（Hi BackGround）; 
 port.onMessage.addListener（function（msg）{
 console.log（message received+ msg）; 
}）; 
  

方法 - B： >直接操作DOM *如果你的最终结果是DOM的修改，你可以用这个

popup.html

 < html> 
< head> 
< script src =popup.js>< / script> 
< / head> 
< body> 
< div id =xvalue =m>有些东西< / div> 
< / body> 
< / html> 
  

background.js

  var views = chrome.extension.getViews（{
 type：popup
}）; 
 for（var i = 0; i< views.length; i ++）{
 views [i] .document.getElementById（'x'）。innerHTML =My Custom Value; 
} 
  

方法 - C： 你可以从background.js到任何活动的扩展页面的popup.js进行通信（这里我没有包括popup.html和从background.js发起的示例沟通;

background.js

  chrome.browserAction.onClicked.addListener（function（tab）{
 
 var port = chrome.extension.connect（{ 
 name：Sample Communication
））; 
 port.postMessage（Hi BackGround）; 
 port.onMessage.addListener（function（msg）{
 console.log（message received+ msg）; 
}）; 
 
}）; 
  

我已经更改了代码，并在删除了一些内容并使其成为简单版本后运行。为此AJAX请求和HTML DOM添加代码确定你添加了<脚本> 标签放在头部分，并将 chrome.extension.onConnect.addListener 放到之外（xhr.readyState == 4 ） code;）

popup.html

 < html> 
< head> 
< script src =popup.js>< / script> 
< / head> 
< body>< / body> 
< / html> 
  

manifest.json

  {
name：Demo，
version：1.0，
 manifest_version：2，
description：这是一个演示，
browser_action：{
default_popup：popup.html
}，
background：{
scripts：[background.js] 
}，
permissions：[< all_urls>，
storage ，
标签
] 
} 
  

background.js

  chrome.extension.onConnect.addListener（function（port ）{
 console.log（Connected .....）; 
 port.onMessage.addListener（function（msg）{
 console.log（message received+ msg） ; 
 port.postMessage（Hi Popup.js）; 
}）; 
}）; 
  

popup.js

  var port = chrome.extension.connect（{
 name：Sample Communication
}）; 
 port.postMessage（Hi BackGround）; 
 port.onMessage.addListener（function（msg）{
 console.log（message received+ msg）; 
}）; 
  

The message from popup.js is being posted twice to background.js, but I get absolutely nothing from background.js.

background.js

function login(username,password){

    console.log(username);
var xhr = new XMLHttpRequest();

xhr.open("POST", "http://localhost:3000/login/", true);
xhr.setRequestHeader('Content-type','application/json; charset=utf-8');
data = {"username":username,"password":password};
console.log(JSON.stringify(data));
xhr.send(JSON.stringify(data));
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // JSON.parse does not evaluate the attacker's scripts.
    var resp = JSON.parse(xhr.responseText);
    console.log(resp);
    var lStorage = localStorage;
    localStorage.setItem("username",resp["username"]);
    localStorage.setItem("apiKey",resp["apiKey"]);
    localStorage.setItem("password",resp["password"]);
    console.log(localStorage.getItem("username"));



  }
};


}


chrome.extension.onRequest.addListener(
    function(request, sender, sendResponse){
        console.log("hello");
        if(request.msg == "login") {
            //alert(request.password);
            login(request.username,request.password);}
    }
);

  chrome.extension.onConnect.addListener(function(port) {
  console.log("Connected .....");
  port.onMessage.addListener(function(msg) {
        console.log("message recieved "+ msg);
        port.postMessage("Hi Popup.js");
  });
});

popup.js:

function login(){
alert(document.login.username.value);
chrome.extension.sendRequest({ msg: "login",username:document.login.username.value,password:document.login.password.value});
document.getElementById('openBackgroundWindow').visbility = "hidden";

}

$(document).ready(function (){

checkUserAuth();
console.log("Inside");
$("#openBackgroundWindow").click(login);

});


function checkUserAuth(){
console.log(localStorage.getItem("apiKey"));
if(localStorage.getItem("apiKey") != null)
    {
        $("#openBackgroundWindow").visbility ="hidden";
    }
}


var port = chrome.extension.connect({name: "Sample Communication"});
port.postMessage("Hi BackGround");
port.onMessage.addListener(function(msg) {
        console.log("message recieved"+ msg);
});

解决方案

Method - A :
Using Long Lived Connections you can communicate from background.js to popup.js of extension page for any activities( Here i have included popup.html and only initiated sample communication from popup.js as a sample)

background.js

 chrome.extension.onConnect.addListener(function(port) {
      console.log("Connected .....");
      port.onMessage.addListener(function(msg) {
           console.log("message recieved" + msg);
           port.postMessage("Hi Popup.js");
      });
 })

popup.js

 var port = chrome.extension.connect({
      name: "Sample Communication"
 });
 port.postMessage("Hi BackGround");
 port.onMessage.addListener(function(msg) {
      console.log("message recieved" + msg);
 });

Method - B :
Direct Manipulation of DOM* if your end result is modification of DOM, you can achieve with this

popup.html

<html>
    <head>
        <script src="popup.js"></script>
    </head>
    <body>
        <div id="x" value="m">Some thing</div>
    </body>
</html>

background.js

var views = chrome.extension.getViews({
    type: "popup"
});
for (var i = 0; i < views.length; i++) {
    views[i].document.getElementById('x').innerHTML = "My Custom Value";
}

Method - C :

Using Long Lived Connections you can communicate from background.js to popup.js of extension page for any activities( Here i have not included popup.html and initiated sample communication from background.js;

background.js

chrome.browserAction.onClicked.addListener(function(tab) {

    var port = chrome.extension.connect({
        name: "Sample Communication"
    });
    port.postMessage("Hi BackGround");
    port.onMessage.addListener(function(msg) {
        console.log("message recieved" + msg);
    });

});

I have changed your code and made it running after eliminating some stuff and making it a simple version. Add your code for AJAX requests and HTML DOM on this skeleton( Make sure you add <script> tag in head section and put chrome.extension.onConnect.addListener out of (xhr.readyState == 4) code;)

popup.html

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

manifest.json

{
    "name": "Demo",
    "version": "1.0",
    "manifest_version": 2,
    "description": "This is a demo",
    "browser_action": {
        "default_popup": "popup.html"
    },
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": ["<all_urls>",
        "storage",
        "tabs"
    ]
}

background.js

chrome.extension.onConnect.addListener(function(port) {
    console.log("Connected .....");
    port.onMessage.addListener(function(msg) {
        console.log("message recieved " + msg);
        port.postMessage("Hi Popup.js");
    });
});

popup.js

var port = chrome.extension.connect({
    name: "Sample Communication"
});
port.postMessage("Hi BackGround");
port.onMessage.addListener(function(msg) {
    console.log("message recieved" + msg);
});

这篇关于如何在Chrome扩展中的popup.js和background.js之间进行通信？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！