javascript Chrome 扩展：抓取 DOM 内容进行解析
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7641099/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chrome Extension: Grab DOM content for parsing
提问by Korvin Szanto
I'm developing a Chrome extension that simply scans the DOM for phrases.
我正在开发一个 Chrome 扩展程序，它只是扫描 DOM 中的短语。
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.
我唯一需要帮助的是使用弹出窗口抓取 DOM 内容，我找不到返回当前选项卡内容的方法。
回答by Alex Churchill
Tested and works correctly:
经测试并正常工作：
put
放
"permissions": [
"tabs"
],
in your manifest.
在您的清单中。
Then, in your background.js
然后，在你的 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.
所以本质上，我们获取当前选项卡，在其上运行一些 javascript 以获取 innerHTML 并将其传回给我们。我们适当地解释回调中的响应。
Note this does very little error checking, so you might want to brush up on message passingand the tabs API.
请注意，这几乎不会进行错误检查，因此您可能需要复习消息传递和选项卡 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.getSelectednesting 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.
编辑：我已经试过了，它确实按预期工作。要轻松尝试，只需创建一个新的空扩展并为其授予“标签”权限和背景页面。然后从 chrome://extensions 检查 background.html 并转到控制台。复制下面的代码，将chrome.tabs.getSelected嵌套设置为几秒钟的超时。当您单击 Enter 执行 JS 时，请快速单击其他选项卡。等待你的超时。然后返回检查background.html。您单击的页面的 HTML 将打印到控制台。
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.onUpdatedor content scriptsto universally do something on loading/changing the DOM?
另一个编辑：一般来说，将当前选项卡 DOM 作为事件访问似乎可能是一个糟糕的模型（这可能是为什么没有很好的本地方式来做到这一点）。您是否考虑过使用chrome.tabs.onUpdated或内容脚本来普遍地对加载/更改 DOM 做一些事情？
