我正在尝试从弹出窗口访问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" } }
我真的很困惑,背景脚本(持久性事件页:false)还是content_scripts是可行的方法。我已经阅读了所有文档和其他SO帖子,但对我来说仍然没有意义。
有人可以解释为什么我可能会用另一个。
这是我一直在尝试的background.js:
chrome.extension.onMessage.addListener( function(request, sender, sendResponse) { // LOG THE CONTENTS HERE console.log(request.content); } );
我只是从弹出控制台执行此操作:
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
术语“背景页面”,“弹出窗口”,“内容脚本”仍然让您感到困惑;我强烈建议您更深入地了解GoogleChrome扩展程序文档 。
关于您的问题,内容脚本或后台页面是不是要走的路:
内容脚本 :绝对地, 内容脚本是扩展程序中有权访问网页DOM的唯一组件。
后台页面/弹出窗口 :也许(可能最多两个)之一,您可能需要让内容脚本将DOM内容传递给后台页面或弹出窗口以进行进一步处理。
让我重复一遍,我强烈建议您对可用文档进行更仔细的研究!就是说,这里是一个示例扩展,它检索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"] }