क्रोम एक्सटेंशन: कंटेंट स्क्रिप्ट में लोकलस्टोरेज एक्सेस करना

Question

मेरे पास एक विकल्प पृष्ठ है जहां उपयोगकर्ता कुछ विकल्पों को परिभाषित कर सकता है और इसे स्थानीय स्तर पर सहेजता है: options.html

अब, मेरे पास एक सामग्री स्क्रिप्ट भी है, जिसे उन विकल्पों को प्राप्त करने की आवश्यकता है जो options.htmlपृष्ठ में परिभाषित किए गए थे , लेकिन जब मैं स्थानीय स्क्रिप्ट को सामग्री स्क्रिप्ट से एक्सेस करने का प्रयास करता हूं, तो यह विकल्प पृष्ठ से मान वापस नहीं करता है।

मैं अपनी सामग्री स्क्रिप्ट को स्थानीय पृष्ठ से, विकल्प पृष्ठ या यहां तक ​​कि पृष्ठभूमि पृष्ठ से कैसे मान प्राप्त कर सकता हूं?

Comments

संबंधित: stackoverflow.com/questions/3033829/…

— Shay Erlichmen

संबंधित: stackoverflow.com/questions/4224039/…

— जेसन

संबंधित: stackoverflow.com/questions/39768005/…

— super1ha1

Answer 1

अपडेट २०१६:

Google Chrome ने संग्रहण API: http://developer.chrome.com/extensions/storage.html जारी किया

अन्य क्रोम एपीआई की तरह उपयोग करना बहुत आसान है और आप इसे क्रोम के भीतर किसी भी पेज संदर्भ से उपयोग कर सकते हैं।

    // 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"

स्थानीय स्थानीयस्टोरेज ( 2011 से पुराना उत्तर ) का उपयोग करना

कंटेंट स्क्रिप्ट वेबपेजों के संदर्भ में चलती हैं, न कि विस्तार पृष्ठों पर। इसलिए, यदि आप अपनी सामग्री से लोकलस्टोरेज को एक्सेस कर रहे हैं, तो यह उस वेबपेज से स्टोरेज होगा, न कि एक्सटेंशन पेज स्टोरेज।

अब, अपनी सामग्री स्क्रिप्ट को अपने एक्सटेंशन स्टोरेज को पढ़ने के लिए दें (जहां आप उन्हें अपने विकल्प पृष्ठ से सेट करते हैं), आपको एक्सटेंशन मैसेज पासिंग का उपयोग करने की आवश्यकता है ।

पहली बात यह है कि आप अपनी सामग्री स्क्रिप्ट को अपने विस्तार के लिए कुछ डेटा लाने के लिए एक अनुरोध भेजने के लिए कहेंगे, और वह डेटा आपका एक्सटेंशन डेटा स्टोरेज हो सकता है:

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

आप अपनी सामग्री स्क्रिप्ट में जेनेरिक लोकलस्टोरेज डेटा प्राप्त करने के लिए या शायद पूरे लोकलस्टोरेज एरे को प्राप्त करने के लिए एक एपीआई कर सकते हैं।

मुझे उम्मीद है कि आपकी समस्या को हल करने में मदद मिली।

फैंसी और सामान्य होने के लिए ...

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

Comments

जाहिर है, अनुरोध भी हो सकता है {विधि: 'getStorage', कुंजी: 'स्थिति'}, और श्रोता संबंधित डेटा के साथ प्रतिक्रिया देगा।

— JC Inacio

क्या होगा अगर मैं चाहता हूं कि लोकलस्टोरेज से सब कुछ एक्सटेंशन में ट्रांसफर हो जाए? क्या मैं लिख सकता हूँ sendResponse({data: localStorage});?

— Bibhas Debnath

मैं थोड़ा उलझन में हूँ। मैं चाहता हूं कि मेरे विकल्प पृष्ठ का डेटा बैकग्राउंड.html पेज पर उपलब्ध हो। इसलिए मैं बैकग्राउंड पेज से कंटेंटस्क्रिप्ट तक अनुरोध करता हूं? और सामग्रीलेखक स्थानीयस्टोरेज डेटा वापस भेज सकता है? इसे देखें -> pastebin.com/xtFexFtc .. क्या मैं इसे सही कर रहा हूं?

— बिभास देबनाथ

पृष्ठभूमि पृष्ठ और विकल्प पृष्ठ एक ही एक्सटेंशन संदर्भ से संबंधित हैं, इसलिए आपको सामग्री स्क्रिप्ट या संदेश की आवश्यकता नहीं है। आप localStorageविकल्प पृष्ठ से सीधे कॉल कर सकते हैं या विकल्प पृष्ठ से उपयोग कर सकते हैं chrome.extension.getBackgroundPage।

— मोहम्मद मंसूर

वह अजीब है। मैं विकल्प पृष्ठ में कुछ विकल्प सेट कर रहा हूं और पृष्ठभूमि पृष्ठ में उनके आधार पर संदर्भ मेनू बना रहा हूं। बात यह है कि, अगर मैं विकल्प पृष्ठ से लोकलस्टोरेज में एक चर सेट करता हूं, तो यह तुरंत पृष्ठभूमि पृष्ठ पर प्रतिबिंबित नहीं होता है (यानी कोई नया संदर्भ नहीं), जब तक कि मैं अक्षम न करूं और एक्सटेंशन को फिर से सक्षम न करूं। किसी भी कारण से आप सोच सकते हैं?

— बिभास देबनाथ 16

Answer 2

कभी-कभी chrome.storage API का उपयोग करना बेहतर हो सकता है। यह बेहतर है तो लोकलस्टोरेज क्योंकि आप कर सकते हैं:

• सामग्री स्क्रिप्ट और एक्सटेंशन के बीच संदेश की आवश्यकता के बिना अपनी सामग्री स्क्रिप्ट से जानकारी संग्रहीत करें;
• जावास्क्रिप्ट के रूप में जावास्क्रिप्ट ऑब्जेक्ट्स के रूप में अपने डेटा को स्टोर करें उन्हें JSON ( लोकलस्टोरेज केवल स्ट्रिंग्स को स्टोर करता है ) के बिना।

यहाँ 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);
    })
})();

यहां "परिवर्तन" एक ऐसी वस्तु है जिसमें किसी दिए गए कुंजी के लिए पुराने और नए मूल्य शामिल हैं। "एरियानाम" तर्क में भंडारण क्षेत्र का नाम 'स्थानीय', 'सिंक' या 'प्रबंधित' है।

घोषणापत्र में भंडारण अनुमति की घोषणा करना याद रखें।

manifest.json

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

Comments

onChangedघटना पहले से ही में डेटा प्रदान करता है changesवस्तु। इसके अलावा, पर विशेष ध्यान देना namespaceकी onChangedघटना। यदि आप कुछ का उपयोग करके स्टोर करते हैं chrome.storage.local.set, तो onChangedईवेंट को ट्रिगर किया जाता है, लेकिन उपयोग करके पढ़ना chrome.storage.sync.getबहुत कम समझ में आता है।

— रॉब डब्ल्यू

हां तुम सही हो, मेरा जवाब संपादित किया। जाहिर है आप अन्य परिदृश्यों में chrome.storage.sync.get का उपयोग कर सकते हैं, लेकिन यहां यह वास्तव में बेमानी है।

— पावेल मिच

आपके उत्तर के 5 संशोधन के जवाब में: changes.visitedPagesयदि visitedPagesपरिवर्तित नहीं किया गया है तो अपरिभाषित हो जाएगा । if (changes.visitedPages) { ... }इस समस्या को हल करने के लिए लाइन लपेटें ।

— रोब डब्ल्यू

Answer 3

क्रोमस्टेज एपीआई का उपयोग करने के लिए एक और विकल्प होगा। यह सत्र भर में वैकल्पिक सिंकिंग के साथ उपयोगकर्ता डेटा के भंडारण की अनुमति देता है।

एक नकारात्मक पक्ष यह है कि यह अतुल्यकालिक है।

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

Comments

@ जेसन, ऑल-ऑर-नथिंग लेनदेन के बारे में क्या ?

— पचेरियर