2

Chrome拡張機能に取り組んでおり、情報をローカルストレージに正常に保存できますが、問題は、ローカルストレージに保存された後、実際にその情報にアクセスすることです。私が持っていないものは何も返さず、単にNULLと言います。

options.htmlとcontent.jsの2つのファイルがあります。options.htmlは、ユーザーがローカルストレージに保存する情報を入力し、content.jsが使用する情報にアクセスする場所です。

options.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>

background.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({});
});

content.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 に答える