如何在Google Chrome擴展程序中使用HTML5的localStorage？

我試圖開發一種擴展，將與真棒新標籤頁的工作。我已經按照作者對這封信的建議，但似乎並沒有任何我添加到我的背景頁面的腳本正在被執行。這裏是我的背景頁：如何在Google Chrome擴展程序中使用HTML5的localStorage？

<script> 
    var info = { 
     poke: 1, 
     width: 1, 
     height: 1, 
     path: "widget.html" 
    } 

    chrome.extension.onRequestExternal.addListener(function(request, sender, sendResponse) { 
     if (request === "mgmiemnjjchgkmgbeljfocdjjnpjnmcg-poke") { 
      chrome.extension.sendRequest(
       sender.id, 
       { 
        head: "mgmiemnjjchgkmgbeljfocdjjnpjnmcg-pokeback", 
        body: info, 
       } 
      ); 
     } 
    }); 

    function initSelectedTab() { 
     localStorage.setItem("selectedTab", "Something"); 
    } 

    initSelectedTab(); 
</script>

這裏是manifest.json的：

{ 
    "update_url": "http://clients2.google.com/service/update2/crx", 
    "background_page": "background.html", 
    "name": "Test Widget", 
    "description": "Test widget for mgmiemnjjchgkmgbeljfocdjjnpjnmcg.", 
    "icons": { 
     "128": "icon.png" 
    }, 
    "version": "0.0.1" 
}

這裏是widget.html的相關部分：

<script> 
    var selectedTab = localStorage.getItem("selectedTab"); 

    document.write(selectedTab); 
</script>

每一次，瀏覽器只顯示空。本地存儲沒有被設置，這使我認爲後臺頁面完全斷開。我有不正確的連線嗎？

來源

2012-03-06 Dave Kennedy

即使我在後臺頁面中唯一的東西是alert（「Blah」），它什麼都不做。啊，這讓我發瘋。 – 2012-03-07 00:20:08

很顯然，我拋棄了這個項目幾個月前出於無奈。我終於決定在今天重溫它，這是我發現：

的localStorage的對象緩存（去圖），這解釋了爲什麼延長有時會工作，突然不長的工作，我做了一個破後更改爲代碼。這也解釋了爲什麼擴展在我修好之後仍然不能長時間工作。爲了將來的參考，從Chrome的擴展管理器重新加載擴展可清除擴展的localStorage緩存。
用於瀏覽器擴展（至少在一個延伸ANTP的情況下）的背景頁必須是一個HTML文件。它不會工作，如果它是一個JS文件。
我在使用JavaScript來是非常糟糕的。

以下是更新的代碼，您可以將其用作您自己的Chrome或ANTP擴展的外殼。我還包括使用poke v2 ANTP所需的更改。

background.html：

<html> 
    <body> 
     <script> 
      (function() { 
       "use strict"; 

       var info = { 
        poke: 2, 
        width: 1, 
        height: 1, 
        path: "widget.html", 
        v2: { 
         resize: false, 
         min_width: 1, 
         max_width: 1, 
         min_height: 1, 
         max_height: 1 
        } 
       }; 

       chrome.extension.onRequestExternal.addListener(function (request, sender, sendResponse) { 
        if (request === "mgmiemnjjchgkmgbeljfocdjjnpjnmcg-poke") { 
         chrome.extension.sendRequest(
          sender.id, 
          { 
           head: "mgmiemnjjchgkmgbeljfocdjjnpjnmcg-pokeback", 
           body: info 
          } 
         ); 
        } 
       }); 

       localStorage.setItem("foo", "bar"); 
      }()); 
     </script> 
    </body> 
</html>

manifest.json的是完全一樣的。這裏是widget.html的相關部分：

<script> 
    (function() { 
     "use strict"; 

     var foo = localStorage.getItem("foo"); 

     document.write(foo); 
    }()); 
</script>

來源

2012-06-21 21:04:53

如果我正確理解這一點，後臺網頁試圖將存儲在localStorage的東西，那麼widget.html傳遞給任何請求內容的腳本/應用/擴展然後將讀取存儲在localStorage的信息。

如果這是你想要做的，那麼問題可能是這個 - 背景頁面和內容腳本/其他應用程序/擴展不能直接訪問彼此的localStorage（這是widget.html運行時請求腳本/頁面的沙箱）。您需要使用消息傳遞在後臺頁面和發送戳信息的腳本之間傳遞信息。

如果您只想檢查背景頁面是否正在響應，請在該頁面中執行console.log（'something'），然後檢查是否在開發人員工具窗口的控制檯上打印了「something」作爲背景頁。

來源

2012-03-07 02:13:02

謝謝，@Adi B.我會嘗試一下。 – 2012-03-07 15:31:10

Blah。 console.log（）在後臺頁面中不做任何事情。我試圖做chrome.extension.getBackgroundPage（）。console。日誌（'foo'）在小部件頁面中，但它在控制檯中給了我這個錯誤：不安全的JavaScript嘗試訪問帶有URL的框架chrome-extension：//mgmiemnjjchgkmgbeljfocdjjnpjnmcg/background.html從帶框架的URL chrome-extension：// lhdhihamoggeikbfdhkfffkplmmbaado/widget.html。域，協議和端口必須匹配。 Uncaught TypeError：無法調用未定義的方法'log' – 2012-03-07 15:39:29

@david您是在後臺頁面還是在窗口小部件中調用console.log（）？在後臺頁面調用它。另外，如果您看到後臺頁面的開發人員工具窗口的鏈接，則會加載後臺頁面。該頁面上的任何錯誤都將在開發人員的工具控制檯上可見。 – 2012-03-09 00:45:54

如何在Google Chrome擴展程序中使用HTML5的localStorage？

回答

相關問題