क्रोम एक्सटेंशन

Question

में पॉलिमर 1.0 लोड करने में समस्याएं मैं कुछ समय के लिए पॉलिमर का उपयोग कर क्रोम एक्सटेंशन विकसित कर रहा हूं और मुझे इसके वर्तमान स्थिति में इसे रिलीज़ करने के बारे में कुछ चिंताएं हैं। मैं निम्नलिखित समस्याओं को रोकने के लिए कुछ रणनीतियों के बारे में सुनना चाहता हूं:

1) पृष्ठ में पॉलिमर लोड हो रहा है वैश्विक नामस्थान में लीक हो गया। पॉलिमर जेएस फाइलों में बंडल नहीं हुआ है बल्कि, यह एक HTML पृष्ठ के रूप में आता है और उपयोगकर्ता को पृष्ठ में लोड करने के लिए HTML आयात का उपयोग करने की आवश्यकता होती है। AFAIK, सामग्री स्क्रिप्ट केवल सीएसएस और जेएस के लिए अनुमति देते हैं लेकिन HTML नहीं। इस समस्या को हल करने के लिए, मैं गतिशील रूप से एक लिंक तत्व पैदा करने और पेज में इस तरह के रूप में डालकर उसे शामिल कर रहा हूँ:

function loadUrl(url) { 
    return new Promise(
    function(resolve, reject) { 
     var link = document.createElement('link'); 
     link.setAttribute('rel', 'import'); 
     link.setAttribute('href', url); 
     link.onload = function() { 
     resolve(url); 
     }; 
     document.head.appendChild(link); 
    }); 
} 

loadUrl(chrome.extension.getURL("polymer/polymer.html")). 
then(loadUrl(chrome.extension.getURL("my/component.html"))) 

एक बार मेजबान पेज में लोड है, यह सामग्री स्क्रिप्ट और कर सकते हैं की तरह अलग-थलग नहीं चलता कारण नेमस्पेस विवाद यदि पृष्ठ में पहले से ही पॉलिमर लोड है।

2) पॉलिमर आपको लोड नहीं होने पर और उपयोग करने के लिए तैयार होने पर नहीं बताता है। पॉलिमर (वर्तमान में) लोड होने पर एक ईवेंट को आग नहीं करता है और नतीजतन, मेरे घटकों को कभी-कभी पॉलिमर करने से पहले लोड होता है और टूट जाता है।

var ev = new CustomEvent('polymer-loaded'); 
document.dispatchEvent(ev); 

3) Polybuild उपकरण एक के लिए उचित कोड उत्पन्न नहीं करता है:

इस कम करने के लिए, मैं एक कस्टम (जहाँ पॉलिमर) इस तरह के रूप में परिभाषित किया polymer-micro.html के अंत में घटना को ट्रिगर कर रहा हूँ क्रोम एक्सटेंशन। जितना उपयोगी है, यह के के बाहर एक अलग जावास्क्रिप्ट फ़ाइल उत्पन्न करता है जो वैश्विक विंडो ऑब्जेक्ट में नामस्थान leak नाम का कारण बनता है। उदाहरण के लिए, यदि मेरे मॉड्यूल में jQuery आयात कर रहा था, तो पॉलीबिल्ड एक जेएस फाइल जेनरेट करेगा जो डीओएम मॉड्यूल के बाहर jQuery को होस्ट करेगा क्योंकि इसे होस्ट विंडो ऑब्जेक्ट से जोड़ा जा सकता है - क्रोम एक्सटेंशन में एक बड़ा नो-नो।

प्रतिक्रिया के लिए धन्यवाद।

इस लिखने के समय, मैं ग्लोबल नेम स्पेस में पेज लीक में पॉलिमर 1.2.3

Answer 1

लोड हो रहा है पॉलिमर उपयोग कर रहा हूँ।

आप HTMLImports.whenReady ईवेंट का उपयोग कर सकते हैं और अपने दस्तावेज़ सीधे मुख्य दस्तावेज़ में पंजीकृत कर सकते हैं। आप सीधे जावास्क्रिप्ट, या संदर्भ स्क्रिप्ट टैग शामिल कर सकते हैं। यह एचटीएमएल फाइलों को आयात करने में सक्षम नहीं होने के आपके मुद्दे को हल करता है, लेकिन वैश्विक नामस्थान में लीक के बारे में आपका वास्तविक प्रश्न हो सकता है, लेकिन जावास्क्रिप्ट को अभी भी मुख्य दस्तावेज़ के हिस्से के रूप में चलाने जा रहा है।

HTMLImports.whenReady(function() { 
     Polymer({ 
     is: 'main-document-element' 
     }); 
    }); 

पॉलिमर आपको बता नहीं है, जब यह भरा हुआ है और उपयोग के लिए तैयार कर रहा है। WebComponentsReady

window.addEventListener('WebComponentsReady', function(e) { 
    // imports are loaded and elements have been registered 
    }); 

यह आप किसी भी जावास्क्रिप्ट बहुलक और WebComponents से संबंधित जब तक सभी तत्वों को पंजीकृत किया गया स्थगित करने की अनुमति देता है

WebComponentsJs, यह स्वयं के कस्टम घटना है प्रदान करता है।

पॉलीबिल्ड टूल क्रोम एक्सटेंशन के लिए उचित कोड उत्पन्न नहीं करता है।

es6 modules वैश्विक नामस्थान में लीक करने वाले चर को कम कर सकता है, जिसे आप वर्तमान में Babel के साथ उपयोग कर सकते हैं।