Menu
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); }); 
767
tabs. sendMessage( tab.id, youtPayload, function (response) { // do something here if you want } ); }); }); That's it!
The popup can contain any HTML contents that you like, and it's automatically sized to fit its contents. To add a popup to your browser action, create an HTML file with the popup's contents. Specify the HTML file in the default_popup field of browser_action in the manifest, or call the browserAction. setPopup method.
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); }); 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
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
