Tôi có một trang tùy chọn nơi người dùng có thể xác định các tùy chọn nhất định và nó lưu nó trong localStorage: options.html

Bây giờ, tôi cũng có một tập lệnh nội dung cần lấy các tùy chọn đã được xác định trong options.htmltrang, nhưng khi tôi cố gắng truy cập localStorage từ tập lệnh nội dung, nó không trả về giá trị từ trang tùy chọn.

Làm cách nào để làm cho tập lệnh nội dung của tôi nhận được các giá trị từ localStorage, từ trang tùy chọn hoặc thậm chí trang nền?

Cập nhật 2016:

Google Chrome đã phát hành API lưu trữ: http://developer.chrome.com/extensions/st Storage.html

Nó khá dễ sử dụng như các API Chrome khác và bạn có thể sử dụng nó từ bất kỳ bối cảnh trang nào trong 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);
    });

Để sử dụng nó, hãy chắc chắn rằng bạn xác định nó trong tệp kê khai:

    "permissions": [
      "storage"
    ],

Có các phương pháp để "xóa", "xóa", "getBytesInUse" và trình lắng nghe sự kiện để lắng nghe lưu trữ đã thay đổi "onChanged"

Sử dụng localStorage riêng ( trả lời cũ từ năm 2011 )

Các kịch bản nội dung chạy trong ngữ cảnh của các trang web, không phải các trang mở rộng. Do đó, nếu bạn đang truy cập localStorage từ nội dung của mình, thì đó sẽ là bộ lưu trữ từ trang web đó, không phải là bộ lưu trữ trang mở rộng.

Bây giờ, để cho tập lệnh nội dung của bạn đọc bộ nhớ mở rộng của bạn (nơi bạn đặt chúng từ trang tùy chọn của mình), bạn cần sử dụng thông báo tiện ích mở rộng .

Điều đầu tiên bạn làm là yêu cầu tập lệnh nội dung của bạn gửi yêu cầu đến tiện ích mở rộng của bạn để tìm nạp một số dữ liệu và dữ liệu đó có thể là tiện ích mở rộng localStorage của bạn:

nội dung.js

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

nền.js

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

Bạn có thể thực hiện một API xung quanh đó để nhận dữ liệu localStorage chung vào tập lệnh nội dung của bạn hoặc có thể lấy toàn bộ mảng localStorage.

Tôi hy vọng điều đó đã giúp giải quyết vấn đề của bạn.

Để được ưa thích và chung chung ...

nội dung.js

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

nền.js

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

Đôi khi có thể tốt hơn khi sử dụng API chrome.st Storage . Tốt hơn là localStorage vì bạn có thể:

• lưu trữ thông tin từ tập lệnh nội dung của bạn mà không cần thông báo chuyển giữa tập lệnh nội dung và phần mở rộng;
• lưu trữ dữ liệu của bạn dưới dạng các đối tượng JavaScript mà không tuần tự hóa chúng thành JSON ( localStorage chỉ lưu trữ chuỗi ).

Đây là một mã đơn giản thể hiện việc sử dụng chrome.st Storage. Tập lệnh nội dung lấy url của trang đã truy cập và dấu thời gian và lưu trữ nó, popup.js lấy nó từ vùng lưu trữ.

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

"Thay đổi" ở đây là một đối tượng chứa giá trị cũ và mới cho một khóa đã cho. Đối số "AreaName" đề cập đến tên của vùng lưu trữ, 'cục bộ', 'đồng bộ hóa' hoặc 'được quản lý'.

Hãy nhớ khai báo quyền lưu trữ trong manifest.json.

manifest.json

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

Một tùy chọn khác là sử dụng API chromest Storage. Điều này cho phép lưu trữ dữ liệu người dùng với đồng bộ hóa tùy chọn qua các phiên.

Một nhược điểm là nó không đồng bộ.

https://developer.chrome.com/extensions/st Storage.html