Run script when clicking extension icon - google-chrome-extension

Question

I'm trying to do an extension with this behaviour: When I click the extension button, it parses the current page and executes a function for each found item.
background.js
function downloadPage(urlpage,name){
chrome.tabs.create({
url: urlpage
}, function(tab) {
chrome.tabs.onUpdated.addListener(function func(tabId, changeInfo) {
if (tabId == tab.id && changeInfo.status == 'complete') {
chrome.tabs.onUpdated.removeListener(func);
savePage(tabId, name);
}
});
});
}
function savePage(tabId, name) {
chrome.pageCapture.saveAsMHTML({
tabId: tabId
}, function(blob) {
var url = URL.createObjectURL(blob);
// Optional: chrome.tabs.remove(tabId); // to close the tab
chrome.downloads.download({
url: url,
filename: 'prueba/test.mht'
});
});
}
popup.js
var candidatos = document.getElementsByClassName("user-name");
if(candidatos != null){
for (i = 0; i < candidatos.length; i++) {
chrome.extension.getBackgroundPage().downloadPage(candidatos[i].href, candidatos[i].text)
}
}
manifest.json
{
"manifest_version": 2,
"name": "Test",
"description": "Test",
"version": "1.0",
"author": "Pablo",
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"tabs",
"webNavigation",
"contextMenus",
"downloads",
"<all_urls>",
"pageCapture"
]
}
I can't get to run anything when I click the extension button.
Thanks in advance.

Answer 1

Updated:
I have run your code at my end, when you are saying "I can't get to run anything when I click the extension button", I guess you mean savePage function in not called. That is because in your callback for chrome.tabs.create function, you register chrome.tabs.onUpdated listener, it is too late. I recommend you just use the tab you get from the callback and do what you want.
function downloadPage(urlpage,name){
chrome.tabs.create({
url: urlpage
}, function(tab) {
savePage(tab.id, name);
});
}
It's recommended to read the Official Guide especially browser action. The basic part should be registering the browser action listener and listening to onClicked event.
chrome.browserAction.onClicked.addListener(function () {
// Do what you want when clicking the 'extension icon'
});

Answer 2

Your fundamental problem is that popup.js refers to the DOM of popup.html, which doesn’t have the class or code that you need. In order to interact with the DOM, you need a content script. The best approach for that would be to have the background page programmatically inject it. Then you can also use the callback parameters to avoid having to use message passing:
chrome.tabs.query({active:true},function(tabArray){
chrome.tabs.executeScript(tabArray[0].id,
{code:"document.getElementsByClassName('user-name');"},
allFrames);
});
// the parameter to allFrames is the result of code in each frame of the tab
function allFrames(frames) {
for ( var i = 0 ; i < frames.length ; i++ ) {
var classes = frames[i];
for ( var j = 0 ; j < classes.length ; j++ ) {
downloadPage(classes[j].href,classes[j].text);
}
}
}
#HaibaraAi’s point is that if the only purpose of the popup is to trigger an action in the background, then it’s much easier to omit the popup and simply have:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id,
{code:"document.getElementsByClassName('user-name');"},
allFrames);
});
And because tabs.create gives you a completely loaded tab, you don’t need to listen for its completion. So we can stick with #HaibaraAi’s version of that function. The completed example is therefore
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id,
{code:"document.getElementsByClassName('user-name');"},
allFrames);
});
function allFrames(frames) {
for ( var i = 0 ; i < frames.length ; i++ ) {
var classes = frames[i];
for ( var j = 0 ; j < classes.length ; j++ ) {
downloadPage(classes[j].href,classes[j].text);
}
}
}
function downloadPage(urlpage,name){
chrome.tabs.create({
url: urlpage
}, function(tab) {
savePage(tab.id, name);
});
}
With your original savePage. And you no longer need the popup. (Also, the activeTab permission is contained in the tabs permission, so you don’t need that.)