javascript - Chrome 扩展 : Grab DOM content for parsing

Question

我正在开发一个 Chrome 扩展程序，它只扫描 DOM 中的短语。

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

Answer 1

测试并正常工作:

放

"permissions": [
    "tabs"
  ],

在您的 list 中。

然后，在你的 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。我们会酌情解释回调中的响应。

请注意，这几乎不会进行错误检查，因此您可能需要复习一下 message passing和 tabs API .

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

另一个编辑:一般来说，将当前选项卡 DOM 作为事件访问似乎是一个糟糕的模型(这可能是为什么没有很好的 native 方法来做到这一点)。您是否考虑过使用 chrome.tabs.onUpdated或 content scripts在加载/更改 DOM 时普遍执行某些操作？