2

我正在开发 chrome 扩展，我能够成功地将信息存储到本地存储，但我的问题实际上是在本地存储中访问该信息。我没有什么不返回任何东西只是说NULL。

我有两个文件：options.html 和 content.js。options.html 是用户输入信息以保存到本地存储的地方，而 content.js 将访问要使用的信息。

选项.html

$(function() {
    // Insert new buttons (you'd probably not ACTUALLY use buttons, instead saving on blurs or every x seconds)
    $("#save_buttons").after("<input type='submit' value='Save Form' id='saveData'>").after("<input type='submit' value='Clear Saved Data' id='clearData'>");
    $("#saveData").click(function(e) {
        // Don't actually submit form
        e.preventDefault();

        // Bit of generic data to test if saved data exists on page load
        localStorage.setItem("flag", "set");

        // serializeArray is awesome and powerful
        var data = $("#hanes").serializeArray();

        // iterate over results
        $.each(data, function(i, obj) {
            // HTML5 magic!!
            localStorage.setItem(obj.name, obj.value);
        });
    });

    // Test if there is already saved data  
    if (localStorage.getItem("flag") == "set") {
        // Tell the user
        $("header").before("<p id='message'>This form has saved data!</p>");

        // Same iteration stuff as before
        var data = $("#hanes").serializeArray();

        // Only the only way we can select is by the name attribute, but jQuery is down with that.
        $.each(data, function(i, obj) {
            $("[name='" + obj.name +"']").val(localStorage.getItem(obj.name));
        });
    }

    // Provide mechanism to remove data. You'd probably actually remove it not just kill the flag
    $("#clearData").click(function(e) {
        e.preventDefault();
        localStorage.setItem("flag", "");
    });
});


<form id="hanes" name="hanes">
First name: <input type="text" name="firstname" id="firstname" /><br />
Last name: <input type="text" name="lastname" /><br />
Address: <input type="text" name="address" /><br />
City: <input type="text" name="city" /><br />
</form>

背景.html

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if (request.method == "firstname")
      sendResponse({status: localStorage['firstname']});
    else
      sendResponse({});
});

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if (request.method == "lastname")
      sendResponse({status: localStorage['lastname']});
    else
      sendResponse({});
});

内容.js

chrome.extension.sendRequest({method: "firstname"}, function(response) {
  alert(response.status);
});

chrome.extension.sendRequest({method: "lastname"}, function(response) {
  alert(response.status);
});
4

2 回答 2

5

内容脚本在他们自己的小世界中运行，甚至在您的扩展程序的世界之外（Chrome 扩展程序代码 vs 内容脚本 vs 注入脚本）。内容脚本无法访问您的扩展的 localStorage。
因此，您要么需要使用消息传递（http://code.google.com/chrome/extensions/messaging.html）与后台页面进行通信，要么如果您真的想避免使用后台页面，您可以使用 iFrame 技巧（没有背景页面的启用选项的内容脚本 Chrome 扩展？）。

于 2012-04-09T08:42:34.893 回答
0

使用()而不是[].

var fname = window.localStorage.getItem('firstname');
于 2012-04-08T18:03:53.770 回答