如何在JavaScript中獲取Chrome標簽頁源代碼

Question

我嘗試開發一個chrome擴展名，我需要能夠獲取當前標簽頁的源代碼，因此我遵循chrome示例，我有三個文件：

manifest.json：

{
    "manifest_version": 2,
    "name": "Source code getter",
    "description": "This extension is a test to get current tab source code",
    "version": "0.1",
    "browser_action": {
         "default_icon": "icon.png",
        "default_popup": "popup.html"
    }, 
    "permissions": [
        "tabs"
  ]
}

popup.html：

<!doctype html>
 <html>
    <head>
        <title>Get source popup</title>
         <style>
             body {
                min-width: 357px;
                min-height: 357px;
                overflow-x: hidden;
            }
        </style>
        <script src="popup.js"></script>
     </head>
    <body>
    </body>
</html>

和popup.js

document.addEventListener('DOMContentLoaded', function() {
    chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
        var tab = tabs[0];
        console.debug(tab.id);
        var source = document.createElement("div");
        chrome.tabs.sendMessage(tab.id, {action: "getHtml"}, function(response) {
            console.debug(response.html);
         if (response.html) {
                source.textContent = response.html;
            } else {
                source.textContent = 'I did not get the source code.';
            }
        });
        document.body.appendChild(source);
    });
});

我通過在網上搜索來構建popup.js，我必須承認我真的不知道sendMessage的工作原理以及文檔，但是我認為第二個參數要求源代碼必須返回到function參數中響應，但沒有，這是JS日志：

430 popup.js:4
> Error in event handler for (unknown): Cannot read property 'html' of undefined
> Stack trace: TypeError: Cannot read property 'html' of undefined
>    at chrome-extension://boefdmhphdcngpckofecmjnihbgphmch/popup.js:7:35
>    at disconnectListener (extensions::messaging:338:9)
>    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
>    at EventImpl.dispatchToListener (extensions::event_bindings:397:22)
>    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
>    at Event.publicClass.(anonymous function) [as dispatchToListener] (extensions::utils:93:26)
>    at EventImpl.dispatch_ (extensions::event_bindings:379:35)
>    at EventImpl.dispatch (extensions::event_bindings:403:17)
>    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
>    at Event.publicClass.(anonymous function) [as dispatch] (extensions::utils:93:26)

所以我得到了正確的選項卡，但是我沒有得到正確的響應表單sendMessage函數，有人可以向我解釋為什么？ 謝謝。

Answer 1

從清單中判斷，您沒有什么可以監聽sendMessage 。

清單中未定義內容腳本，因此頁面未加載任何內容； 彈出代碼中沒有executeScript調用，因此沒有任何內容從那里加載。

因此，沒有任何東西可以處理您的消息，並且回調會以錯誤集被調用。 您的消息{action: "getHtml"}並不具有任何神奇的含義； 您需要頁面一側的腳本來接收它並形成響應。

您需要一個內容腳本，該腳本將添加chrome.runtime.onMessage的偵聽chrome.runtime.onMessage ，該偵聽器將處理您的請求。 我們稱之為content.js 。 然后，您可以執行以下操作：

chrome.tabs.executeScript({code: "content.js"}, function() {
  if(chrome.runtime.lastError) {
    console.error(chrome.runtime.lastError.message);
    return;
  }
  chrome.tabs.sendMessage(tab.id, {action: "getHtml"}, function(response) {
    /* process response */
  });
});

適當的content.js代碼不在此問題的范圍內。 還可以查看“ 架構概述” ，它很好地介紹了內容腳本的工作方式。

如何在JavaScript中獲取Chrome標簽頁源代碼

問題描述

1 個解決方案

解決方案1
0 2014-09-14 21:13:07

如何在JavaScript中獲取Chrome標簽頁源代碼

問題描述

1 個解決方案

解決方案1 0 2014-09-14 21:13:07

解決方案1
0 2014-09-14 21:13:07