2012-12-10 36 views
6

पर एकाधिक चर पास करें मैं अपना पहला क्रोम एक्सटेंशन लिख रहा हूं, और मैंने इसे कुछ घंटों पहले शुरू किया था। हार्ड-कोडेड होने पर सबकुछ ठीक से काम करता था। अनिवार्य रूप से, मैं एक 8-पेज फॉर्म भर रहा हूँ। फॉर्म का प्रत्येक पृष्ठ एक अलग सामग्री स्क्रिप्ट से मेल खाता है। सामग्री स्क्रिप्ट कुछ इस तरह देखने के लिए प्रयोग किया है: (क्षेत्रों की खोज, थोड़ा और अधिक कठिन है क्योंकि वे मानक नहीं कर रहे हैं, लेकिन मैं that..that हिस्सा काम करता है के बारे में चिंतित नहीं हूँ)सामग्री स्क्रिप्ट क्रोम

var first_name = 'John'; 
var last_name = 'Doe'; 
... 
... 
document.getElementById('first_name').value = first_name; 
document.getElementById('last_name').value = last_name; 

यह काम किया ठीक है (मेरे लिए), लेकिन मैं इसे कुछ लोगों को वितरित करना चाहता हूं, इनमें से कोई भी स्रोत कोड से विस्तार का उपयोग नहीं कर सकता, सीधे चर को संपादित कर सकता है। तो मैं एक 'विकल्प' पेज बनाया है, एक उदाहरण के रूप में इस का उपयोग करते हुए: https://developer.chrome.com/trunk/extensions/options.html

विकल्प पृष्ठ प्रपत्र एक mockup भरा जाता है, और प्रत्येक उपयोगकर्ता को उनके डिफ़ॉल्ट यहां डाल सकते हैं। मेरा save_options() फ़ंक्शन मूल रूप से करता है (छद्म कोड):

foreach(fields as field) { 
    localStorage[field] = document.getElement....(field); 
} 

यह ठीक काम करता है। यह ठीक से बचाता है, संग्रहीत मूल्यों को प्रदर्शित करता है, आदि

समस्या तब होती है जब मैं सामग्री स्क्रिप्ट से चर का उपयोग करने का प्रयास करता हूं। जो मैंने पढ़ा है, उससे यह नहीं किया जा सकता है (सीधे), और ऑनलाइन विभिन्न विधियां हैं जो दिखाती हैं कि यह कैसे करें। मैं इस (सामग्री स्क्रिप्ट) की तरह कुछ करना चाहता हूँ:

var first_name = localStorage["first_name"]; 
var last_name = localStorage["last_name"]; 
... 
... 
document.getElementById('first_name').value = first_name; 
document.getElementById('last_name').value = last_name; 

मेरे प्रश्न हैं:

1) आप में से जो लोग क्रोम एक्सटेंशन के साथ पेश किया है के लिए/LocalStorage/chrome.storage/आदि, वहाँ है ऐसा करने का एक 'सर्वश्रेष्ठ' तरीका?

2) सभी परिवर्तनीय नाम/मूल्यों को सेट करने का सबसे प्रभावी तरीका क्या है? मैं एक अलग अनुरोध के साथ प्रत्येक फ़ील्ड को सेट करने पर एक लूप (ऊपर की तरह) पसंद करूंगा। मैं प्रति पेज 10 फ़ील्ड औसत कर रहा हूं।

(मैं शायद http://developer.chrome.com/extensions/messaging.html की एक लंबी, गन्दा फार्म का उपयोग कर सकता है, लेकिन मैं एक अधिक कुशल/एक्स्टेंसिबल/सुरुचिपूर्ण समाधान के लिए उम्मीद कर रहा हूँ)

किसी भी इनपुट की सराहना की है!

+0

मैं क्या पढ़ा है से आप कोड लिखने के लिए है, सामग्री स्क्रिप्ट localStorage उपयोग करने में सक्षम नहीं हैं। क्या मैं कुछ भूल रहा हूँ? –

+1

ओह ठीक है, अगर ऐसा है, तो आप पृष्ठभूमि स्क्रिप्ट में [संदेश पासिंग] (http://developer.chrome.com/extensions/messaging.html) के माध्यम से चीजें प्राप्त कर सकते हैं। –

+0

chrome.extension.sendMessage ({ ग्रीटिंग: "हैलो" }, फ़ंक्शन (प्रतिक्रिया) { console.log (response.farewell); }); –

उत्तर

8

एक समाधान मैसेजिंग पासिंग का उपयोग करना है, जिसका आपने उल्लेख किया है।

एक और (बेहतर, मुझे लगता है) समाधान chrome.storage एपीआई है (अधिक जानकारी के लिए http://developer.chrome.com/extensions/storage.html देखें)। स्टोरेज एपीआई का उपयोग सीधे पृष्ठभूमि पृष्ठों और सामग्री स्क्रिप्ट दोनों में किया जा सकता है और यदि आप chrome.storage.sync के अंतर्गत मान संग्रहीत करते हैं तो क्रोम स्वचालित रूप से सिंक हो जाएगा। (सैंडबॉक्स) localStorage से केवल पर्याप्त अंतर यह है कि इस एपीआई अतुल्यकालिक है तो आप की तरह

chrome.storage.sync.get(['first_name', 'last_name'], function(items){ 
    document.getElementById('first_name').value = items['first_name']; 
    document.getElementById('last_name').value = items['last_name']; 
});