Chrome扩展程序:抓取DOM内容进行解析

Question

我正在为我的老板开发一个Chrome扩展程序,它只是扫描DOM中的短语.

我唯一需要帮助的是使用弹出窗口抓取DOM内容,我找不到返回当前选项卡内容的方法.

Answer 1

测试并正常工作:

放

"permissions": [
    "tabs"
  ],

在你的清单中.

然后,在你的background.js中

chrome.extension.onRequest.addListener(
  function(request, sender, sendResponse) {
    // LOG THE CONTENTS HERE
    console.log(request.content);
  });

chrome.tabs.getSelected(null, function(tab) {

  // Now inject a script onto the page
  chrome.tabs.executeScript(tab.id, {
       code: "chrome.extension.sendRequest({content: document.body.innerHTML}, function(response) { console.log('success'); });"
     }, function() { console.log('done'); });

});

基本上,我们获取当前选项卡,在其上运行一些获取innerHTML的javascript并将其传递给我们.我们在适当的时候解释回调中的响应.

请注意,这会进行非常少的错误检查,因此您可能希望了解消息传递和选项卡API.

编辑:我已经尝试过了,它确实按预期工作.要轻松自己尝试,只需创建一个新的空扩展并为其提供"标签"权限和背景页面.然后从chrome:// extensions中检查background.html并转到控制台.复制下面的代码,将chrome.tabs.getSelected嵌套设置为几秒钟的超时.单击"输入"以执行JS时,快速单击其他选项卡.等待你的超时.然后回去检查background.html.您单击的页面的HTML将打印到控制台.

另一个编辑:一般来说,将当前标签DOM作为事件访问似乎可能是一个糟糕的模型(这可能是为什么没有一个很好的本地方式来做它).您是否考虑过使用chrome.tabs.onUpdated或内容脚本来普遍加载/更改DOM？