Chrome 扩展中反复抓取 DOM

Question

我正在尝试自学如何编写 Chrome 扩展程序，但当我意识到我的 jQuery 出现故障时遇到了障碍，因为它从扩展程序页面本身获取信息，而不是像我预期的那样从选项卡的当前页面获取信息。

快速总结，我的示例扩展程序将每 x 秒刷新一次页面，查看内容/DOM，然后用它做一些事情。第一部分和最后一部分都很好，但从我所在的页面获取 DOM 已经证明非常困难，而且文档对我没有太大帮助。

您可以在这些链接中看到我目前拥有的代码：

Current manifest

Current js script

Current popup.html

如果我希望能够在 setInterval 调用的每个循环中获取 DOM，还需要做什么？我知道，例如，我需要一个内容脚本。但是我是否还需要在清单中指定背景页面？在我的扩展程序中，我需要在哪里调用内容脚本？在每次重新加载时让它与我当前的 js 文件通信的最简单/最好的方法是什么？我的内容脚本是否也希望我使用 jQuery？

我知道这些问题是基本的，回想起来对我来说似乎微不足道，但尝试完全独自探索这些问题确实令人头疼。提前致谢。

Answer 1

为了访问网页 DOM，您需要 programmatically inject some code 进入其中（使用 chrome.tabs.executeScript()）。

也就是说，尽管可以将 DOM 作为字符串获取，将其传递回弹出窗口，将其加载到新元素中并查找所需的内容，但这是一种非常糟糕的方法（出于各种原因） .
最好的选择（就效率和准确性而言）是在网页本身中进行处理，然后只将结果传递回弹出窗口。请注意，为了能够将代码注入网页，您必须在清单中的 permissions 属性中包含相应的 host match pattern。

我上面描述的可以这样实现：

editorMarket.js

var refresherID = 0;
var currentID = 0;

$(document).ready(function(){
    $('.start-button').click(function(){
        oldGroupedHTML = null;
        oldIndividualHTML = null;

        chrome.tabs.query({ active: true }, function(tabs) {
            if (tabs.length === 0) {
                return;
            }

            currentID = tabs[0].id;
            refresherID = setInterval(function() {
                chrome.tabs.reload(currentID, { bypassCache: true }, function() {
                    chrome.tabs.executeScript(currentID, {
                        file:      'content.js',
                        runAt:     'document_idle',
                        allFrames: false
                    }, function(results) {
                        if (chrome.runtime.lastError) {
                            alert('ERROR:\n' + chrome.runtime.lastError.message);
                            return;
                        } else if (results.length === 0) {
                            alert('ERROR: No results !');
                            return;
                        }

                        var nIndyJobs  = results[0].nIndyJobs;
                        var nGroupJobs = results[0].nGroupJobs;
                        $('.lt').text('Indy: ' + nIndyJobs + '; '
                                      + 'Grouped: ' + nGroupJobs);
                    });
                });
            }, 5000);
        });
    });

    $('.stop-button').click(function(){
        clearInterval(refresherID);
    });
});

content.js：

(function() {
    function getNumberOfIndividualJobs() {...}
    function getNumberOfGroupedJobs() {...}

    function comparator(grouped, individual) {
        var IndyJobs = getNumberOfIndividualJobs();
        var GroupJobs = getNumberOfGroupedJobs();

        nIndyJobs = IndyJobs[1];
        nGroupJobs = GroupJobs[1];
        console.log(GroupJobs);

        return {
            nIndyJobs: nIndyJobs, 
            nGroupJobs: nGroupJobs
        };
    }

    var currentGroupedHTML = $(".grouped_jobs").html();
    var currentIndividualHTML = $(".individual_jobs").html();
    var result = comparator(currentGroupedHTML, currentIndividualHTML);
    return result;
})();