Chrome扩展程序 – 获取DOM内容
我试图从popup窗口访问activeTab DOM内容。 这是我的清单：
{ "manifest_version": 2, "name": "Test", "description": "Test script", "version": "0.1", "permissions": [ "activeTab", "https://api.domain.com/" ], "background": { "scripts": ["background.js"], "persistent": false }, "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", "browser_action": { "default_icon": "icon.png", "default_title": "Chrome Extension test", "default_popup": "index.html" } } 我真的很困惑，不pipe是后台脚本（带有persistence：false的事件页面）还是content_scripts都是要走的路。 我已经阅读了所有文档和其他SOpost，对我来说这仍然没有意义。
有人可以解释为什么我可以使用一个在另一个。
这是我一直在尝试的background.js：
chrome.extension.onMessage.addListener( function(request, sender, sendResponse) { // LOG THE CONTENTS HERE console.log(request.content); } );
我只是从popup式控制台执行此操作：
chrome.tabs.getSelected(null, function(tab) { chrome.tabs.sendMessage(tab.id, { }, function(response) { console.log(response); }); });
我越来越：
Port: Could not establish connection. Receiving end does not exist.
更新：
{ "manifest_version": 2, "name": "test", "description": "test", "version": "0.1", "permissions": [ "tabs", "activeTab", "https://api.domain.com/" ], "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"] } ], "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", "browser_action": { "default_icon": "icon.png", "default_title": "Test", "default_popup": "index.html" } }
content.js
chrome.extension.onMessage.addListener( function(request, sender, sendResponse) { if (request.text && (request.text == "getDOM")) { sendResponse({ dom: document.body.innertHTML }); } } );
popup.html
chrome.tabs.getSelected(null, function(tab) { chrome.tabs.sendMessage(tab.id, { action: "getDOM" }, function(response) { console.log(response); }); });
当我运行它时，我仍然得到相同的错误：
undefined Port: Could not establish connection. Receiving end does not exist. lastError:30 undefined
术语“背景页面”，“popup”，“内容脚本”仍然令你困惑; 我强烈build议您更深入地了解Google Chrome浏览器扩展程序文档 。
关于你的问题，如果内容脚本或后台页面是要走的路：
内容脚本 ：当然
内容脚本是访问网页的DOM的扩展的唯一组件。
背景页面/popup ：也许（可能是最大的两个）
您可能需要让内容脚本将DOM内容传递到后台页面或popup窗口以供进一步处理。
让我再说一遍，我强烈build议对可用文档进行更仔细的研究！
也就是说，下面是一个扩展示例，它检索StackOverflow页面上的DOM内容，并将其发送到后台页面，然后将其打印在控制台中：
background.js：
// Regex-pattern to check URLs against. // It matches URLs like: http[s]://[...]stackoverflow.com[...] var urlRegex = /^https?:\/\/(?:[^./?#]+\.)?stackoverflow\.com/; // A function to use as callback function doStuffWithDom(domContent) { console.log('I received the following DOM content:\n' + domContent); } // When the browser-action button is clicked... chrome.browserAction.onClicked.addListener(function (tab) { // ...check the URL of the active tab against our pattern and... if (urlRegex.test(tab.url)) { // ...if it matches, send a message specifying a callback too chrome.tabs.sendMessage(tab.id, {text: 'report_back'}, doStuffWithDom); } });
content.js：
// Listen for messages chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { // If the received message has the expected format... if (msg.text === 'report_back') { // Call the specified callback, passing // the web-page's DOM content as argument sendResponse(document.all[0].outerHTML); } });
manifest.json的：
{ "manifest_version": 2, "name": "Test Extension", "version": "0.0", ... "background": { "persistent": false, "scripts": ["background.js"] }, "content_scripts": [{ "matches": ["*://*.stackoverflow.com/*"], "js": ["content.js"] }], "browser_action": { "default_title": "Test Extension" }, "permissions": ["activeTab"] }
您不必使用消息传递来获取或修改DOM。 我用chrome.tabs.executeScript代替。 在我的示例中，我只使用activeTab权限，因此脚本仅在活动选项卡上执行。
manifest.json的一部分
"browser_action": { "default_title": "Test", "default_popup": "index.html" }, "permissions": [ "activeTab", "<all_urls>" ]
的index.html
<!DOCTYPE html> <html> <head></head> <body> <button id="test">TEST!</button> <script src="test.js"></script> </body> </html>
test.js
document.getElementById("test").addEventListener('click', () => { console.log("Popup DOM fully loaded and parsed"); function modifyDOM() { //You can play with your DOM here or check URL against your regex console.log('Tab script:'); console.log(document.body); return document.body.innerHTML; } //We have permission to access the activeTab, so we can call chrome.tabs.executeScript: chrome.tabs.executeScript({ code: '(' + modifyDOM + ')();' //argument here is a string but function.toString() returns function's code }, (results) => { //Here we have just the innerHTML and not DOM structure console.log('Popup script:') console.log(results[0]); }); });
