如何在 chrome 擴展中從 background.js 引用 popup.html DOM？

Question

我試圖在彈出窗口關閉時保存彈出窗口 html 的副本。 然后在再次觸發彈出窗口時重新加載它。 background.js 偵聽與 popup.js 斷開連接的端口。 但是當我嘗試獲取 popup.html 時，我認為我正在獲取 background.html（即使我從未設置過）。

背景.js

chrome.runtime.onConnect.addListener(function (externalPort) {
    externalPort.onDisconnect.addListener(function () {
        let page = document.getElementsByTagName('html')[0].innerHTML;
        console.log(page);
        chrome.storage.local.set({"page": page});
    })
});

記錄了什么

<head></head><body>
<script src="jquery-3.3.1.min.js"></script>
<script src="popup.js"></script>
<script src="background.js"></script>
</body>

當我從 popup.js 中獲取 innerHTML 時，我得到了正確的 html，但我不知道如何從 background.js 中正確引用它。

編輯：popup.html

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Treasure Roller</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    <script src="jquery-3.3.1.min.js"></script>
    <script src="popup.js"></script>
</head>

Answer 1

您可能遇到的第一個挑戰是將后台腳本加載到彈出窗口中。 即使您的后台腳本已在清單文件中聲明，您也可能會遇到一些問題； 因為 chrome 會將其視為popup.html的一部分。

這意味着：

您的popup.js和background.js （在彈出窗口中加載）之間沒有進行通信。
可能會發生錯誤，阻止您從彈出上下文中運行更多的 javascript。 這是因為 background.js 在正確使用時可以訪問比彈出窗口更多的chrome APIs 。 如果在彈出上下文中使用並調用這些 API，將拋出異常。 當異常被拋出但未被捕獲時，腳本將停止，防止您執行任何更多涉及 js 的操作。 Background.js 不應加載到 popup.html 中，除非您有一個不是背景頁面的 background.js 文件。

您可以通過右鍵單擊彈出頁面並單擊“檢查”來確定是否屬於這種情況。 轉到控制台選項卡並閱讀可能發生的任何錯誤。 如果沒有發生錯誤，我仍然建議您從 popup.html 中刪除 background.js 腳本。

順便說一句，后台腳本不需要加載到任何 html 頁面中。 它會在瀏覽器啟動時自動運行，甚至在用戶輸入網址之前。

如果以上都不適合你，

錯誤通常具有錯誤發生位置的堆棧跟蹤。 單擊任何顯示chrome://extensions...的內容。 它應該將您帶到您的代碼中遇到問題的確切位置。

如果這對您沒有幫助，請測試一下：

彈窗.js

chrome.runtime.sendMessage({saveState: true, state: {---"state data goes in here---"}});

我相信您可以通過這種方式發送整個 html。

背景.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
    if(request.saveState){
        chrome.storage.local.set(request.state, function(){ sendResponse(true)});
    }
});

簡而言之，每次對彈出式 UI 進行更改時，

（例如，用戶單擊了待辦事項列表擴展中某個項目的編輯文本，它變成了輸入文本框），

您將{view: "edit", item: "no 2", addButton: "hidden"}作為狀態對象發送到后台，然后后台將其保存到存儲中。

當彈出窗口打開時，您只需要向存儲請求狀態並根據數據呈現您的 UI。

chrome.storage.local.get('state', function(result){
    if(result.state){
        //This is a function you will write
        render(result.state); 
    }
    else{
        //do nothing
    }
});

請注意，您還使用chrome.runtime.connect ，它是為更長期的連接保留的。 這沒有任何問題，但是如果您只需要在beforeunload保存狀態，那么現在發送一次消息可能更容易調試。

Answer 2

如果您想在關閉時處理彈出窗口的 HTML，您可以嘗試如下操作：

在彈出頁面中創建一個window.onbeforeunload監聽器，在事件監聽器中讀取 html。 您可以在監聽器中處理 html 或將其作為消息從監聽器發送到后台頁面（使用chrome.runtime.sendMessage ）

如何在 chrome 擴展中從 background.js 引用 popup.html DOM？

問題描述

2 個解決方案

解決方案1
3 2018-12-06 08:22:41

解決方案2
0 2018-12-06 06:51:33

如何在 chrome 擴展中從 background.js 引用 popup.html DOM？

問題描述

2 個解決方案

解決方案1 3 2018-12-06 08:22:41

解決方案2 0 2018-12-06 06:51:33

解決方案1
3 2018-12-06 08:22:41

解決方案2
0 2018-12-06 06:51:33