Chrome एक्सटेंशन की मदद से पीडब्ल्यूए और आईडब्ल्यूए कनेक्ट करना

Demián Renzulli

वेब डेवलपर के तौर पर, यह सबसे सही तरीका है कि आप अपने ऐप्लिकेशन को सबसे कम भरोसे वाले सुरक्षा मॉडल का इस्तेमाल करके डिज़ाइन करें. जैसे, प्रोग्रेसिव वेब ऐप्लिकेशन (PWA). इस तरीके से, ज़्यादा से ज़्यादा लोगों तक पहुंचा जा सकता है. साथ ही, सुरक्षा से जुड़ी उन समस्याओं को कम किया जा सकता है जिन्हें आपको मैनेज करना होता है. इसके अलावा, यह डेवलपर और उपयोगकर्ताओं, दोनों के लिए सबसे ज़्यादा फ़ायदेमंद होता है. हालांकि, वेब को डिफ़ॉल्ट रूप से सुरक्षित बनाया गया है. इसलिए, इसका सुरक्षा मॉडल ऑपरेटिंग सिस्टम और डिवाइस के कुछ खास एपीआई के ऐक्सेस पर पाबंदी लगाता है.

आइसोलेटेड वेब ऐप्लिकेशन (आईडब्ल्यूए) इस समस्या को हल करते हैं. ये वेब प्लैटफ़ॉर्म पर बनाए गए, आइसोलेटेड, बंडल किए गए, वर्शन वाले, साइन किए गए, और भरोसेमंद ऐप्लिकेशन मॉडल होते हैं. हालांकि, आईडब्ल्यूए पर स्विच करने से पहले, एक और विकल्प आज़माया जा सकता है. अपने PWA को Chrome एक्सटेंशन से कनेक्ट करें. यह सुविधा, मैनेज किए जा रहे ChromeOS एनवायरमेंट में उपलब्ध है. जैसे, मैनेज किए जा रहे उपयोगकर्ता सेशन, मैनेज किए जा रहे गेस्ट सेशन (एमजीएस) या कीऑस्क मोड. इस तकनीक की मदद से, आपका ऐप्लिकेशन सुरक्षित मैसेज पासिंग के ज़रिए लोअर-लेवल एक्सटेंशन एपीआई का इस्तेमाल कर सकता है. इस प्रोग्रेसिव अप्रोच को इस डायग्राम में दिखाया गया है: सबसे पहले, एक स्टैंडर्ड वेब ऐप्लिकेशन बनाया जाता है. इसके बाद, उसे इंस्टॉल किए जा सकने वाले PWA में बदलने की सुविधाएं जोड़ी जाती हैं. आखिर में, PWA और Chrome एक्सटेंशन के पाथ को एक्सप्लोर करके, अतिरिक्त एपीआई अनलॉक किए जाते हैं.

अगर आपके ऐप्लिकेशन को ऐसी बेहतर सुविधाओं की ज़रूरत है जो Chrome एक्सटेंशन एपीआई के साथ भी उपलब्ध नहीं हैं, जैसे कि कंट्रोल किया गया फ़्रेम या Direct Sockets API, तो Isolated Web App (IWA) पर माइग्रेट करना आपके लिए सबसे अच्छा विकल्प है. हालांकि, IWAs से वेब की नई और बेहतर सुविधाएं मिलती हैं. इसके बावजूद, आपको डिवाइस लेवल के कुछ ऐसे एपीआई की ज़रूरत पड़ सकती है जो सिर्फ़ Chrome एक्सटेंशन के लिए उपलब्ध हैं. जैसे, chrome.runtime.restart() कीऑस्क मोड में ChromeOS डिवाइस को रीबूट करने के लिए. अच्छी बात यह है कि किसी Chrome एक्सटेंशन को IWA से कनेक्ट करने के लिए, PWA की तरह ही तरीका इस्तेमाल किया जा सकता है. इस तकनीक के बारे में यहां बताया गया है.

लागू करने के चरण

कंपैनियन एक्सटेंशन डिप्लॉय करना

एक्सटेंशन को Chrome Admin console के ज़रिए डिप्लॉय किया जाता है. टारगेट एनवायरमेंट के हिसाब से, आपको इसे उससे जुड़े सेक्शन में कॉन्फ़िगर करना होगा. उदाहरण के लिए, कियॉस्क मोड के लिए डिवाइस > Chrome > ऐप्लिकेशन और एक्सटेंशन > कियॉस्क पर जाएं. इसके अलावा, उपयोगकर्ता और ब्राउज़र या मैनेज किए गए गेस्ट सेशन के लिए, उनसे जुड़े टैब पर जाएं. एक्सटेंशन को ऐसे लिंक पर खुद होस्ट किया जा सकता है जिसे कोई भी ऐक्सेस कर सके. इसके अलावा, इसे सीधे Chrome Web Store में भी होस्ट किया जा सकता है. एक्सटेंशन मैनेज करने के बारे में ज़्यादा जानकारी के लिए, आधिकारिक दस्तावेज़ देखें.

मैसेज पास करने की सुविधा लागू करना

एक्सटेंशन सेटअप करना

अपने वेब ऐप्लिकेशन से मैसेज पाने और उनका जवाब देने के लिए, एक बैकग्राउंड स्क्रिप्ट दिखाएं. यह स्क्रिप्ट, क्लाइंट (आपका वेब ऐप्लिकेशन) से आने वाले मैसेज को सुनती है. इसके बाद, उन अनुरोधों को एपीआई कॉल पर प्रॉक्सी करती है. यहां दिए गए उदाहरण में, जब वेब ऐप्लिकेशन एक कस्टम मैसेज ऑब्जेक्ट भेजता है, तो ChromeOS डिवाइस को रीस्टार्ट करने का अनुरोध प्रॉक्सी किया जाता है. इस ऑब्जेक्ट में methodName की callRestart शामिल होती है.

Background.js

// message handler - extension code
chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) {
  if (request.methodName == 'callRestart') {
    chrome.runtime.restart();
  }
});

एक्सटेंशन के मेनिफ़ेस्ट को कॉन्फ़िगर किया जा सकता है, ताकि externally_connectable⁠⁠ कुंजी का इस्तेमाल करके एक्सटेंशन को बाहरी फ़ंक्शन कॉल करने की अनुमति दी जा सके. यह कुंजी यह तय करती है कि किन साइटों और एक्सटेंशन को एक्सटेंशन में मौजूद तरीकों को कॉल करने की अनुमति है. Chrome एक्सटेंशन और मेनिफ़ेस्ट v3 के बारे में ज़्यादा जानकारी, आधिकारिक दस्तावेज़ में देखी जा सकती है⁠⁠.

अगर किसी प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) से कनेक्ट किया जा रहा है, तो आपको matches ऐरे में उस स्टैंडर्ड एचटीटीपीएस डोमेन को शामिल करना होगा जहां आपका ऐप्लिकेशन होस्ट किया गया है. यहां कीऑस्क मोड में चल रहे पीडब्ल्यूए के लिए कॉन्फ़िगर किए गए मेनिफ़ेस्ट का उदाहरण दिया गया है:

Manifest.json

{
  "manifest_version": 3,
  "name": "Restart your kiosk app",
  "version": "1.0",
  "description": "This restarts your ChromeOS device.",
  "background": {
    "service_worker": "background.js"
  },
  "externally_connectable": {
    "accepts_tls_channel_id": false,
    "matches": [
      "*://developer.chrome.com/*"
    ]
  }
}

अगर किसी आइसोलेटेड वेब ऐप्लिकेशन (आईडब्ल्यूए) से कनेक्ट किया जा रहा है, तो तरीका बिलकुल एक जैसा होता है. हालांकि, यूआरएल स्कीम बदल जाती है. आईडब्ल्यूए को सुरक्षित तरीके से पैकेज किया जाता है और ये स्टैंडर्ड वेब सर्वर पर नहीं चलते. इसलिए, ये अपने प्रोटोकॉल का इस्तेमाल करते हैं. आपको isolated-app:// स्कीम का इस्तेमाल करके, IWA का ऑरिजिन जोड़ना होगा.

Manifest.json

{
  "manifest_version": 3,
  "name": "IWA Companion Extension",
  "version": "1.1",
  "description": "Companion extension for the IWA",
  "background": {
    "service_worker": "/scripts/background.js"
  },
  "externally_connectable": {
    "matches": [
      "isolated-app://*/*"
    ]
  }
}

यह एक्सटेंशन में मौजूद कोड की कम से कम वह मात्रा है जो PWA या IWA से मिले मैसेज को सुनने के लिए ज़रूरी होती है.

PWA और IWA सेटअप करना

वेब ऐप्लिकेशन से एक्सटेंशन को कॉल करने के लिए, आपको इसके स्टैटिक एक्सटेंशन आईडी की जानकारी होनी चाहिए. यह आईडी, chrome://extensions पेज पर देखा जा सकता है. यह पेज, Chrome एक्सटेंशन इंस्टॉल करते समय दिखता है. इसके अलावा, एक्सटेंशन अपलोड होने के बाद, इसे Chrome Web Store से भी देखा जा सकता है. इससे आपका वेब ऐप्लिकेशन, कम्यूनिकेट करने के लिए सटीक एक्सटेंशन तय कर सकता है. इसके बाद, chrome.runtime.sendMessage को कॉल करें और एक्सटेंशन आईडी को एक्सटेंशन पर भेजे जाने वाले मैसेज के साथ पास करें.

const STATIC_EXTENSION_ID = 'abcdefghijklmnopqrstuvwxyz';
// found from chrome extensions page of chrome web store.
const callExtensionAPI = function (method) {
  chrome.runtime.sendMessage(STATIC_EXTENSION_ID, {
    methodName: method,
  });
};
callExtensionAPI('callRestart');

मैसेज पास करने के लिए, वेब ऐप्लिकेशन को एक्सटेंशन से कनेक्ट करने के बारे में ज़्यादा जानकारी के लिए, एक्सटेंशन का दस्तावेज़⁠⁠ देखें.

डेमो

इसे लागू करने का तरीका देखने के लिए, IWA Kitchen Sink repository देखें. यह प्रोजेक्ट, अलग-अलग आईडब्ल्यूए सुविधाओं के लिए एक बेहतरीन प्लेग्राउंड के तौर पर काम करता है. इसमें Direct Sockets और Controlled Frame जैसे भरोसेमंद एपीआई के डेमो शामिल हैं. इसमें IWA और Chrome एक्सटेंशन के बीच कनेक्शन का पूरा और काम करने वाला उदाहरण भी दिया गया है. इस रिपॉज़िटरी में, कंपैनियन एक्सटेंशन का एक सैंपल और एक खास वेब इंटरफ़ेस शामिल है. इसमें बताया गया है कि एक्सटेंशन के लिए उपलब्ध खास तरीकों को ट्रिगर करने के लिए, सुरक्षित मैसेज पासिंग का इस्तेमाल कैसे किया जाता है. उदाहरण के लिए, आइसोलेटेड वेब ऐप्लिकेशन से सीधे chrome.identity.getProfileUserInfo() एपीआई की मदद से, उपयोगकर्ता की प्रोफ़ाइल की जानकारी फ़ेच करने की जांच की जा सकती है.

नतीजा

अपने वेब ऐप्लिकेशन को Chrome एक्सटेंशन से कनेक्ट करने पर, डिवाइस की सुविधाओं को अनलॉक करने का सुरक्षित और बेहतर तरीका मिलता है. अपने ऐप्लिकेशन का आर्किटेक्चर डिज़ाइन करते समय, इन बातों का ध्यान रखें:

1. वेब से शुरुआत करें: ज़्यादा लोगों तक पहुंचने और सुरक्षा से जुड़ी कम लागत के लिए, PWA को डिफ़ॉल्ट रूप से इस्तेमाल करें.
2. एक्सटेंशन की मदद से, ओएस लेवल की सुविधाओं को इंटिग्रेट करें: ओएस लेवल की सुविधाओं को इंटिग्रेट करने के लिए, कंपैनियन Chrome एक्सटेंशन डिप्लॉय करें. जैसे, कीऑस्क मोड में डिवाइस को रीबूट करना. इसके बाद, सुरक्षित मैसेज पास करने की सुविधा का इस्तेमाल करके, इसे अपने ऐप्लिकेशन से कनेक्ट करें.
3. सिर्फ़ ज़रूरत होने पर आईडब्ल्यूए पर अपग्रेड करें: आइसोलेटेड वेब ऐप्लिकेशन का इस्तेमाल तब करें, जब आपको Direct Sockets, Controlled Frame या आईडब्ल्यूए के लिए उपलब्ध किसी अन्य एपीआई जैसे भरोसेमंद एपीआई की ज़रूरत हो.