运行单击扩展程序图标时的脚本

Question

我正在尝试使用此行为进行扩展：当我单击扩展按钮时，它会解析当前页面并为每个找到的项目执行一个函数。

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"

      ]
    }

单击扩展按钮时，我无法运行任何内容。

提前致谢。

Answer 1

已更新：

我有运行你的代码，当你说 "I can't get to run anything when I click the extension button" 时，我猜你的意思是 savePage 函数未被调用。那是因为在 chrome.tabs.create 函数的回调中，您注册了 chrome.tabs.onUpdated 侦听器，为时已晚。我建议您只使用从回调中获得的选项卡并执行您想要的操作。

function downloadPage(urlpage,name){
    chrome.tabs.create({
        url: urlpage
    }, function(tab) {
        savePage(tab.id, name);
    });
}

推荐阅读Official Guide especially browser action. The basic part should be registering the browser action listener and listening to onClicked活动。

chrome.browserAction.onClicked.addListener(function () {
    // Do what you want when clicking the 'extension icon'
});

Answer 2

你的根本问题是 popup.js 指的是 popup.html 的 DOM，它没有你需要的 class 或代码。为了与 DOM 交互，您需要一个内容脚本。最好的方法是让后台页面以编程方式注入它。然后你也可以使用回调参数来避免必须使用消息传递：

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 的观点是，如果弹出窗口的唯一目的是在后台触发一个动作，那么省略弹出窗口并简单地拥有：

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(tab.id,
        {code:"document.getElementsByClassName('user-name');"},
        allFrames);
});

而且因为 tabs.create 给你一个完全加载的选项卡，你不需要监听它的完成。所以我们可以坚持使用@HaibaraAi 的那个函数版本。因此，完整的示例是

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);
    });
}

用你原来的savePage。而且您不再需要弹出窗口。（此外，activeTab 权限包含在 tabs 权限中，因此您不需要它。）

运行单击扩展程序图标时的脚本

Run script when clicking extension icon

google-chrome-extension

google-chrome-devtools

已更新：

运行 单击扩展程序图标时的脚本

Run script when clicking extension icon

google-chrome-extension

google-chrome-devtools

已更新：

运行单击扩展程序图标时的脚本