How to communicate between popup.js and background.js in chrome extension?
Question
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);
});
5 answers
solution1
129 ACCPTED 2012-11-25 07:47:05
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);
});
solution2
22 2017-04-16 19:36:17
This can be used in 2 way communication. Same code goes in both the files.
popup.js & background.js
//for sending a message
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
});
//for listening any message which comes from runtime
chrome.runtime.onMessage.addListener(messageReceived);
function messageReceived(msg) {
// Do your work here
}
Ref: https://developer.chrome.com/extensions/runtime#method-sendMessage
solution3
4 2017-11-29 05:23:37
Full Duplex Communication
Call background.js methods asynchronously from popup.js and get response back :
Popup.js:
// wrapper method
function getContent() {
callEventPageMethod('getContent', 'some parameter', function (response) {
doSomethingWith(response);
});
}
//generic method
function callEventPageMethod(method, data, callback) {
chrome.runtime.sendMessage({ method: method, data: data }, function (response) {
if(typeof callback === "function") callback(response);
});
}
Background.js/eventPage.js:
chrome.runtime.onMessage.addListener(callback);
function callback(obj, sender, sendResponse) {
if (obj) {
if (obj.method == 'getContent') {
getContent(sendResponse);
} else if (obj.method == 'othermethod') {
}
}
return true; // remove this line to make the call sync!
}
//some async method
function getContent(sendResponse) {
chrome.storage.local.get(["mydata"], function (obj) {
var mydata = $.trim(obj["mydata"]);
sendResponse(mydata);
});
}
If need to call popup.js methods from background.js then swap the above code in files.
Method 2: You can load the reference of background page in a variable and access all methods.
var bgPage = chrome.extension.getBackgroundPage();
var response = bgPage.someMethodInBGPage();
solution4
0 2022-07-14 07:31:12
What I understand from answers is: The problem is that if bg.js is trying to communicate with Popup.js, if it is not active it will return error that "no suitable endpoint".
Therefore one can do either of the following.
- STORAGE - Save the shared message temporarily using chrome Storage
- DOM MANIPULATION - Save the message permanently in DOM itself (if wanted to manipulate DOM) as end result.
- LONG LIVE CONNECTION - Create a long term connection with popup. (using chrome onConnect method)
- FULL DUPLEX - Use handshake method by double function call from each side and using response callback to pass the answer.
solution5
0 2022-09-28 14:30:19
Manifest Version 3
Example for sending message from popup.js to background.js:
manifest.json:
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "./popup.html"
},
"background": {
"service_worker": "./background.js"
}
}
popup.html:
<html>
<head>
<title>Title</title>
</head>
<body>
<button id="btn">Trigger BG</button>
<script src="popup.js"></script>
</body>
</html>
popup.js:
document.getElementById('btn').addEventListener('click', () => {
// how we send data:
chrome.runtime.sendMessage({ greeting: 'hello' });
});
background.js:
// how we receive data:
chrome.runtime.onMessage.addListener((msg, sender, res) => {
console.log(msg);
});
You can swap the content of popup and background js files to send data from background.js to popup.js
Docs: Message passing ,chrome.runtime
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.