在Chrome擴展程序中使用另一個網站的innerHTML創建變量

Question

我正在嘗試從Chrome擴展程序中的Netflix電影頁面使用<p class="synopsis">...</p>的innerHTML創建javascript alert() 。

這是我的background.js

window.onload = function() {

chrome.browserAction.onClicked.addListener(function(tab) {

    var synopsis = document.getElementsByClassName("synopsis").innerhtml;
    alert(synopsis);
});

}

這是我的manifest.json：

{
    "name": "Get Synopsis",
    "version": "1.0.0",
    "description": "Get synopsis",
    "manifest_version": 2,

    "browser_action": {
        "default_icon": "icon.png"
    },

    "permissions":[ "tabs", "*://www.netflix.com/*" ],
    "background": {
        "scripts": ["background.js"]
    }
}

誰能指出我做錯了什么？ 我似乎找不到錯誤。

Answer 1

我可能是錯的，但是我相信getElementsByClassName返回一個數組或至少某種元素列表，因此innerHTML將不可用。 另外，我很確定它是innerHTML （不是innerhtml ）。 這兩個錯誤都應該在控制台中顯示。

編輯：因為它是一個數組，所以您需要首先選擇要使用的數組元素， 然后使用innerHTML 。 因此，例如，如果您想要具有指定類的第一個元素，則可以執行...getElementsByClassName('foo')[0].innerHTML 。

Answer 2

document.getElementsByClassName()返回數組，因此您必須使用索引器訪問元素，如下所示：

document.addEventListener("DOMContentLoaded", function() {

chrome.browserAction.onClicked.addListener(function(tab) {

    var synopsis = document.getElementsByClassName("synopsis")[0].innerHTML;
    alert(synopsis);
});

});

編輯：對事件的更正。

Answer 3

現有的答案指向代碼中的實際錯誤，但真正的主要問題是您應該查看有關chrome擴展的體系結構的文檔。

特別是，文檔並不意味着背景頁面上活動選項卡的文檔。

取而代之的是，您可以使用內容腳本，並將消息從彈出代碼（不是背景）發送到活動選項卡，以請求提要。

也可能有一種方法可以直接從后台獲取活動選項卡html，但是我搜索了所有權限，除了使用內容腳本之外，沒有看到任何其他內容。 https://developer.chrome.com/extensions/declare_permissions