Saya memiliki halaman opsi di mana pengguna dapat menentukan opsi tertentu dan menyimpannya di localStorage: options.html

Sekarang, saya juga memiliki skrip konten yang perlu mendapatkan opsi yang didefinisikan di options.htmlhalaman, tetapi ketika saya mencoba mengakses localStorage dari skrip konten, itu tidak mengembalikan nilai dari halaman opsi.

Bagaimana cara membuat skrip konten saya mendapatkan nilai dari localStorage, dari halaman opsi atau bahkan halaman latar belakang?

Pembaruan 2016:

Google Chrome merilis API penyimpanan: http://developer.chrome.com/extensions/storage.html

Sangat mudah digunakan seperti API Chrome lainnya dan Anda dapat menggunakannya dari konteks halaman apa pun di dalam Chrome.

    // Save it using the Chrome extension storage API.
    chrome.storage.sync.set({'foo': 'hello', 'bar': 'hi'}, function() {
      console.log('Settings saved');
    });

    // Read it using the storage API
    chrome.storage.sync.get(['foo', 'bar'], function(items) {
      message('Settings retrieved', items);
    });

Untuk menggunakannya, pastikan Anda mendefinisikannya di manifes:

    "permissions": [
      "storage"
    ],

Ada metode untuk "menghapus", "hapus", "getBytesInUse", dan pendengar acara untuk mendengarkan penyimpanan yang diubah "onChanged"

Menggunakan localStorage asli ( balasan lama dari 2011 )

Skrip konten dijalankan dalam konteks halaman web, bukan halaman ekstensi. Oleh karena itu, jika Anda mengakses Penyimpanan lokal dari script konten Anda, itu akan menjadi penyimpanan dari halaman web itu, bukan penyimpanan halaman ekstensi.

Sekarang, untuk membiarkan skrip konten Anda membaca penyimpanan ekstensi Anda (tempat Anda mengaturnya dari halaman opsi), Anda harus menggunakan pesan ekstensi .

Hal pertama yang Anda lakukan adalah memberi tahu skrip konten Anda untuk mengirim permintaan ke ekstensi Anda untuk mengambil beberapa data, dan data itu bisa menjadi ekstensi lokal Anda. Penyimpanan:

contentcript.js

chrome.runtime.sendMessage({method: "getStatus"}, function(response) {
  console.log(response.status);
});

background.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.method == "getStatus")
      sendResponse({status: localStorage['status']});
    else
      sendResponse({}); // snub them.
});

Anda dapat melakukan API di sekitarnya untuk mendapatkan data localStorage generik ke skrip konten Anda, atau mungkin, mendapatkan seluruh array localStorage.

Saya harap itu membantu menyelesaikan masalah Anda.

Menjadi mewah dan generik ...

contentcript.js

chrome.runtime.sendMessage({method: "getLocalStorage", key: "status"}, function(response) {
  console.log(response.data);
});

background.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.method == "getLocalStorage")
      sendResponse({data: localStorage[request.key]});
    else
      sendResponse({}); // snub them.
});

Terkadang mungkin lebih baik digunakan chrome.storage API. Lebih baik daripada penyimpanan lokal karena Anda dapat:

• menyimpan informasi dari skrip konten Anda tanpa perlu menyampaikan pesan antara skrip konten dan ekstensi;
• menyimpan data Anda sebagai objek JavaScript tanpa membuat serialkannya ke JSON ( localStorage only menyimpan string ).

Berikut adalah kode sederhana yang menunjukkan penggunaan chrome.storage. Skrip konten mendapatkan url dari halaman yang dikunjungi dan stempel waktu serta menyimpannya, popup.js mendapatkannya dari area penyimpanan.

content_script.js

(function () {
    var visited = window.location.href;
    var time = +new Date();
    chrome.storage.sync.set({'visitedPages':{pageUrl:visited,time:time}}, function () {
        console.log("Just visited",visited)
    });
})();

popup.js

(function () {
    chrome.storage.onChanged.addListener(function (changes,areaName) {
        console.log("New item in storage",changes.visitedPages.newValue);
    })
})();

"Perubahan" di sini adalah objek yang berisi nilai lama dan baru untuk kunci yang diberikan. Argumen "AreaName" mengacu pada nama area penyimpanan, baik 'lokal', 'sinkronisasi' atau 'terkelola'.

Ingatlah untuk mendeklarasikan izin penyimpanan di manifest.json.

manifes. json

...
"permissions": [
    "storage"
 ],
...

Pilihan lain adalah menggunakan API chromestorage. Ini memungkinkan penyimpanan data pengguna dengan sinkronisasi opsional di seluruh sesi.

Satu kelemahan adalah tidak sinkron.

https://developer.chrome.com/extensions/storage.html