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

Chrome Extension: Grab DOM content for parsing

本文关键字：扩展 抓取 DOM Chrome      更新时间：2023-09-26

我正在开发一个Chrome扩展，简单地扫描DOM的短语。

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

已测试并正常运行:

把

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

本质上，我们得到当前选项卡，在它上面运行一些javascript获取innerHTML并把它传回给我们。我们在回调中适当地解释响应。

注意，这只做了很少的错误检查，所以你可能需要复习一下消息传递和选项卡API。

编辑:我已经试过了，它确实像预期的那样工作。要想自己轻松地尝试一下，只需创建一个新的空扩展，并赋予它"标签"权限和一个背景页面。然后从chrome://extensions中检查background.html，然后进入控制台。复制下面的代码，将chrome.tabs.getSelected嵌套设置为几秒钟的超时。当您单击enter以执行JS时，请快速单击其他选项卡。等待你的暂停。然后返回检查background.html。您所单击的页面的HTML将被打印到控制台。

另一个编辑:一般来说，访问当前选项卡DOM作为一个事件似乎可能是一个坏的模型(这可能是为什么没有一个伟大的原生方式来做它)。你是否考虑过使用chrome.tab . onupdated或内容脚本来加载/更改DOM?

相关文章：