Comment communiquer entre popup.js et le fond.JS dans chrome extension?
le message de popup.js est posté deux fois en arrière-plan.js, mais je n'obtiens absolument rien de l'arrière-plan.js.
arrière-plan.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);
});
3 réponses
Méthode - Un :
À L'Aide De Connexions Longue Durée vous pouvez communiquer de fond.js pour les popup.js de la page d'extension pour toutes les activités( Ici, j'ai inclus popup.html et only initiated exemple de communication de popup.js comme un de l'échantillon)
arrière-plan.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);
});
Méthode B :
Manipulation directe de DOM* si votre résultat final est une modification de DOM, vous pouvez y parvenir avec ce
popup.html
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<div id="x" value="m">Some thing</div>
</body>
</html>
arrière-plan.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";
}
Méthode - C :
À L'Aide De Connexions Longue Durée vous pouvez communiquer de fond.js pour les popup.js de la page d'extension pour toutes les activités( Ici je n'ai pas inclus popup.html et initié une communication d'échantillon à partir de l'arrière-plan.js;
arrière-plan.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);
});
});
j'ai changé votre code et je l'ai fait tourner après avoir éliminé certaines choses et en avoir fait une version simple. Ajouter votre code pour les requêtes AJAX et DOM HTML sur ce squelette( assurez-vous d'ajouter <script> balise dans la section de la tête et de mettre chrome.extension.onConnect.addListener de (xhr.readyState == 4) code;)
popup.html
<html >
<head>
<script src="popup.js"></script>
</head>
<body></body>
</html>
manifeste.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"
]
}
arrière-plan.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);
});
ceci peut être utilisé dans la communication bidirectionnelle. Même code va dans les deux fichiers.
popup.js & arrière-plan.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
Communication Duplex Complète
Appel background.js méthodes asynchrones à partir de popup.js et obtenir réponse:
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);
});
}
arrière-plan.js/page.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);
});
}
Si besoin d'appeler popup.js méthodes de arrière-plan.js puis échanger le code ci-dessus dans des fichiers.
Méthode 2: Vous pouvez charger la référence de la page d'arrière-plan dans une variable et accéder à toutes les méthodes.
var bgPage = chrome.extension.getBackgroundPage();
var response = bgPage.someMethodInBGPage();