在Chrome扩展中反复捕获DOM

Question

我试图自己教导自己如何编写Chrome扩展并遇到一个障碍，当我意识到我的jQuery因为它从扩展页面本身获取信息而不是该页面的当前页面像我预料的那样。

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

你可以看到，我到目前为止在这些链接的代码：

Current manifest

Current js script

Current popup.html

如果我想有抢在每个DOM的能力我的setInterval调用的周期，还有什么需要做的？我知道，例如，我需要有一个内容脚本。但是我是否也需要在清单中指定一个背景页面？我需要在我的扩展中调用内容脚本？在每次重新加载时，使它与我当前的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; 
})();