ฉันมีหน้าตัวเลือกที่ผู้ใช้สามารถกำหนดตัวเลือกบางอย่างและมันบันทึกไว้ใน localStorage: options.html

ตอนนี้ฉันยังมีสคริปต์เนื้อหาที่ต้องการได้รับตัวเลือกที่กำหนดไว้ในoptions.htmlหน้า แต่เมื่อฉันพยายามเข้าถึง localStorage จากสคริปต์เนื้อหาจะไม่ส่งคืนค่าจากหน้าตัวเลือก

ฉันจะทำให้สคริปต์เนื้อหาของฉันรับค่าจาก localStorage จากหน้าตัวเลือกหรือแม้แต่หน้าพื้นหลังได้อย่างไร

อัปเดตปี 2016:

Google Chrome เปิดตัว 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"

ใช้ native localStorage ( คำตอบเก่าจาก 2011 )

สคริปต์เนื้อหาทำงานในบริบทของหน้าเว็บไม่ใช่หน้าส่วนขยาย ดังนั้นหากคุณเข้าถึง localStorage จาก contentcript ของคุณจะเป็นที่เก็บข้อมูลจากหน้าเว็บนั้นไม่ใช่ที่เก็บข้อมูลส่วนขยาย

ตอนนี้จะให้สคริปต์เนื้อหาของคุณเพื่ออ่านการจัดเก็บส่วนขยายของคุณ (ที่คุณตั้งพวกเขาจากหน้าตัวเลือกของคุณ) คุณจำเป็นต้องใช้ส่วนขยายข้อความผ่าน

สิ่งแรกที่คุณทำคือบอกสคริปต์เนื้อหาของคุณให้ส่งคำขอไปยังส่วนขยายของคุณเพื่อดึงข้อมูลบางอย่างและข้อมูลนั้นสามารถเป็นส่วนขยายของคุณ 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 เพราะคุณสามารถ:

• เก็บข้อมูลจากสคริปต์เนื้อหาของคุณ โดยไม่จำเป็นต้องผ่านข้อความระหว่างสคริปต์เนื้อหาและส่วนขยาย
• จัดเก็บข้อมูลของคุณเป็นวัตถุ JavaScriptโดยไม่ทำให้เป็นอันดับที่ JSON ( 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