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

发布于 2024-12-07 18:03:26 字数 94 浏览 0 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

羁〃客ぐ 2024-12-14 18:03:26

已测试且工作正常：

放入

"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 嵌套设置为几秒的超时。当你点击回车执行JS时，快速点击其他选项卡。等待超时。然后返回检查background.html。您单击的页面的 HTML 将打印到控制台。

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

Tested and works correctly:

put

"permissions": [
    "tabs"
  ],

in your manifest.

Then, in your 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'); });

});

So essentially, we get the current tab, run some javascript on it that gets the innerHTML and passes it back to us. We interpret the response in a callback as appropriate.

Note this does very little error checking, so you might want to brush up on message passing and the tabs API.

Edit: I've tried this out and it does work as expected. To try it yourself easily, just create a new empty extension and give it the "tabs" permission and a background page. Then go inspect background.html from chrome://extensions and go to the console. Copy in the code below, setting the chrome.tabs.getSelected nesting on a timeout of a few seconds. When you click enter to execute the JS, quickly click to some other tab. Wait for your timeout. Then go back to inspecting background.html. The HTML of the page you clicked to will have printed to the console.

Another Edit: In general, accessing the current tab DOM as an event seems like it might be a bad model (which is probably why there isn't a great native way to do it). Have you considered either using chrome.tabs.onUpdated or content scripts to universally do something on loading/changing the DOM?

回复收藏 0 原文

~没有更多了~