I have a chrome extension that passes information as follows: 1. content.js analyzes the page and sends the result to background.js 2. popup.js queries the result from background.js and displays it in popup.html.
Expected behavior: each time the user clicks the popup button, he will see the analyzed data of the current tab.
Current behavior: each time the user clicks the popup button, he sees the analyzed data of the first tab that it analyzed.
I tried using chrome.tabs.query but I failed to figure it out. what is the way to go here?
Content.js (sending DOM to background)
var fromDOM = new XMLSerializer().serializeToString(document);
console.log(fromDOM);
chrome.runtime.sendMessage({method:'setTitle',title:fromDOM});
Background.js (proxies between content and popup)
var title;
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
if(message.method == 'setTitle')
title = message.title;
else if(message.method == 'getTitle')
sendResponse(title);
});
popup.js (display DOM)
chrome.runtime.sendMessage({method:'getTitle'}, function(response){
document.querySelector("p").textContent = response;
});
manifest
{
"manifest_version": 2,
"name": "B",
"version": "0.1",
"options_page": "options.html",
"background" : {
"scripts": ["background.js"]
},
"permissions": [
"storage",
"tabs"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"],
"run_at": "document_end"
}
]
}