사용자가 특정 옵션을 정의하고 localStorage에 저장하는 옵션 페이지가 있습니다. options.html

이제 options.html페이지에 정의 된 옵션을 가져와야하는 콘텐츠 스크립트가 있지만 콘텐츠 스크립트에서 localStorage에 액세스하려고하면 옵션 페이지에서 값을 반환하지 않습니다.

컨텐츠 스크립트가 localStorage, 옵션 페이지 또는 백그라운드 페이지에서 값을 가져 오려면 어떻게해야합니까?

2016 업데이트 :

구글 크롬은 스토리지 API를 공개했다 : http://developer.chrome.com/extensions/storage.html

다른 Chrome API와 마찬가지로 사용하기가 쉽고 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);
    });

그것을 사용하려면 매니페스트에서 정의해야합니다.

    "permissions": [
      "storage"
    ],

"제거", "클리어", "getBytesInUse"메소드 및 변경된 스토리지 "onChanged"를 청취하는 이벤트 리스너가 있습니다.

기본 localStorage 사용 ( 2011 년 이전 응답 )

콘텐츠 스크립트는 확장 페이지가 아닌 웹 페이지의 컨텍스트에서 실행됩니다. 따라서 컨텐츠 스크립트에서 localStorage에 액세스하는 경우 확장 페이지 저장소가 아닌 해당 웹 페이지의 저장소가됩니다.

이제 콘텐츠 스크립트가 확장 프로그램 (옵션 페이지에서 설정 한 확장 프로그램)을 읽을 수있게하려면 확장 메시지 전달 을 사용해야합니다 .

가장 먼저 할 일은 콘텐츠 스크립트가 확장에 요청을 보내 데이터를 가져 오도록 지시하는 것이며 그 데이터는 확장 localStorage가 될 수 있습니다.

contentscript.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.
});

API를 사용하여 일반 localStorage 데이터를 컨텐츠 스크립트로 가져 오거나 전체 localStorage 배열을 가져올 수 있습니다.

문제 해결에 도움이 되었기를 바랍니다.

화려하고 일반적인 ...

contentscript.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.
});

때로는 chrome.storage API 를 사용하는 것이 좋습니다 . localStorage보다 낫습니다.

• 컨텐츠 스크립트와 확장간에 메시지를 전달할 필요없이 컨텐츠 스크립트의 정보를 저장합니다 .
• 데이터 를 JSON으로 직렬화하지 않고 JavaScript 객체로 저장합니다 ( localStorage는 문자열 만 저장함 ).

다음은 chrome.storage 사용을 보여주는 간단한 코드입니다. 컨텐츠 스크립트는 방문한 페이지의 URL과 타임 스탬프를 가져 와서 저장하며, popup.js는 저장 영역에서 가져옵니다.

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

여기서 "변경 사항"은 주어진 키에 대한 이전 값과 새 값을 포함하는 개체입니다. "AreaName"인수는 저장 영역의 이름 ( 'local', 'sync'또는 'managed')을 나타냅니다.

manifest.json에서 스토리지 권한을 선언해야합니다.

manifest.json

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

다른 옵션은 chromestorage API를 사용하는 것입니다. 이를 통해 세션 간 선택적 동기화를 통해 사용자 데이터를 저장할 수 있습니다.

한 가지 단점은 비동기 적이라는 것입니다.

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