努力在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"] 
}