google-chrome-extension ट्यूटोरियल
Google- क्रोम-एक्सटेंशन के साथ शुरुआत करना

टिप्पणियों

पूर्ण न्यूनतम उदाहरण

कोई भी क्रोम एक्सटेंशन अनपैक्ड एक्सटेंशन के रूप में शुरू होता है: एक फ़ोल्डर जिसमें एक्सटेंशन की फाइलें होती हैं।

एक फ़ाइल जिसमें यह होनी चाहिए, वह है manifest.json , जो एक्सटेंशन के मूल गुणों का वर्णन करता है। उस फ़ाइल के कई गुण वैकल्पिक हैं, लेकिन यहाँ एक पूर्ण न्यूनतम manifest.json फ़ाइल:

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0"
}

कहीं एक फ़ोल्डर बनाएँ (उदाहरण के लिए, myExtension ), जैसा कि ऊपर सूचीबद्ध के रूप में manifest.json myExtension जोड़ें।

फिर, आपको Chrome में एक्सटेंशन लोड करना होगा।

1. chrome://extensions/ खोलें chrome://extensions/ पृष्ठ, सुलभ हालांकि मेनू> अधिक उपकरण> एक्सटेंशन ।
2. शीर्ष दाईं ओर एक चेकबॉक्स के साथ डेवलपर मोड सक्षम करें, अगर यह पहले से सक्षम नहीं है।
3. लोड myExtension एक्सटेंशन ... बटन पर क्लिक करें और निर्मित myExtension फ़ोल्डर चुनें।

बस! आपका पहला एक्सटेंशन Chrome द्वारा लोड किया गया है:

बेशक, यह अभी तक कुछ भी नहीं करता है, इसलिए विस्तार के आर्किटेक्चर के एक सिंहावलोकन को पढ़ने के लिए यह एक अच्छा क्षण है कि आपको उन हिस्सों को जोड़ना शुरू करना चाहिए।

महत्वपूर्ण: जब आप अपने एक्सटेंशन में कोई भी परिवर्तन करते हैं, तो chrome://extensions/ वापस जाना न भूलें chrome://extensions/ और अपने एक्सटेंशन के लिए रीलोड लिंक को दबाएं जब आप बदलाव करें। सामग्री स्क्रिप्ट के मामले में, लक्ष्य पृष्ठ को भी पुनः लोड करें।

पृष्ठभूमि पृष्ठ

बैकग्राउंड पेज निहित पेज होते हैं जिनमें बैकग्राउंड स्क्रिप्ट होती है। एक पृष्ठभूमि स्क्रिप्ट कुछ कार्य या स्थिति का प्रबंधन करने के लिए एक लंबी चलने वाली स्क्रिप्ट है। यह आपके विस्तार के जीवनकाल के लिए मौजूद है, और एक समय में इसका केवल एक उदाहरण सक्रिय है।

आप इसे अपने manifest.json में इस तरह घोषित कर सकते हैं।

"background": {
    "scripts": ["background.js"]
}

एक बैकग्राउंड पेज एक्सटेंशन सिस्टम द्वारा उत्पन्न किया जाएगा जिसमें स्क्रिप्ट प्रॉपर्टी में सूचीबद्ध प्रत्येक फाइल शामिल है।

आपके पास सभी अनुमत chrome.* तक पहुंच है chrome.* एपीआई।

दो तरह के बैकग्राउंड पेज होते हैं: लगातार बैकग्राउंड पेज जो हमेशा खुले रहते हैं, और इवेंट पेज जो आवश्यकतानुसार खुलते और बंद होते हैं।

यदि आप चाहते हैं कि आपका बैकग्राउंड पेज नॉन-पर्सेंट हो, तो आपको persistent -फ्लैग को गलत पर सेट करना होगा:

"background": {
    "scripts": ["eventPage.js"],
    "persistent": false
}

यह पृष्ठभूमि स्क्रिप्ट केवल तभी सक्रिय होती है जब कोई ईवेंट निकाल दिया जाता है जिस पर आपके पास एक श्रोता पंजीकृत होता है। सामान्य तौर पर आप पंजीकरण के लिए एक addListener उपयोग करते हैं।

उदाहरण: ऐप या एक्सटेंशन सबसे पहले इंस्टॉल किया गया है।

chrome.runtime.onInstalled.addListener(function() {
   console.log("The Extension is installed!");
});

सामग्री लिपियों

एक सामग्री स्क्रिप्ट विस्तार कोड है जो एक सामान्य पृष्ठ के साथ चलता है।

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

manifest.json में परिभाषा उदाहरण। manifest.json :

  "content_scripts": [
    {
      "matches": ["http://www.stackoverflow.com/*"],
      "css": ["style.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ]

विशेषताओं के निम्नलिखित अर्थ हैं:

सामग्री स्क्रिप्ट को chrome.tabs.executeScript का उपयोग करके मांग पर भी इंजेक्ट किया जा सकता है, जिसे प्रोग्राममैटिक इंजेक्शन कहा जाता है।

यह सभी देखें

• आधिकारिक प्रलेखन: सामग्री लिपियों
• ढेर अतिप्रवाह प्रलेखन: सामग्री लिपियों

विकल्प पृष्ठ

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

संस्करण 2

क्रोम 40 के बाद से क्रोम में // पूर्वनिर्धारित बातचीत के रूप में विकल्प पृष्ठ के होने की संभावना है : // एक्सटेंशन ।

manifest.json पेज में एक विकल्प पृष्ठ को परिभाषित करने का तरीका। manifest.json निम्नलिखित की तरह है:

"options_ui": {
    "page": "options.html",
    "chrome_style": true
}

यह विकल्प पृष्ठ एक संवाद के रूप में व्यवहार करेगा, यह एक पॉपअप के रूप में खुलेगा, जहाँ विकल्प . html प्रदर्शित होंगे। chrome_style आपके विकल्प पृष्ठ पर शैली संगतता कारणों के लिए Chrome स्टाइलशीट लागू करेगा।

विकल्प स्वचालित रूप से एक्सटेंशन बटन या क्रोम: // एक्सटेंशन पेज के संदर्भ मेनू के माध्यम से सामने आएंगे।

आप प्रोग्राम पृष्ठ को वैकल्पिक रूप से भी खोल सकते हैं, उदाहरण के लिए पॉपअप UI से:

chrome.runtime.openOptionsPage();

संस्करण 1 ( पदावनत )

manifest.json में परिभाषा उदाहरण। manifest.json :

"options_page": "options.html"

यह संस्करण 2 का उपयोग करने की सिफारिश की गई है क्योंकि options_ui व्यवहार जल्द ही संस्करण 1 विकल्प पृष्ठों पर लागू किया जाएगा।

भंडारण

आम तौर पर सेटिंग्स को बनाए रखने की आवश्यकता होती है, इसलिए chrome.storage एपीआई का उपयोग करने की सिफारिश की जाती है। manifest.json में अनुमतियों को इस तरह घोषित किया जा सकता है।

"permissions": [
   "storage"
]

आधिकारिक दस्तावेज

• विकल्प पृष्ठ - संस्करण 1
• विकल्प पृष्ठ - संस्करण 2
• भंडारण एपीआई

एक नया टैब बनाएं

एक्सटेंशन कोड में आप किसी भी chrome.* उपयोग कर सकते हैं chrome.* एपीआई यदि आपने आवश्यक अनुमतियों को डिक्रिप्ट किया है। इसके अलावा, कुछ API केवल बैकग्राउंड पेज से ही काम करता है, और कुछ API केवल कंटेंट स्क्रिप्ट से ही काम करता है।

आप किसी भी अनुमति की घोषणा करते हुए अधिकांश chrome.tabs विधियों का उपयोग कर सकते हैं। अब हम chrome.tabs.create पर ध्यान केंद्रित करते हैं

_{नोट: नया टैब बिना किसी popup चेतावनी के खोला जाएगा।}

chrome.tabs.create({
       url:"http://stackoverflow.com",
       selected:false  // We open the tab in the background
})

आप आधिकारिक क्रोम डेवलपर में टैब ऑब्जेक्ट के बारे में अधिक जान सकते हैं