Chrome扩展程序：抓取DOM内容进行分析 [英] Chrome Extension: Grab DOM content for parsing

问题描述

我唯一需要帮助的是使用弹出窗口获取DOM内容。

我正在为我的老板开发一个Chrome扩展，它只是扫描DOM的短语。 ，我无法找到返回当前选项卡内容的方式。

解决方案

测试并正常工作：

放入

 permissions：[
tabs
]，
  

在您的清单中。

然后，在您的background.js中

  chrome.extension.onRequest.addListener（
函数（请求，发送者，sendResponse）{
 //记录内容
 console.log（request.content）; 
}）; 
 
 chrome.tabs.getSelected（null，function（tab）{
 
 //现在将脚本注入页面
 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方面普遍做些什么？

I'm developing a Chrome extension for my boss that simply scans the DOM for phrases.

The only thing I need help with is grabbing the DOM content with popup, I can't find a way to return the contents of the current tab.

解决方案

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?

这篇关于Chrome扩展程序：抓取DOM内容进行分析的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！