努力在Chrome扩展中获取DOM数据

Question

我在Stack Overflow上发现了几个相当不错的投票问题，尽管我实际上找不到工作解决方案。

我一直在试图按照这里的答案：Chrome Extension - Get DOM content, 但我仍然得到一个完全空白的控制台（尽管重新加载扩展名）！

manifest.json的：

{ 
    "manifest_version": 2, 
    "name": "Test Extension", 
    "version": "0.0", 
    "background": { 
    "persistent": false, 
    "scripts": ["background.js"] 
    }, 
    "content_scripts": [{ 
    "matches": ["https://*/*"], 
    "js": ["content.js"] 
    }], 
    "browser_action": { 
    "default_title": "Test Extension", 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 

    "permissions": ["activeTab"] 
} 

background.js：

// A function to use as callback 
function logDOM(domContent) { 
    console.log('I received the following DOM content:\n' + domContent); 
} 

// When the browser-action button is clicked... 
chrome.browserAction.onClicked.addListener(function (tab) { 
    console.log(tab.url); 
    chrome.tabs.sendMessage(tab.id, {text: 'report_back'}, logDOM); 

}); 

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); 
    } 
}); 

我做索姆错了吗？

Answer 1

删除default_popup从browser_action：
的问题是，你在你的的manifest.json定义为browser_action一个default_popup。更改browser_action到：

"browser_action": { 
    "default_title": "Test Extension", 
    "default_icon": "icon.png" 
}, 

如果定义了default_popup，那么Chrome会显示弹出式和点击事件不会发送到后台脚本。你应该看到一个弹出窗口显示你的文件没有找到。

只有注入https方案页：
既然你只注入你的内容脚本到https://网页，请确保您正在使用https方案在页面上测试。

您可能会发现通过将所有内容脚本注入到所有URL中来测试更容易。

"content_scripts": [{ 
    "matches": ["<all_urls>"], 
    "js": ["content.js"] 
}], 

（使用<all_urls>即使）它也没有注入到chrome方案（例如chrome://extensions/）网页：您可以通过在你的的manifest.json改变content_script键这样做。因此，您的扩展程序无法在这些页面上工作。
您还需要确保你重新加载页面，打开一个新的标签，或加载后导航到一个新的页面，或重装，扩展：

您必须加载扩展后加载内容页。您的内容脚本不会被注入到已经加载的页面中。

输出是在控制台中为您的背景页：
此外，您将需要看console for your background page。您可能需要查看多个控制台，具体取决于您要拨打的上下文/范围console.log()。本节第一句连接的答案描述了如何查看它们。

的manifest.json所有提到的变化：

{ 
    "manifest_version": 2, 
    "name": "Test Extension", 
    "version": "0.0", 
    "background": { 
    "persistent": false, 
    "scripts": ["background.js"] 
    }, 
    "content_scripts": [{ 
    "matches": ["<all_urls>"], 
    "js": ["content.js"] 
    }], 
    "browser_action": { 
    "default_title": "Test Extension", 
    "default_icon": "icon.png" 
    }, 

    "permissions": ["activeTab"] 
}