क्रोम संस्करण में एक्सटेंशन में ES6 मॉड्यूल 61

Question

यह ES6 Modules In Google Chrome Extension Development (unexpected token) जैसा ही प्रश्न नहीं है क्योंकि यह पुराना है और पहले से ही उत्तर दिया गया है।

Google ने एक समाचार विज्ञप्ति का दावा किया कि क्रोम ES6 मॉड्यूल का समर्थन करता है। मैं एक विस्तार के भीतर से एक मॉड्यूल लोड करने की कोशिश कर रहा हूँ। मैं एक सामान्य पृष्ठ के भीतर से एक मॉड्यूल लोड करने में सक्षम हूं, लेकिन एक एक्सटेंशन के भीतर से नहीं।

यहाँ एचटीएमएल है, यह एक विस्तार के संदर्भ में एक पृष्ठ है:

<script src="test.js" type="module"></script> 

जब मैं पृष्ठ को खोलने, मैं कंसोल में निम्न त्रुटि संदेश देख:

लोड करने में असफल मॉड्यूल स्क्रिप्ट: सर्वर ने गैर-जावास्क्रिप्ट एमआईएम प्रकार के "" जवाब दिया। प्रति HTML spec मॉड्यूल स्क्रिप्ट के लिए सख्त MIME प्रकार की जांच लागू की जाती है।

क्या किसी के पास कोई सलाह है? क्या यह एक बग है जिसे क्रोम को सूचित किया जाना चाहिए? या यह अभी तक समर्थित नहीं है? मैं किसी भी सीधा स्पष्टीकरण का पता नहीं लगा सका।

Answer 1

उपयोगकर्ता के रूप में woxxOm टिप्पणियों में उल्लिखित, https://crbug.com/738739 देखें।

9-18-17 अद्यतन: https://bugs.chromium.org/p/chromium/issues/detail?id=769012 ऐसा लगता है कि यह तय किया जा रहा है!

10-19-17 अद्यतन: https://bugs.chromium.org/p/chromium/issues/detail?id=728377#c18 क्रोम 64 (वर्तमान में कनारी)

11-13-17 अद्यतन में काम कर के रूप में रिपोर्ट: अंतिम अद्यतन, क्रोम 63 में परीक्षण, मॉड्यूल अब काम कर रहे हैं। ध्यान दें कि यदि आपको एक्सटेंशन के पृष्ठभूमि पृष्ठ में कोई मॉड्यूल लोड करने की आवश्यकता है, तो आप manifest.json में स्क्रिप्ट्स प्रॉपर्टी के माध्यम से ऐसा नहीं कर सकते हैं, इसके बजाय पृष्ठ को background.html पर सेट करें, और स्क्रिप्ट टैग में टाइप मॉड्यूल निर्दिष्ट करें, और इससे बाईपास होगा प्रकट मुद्दा

Answer 2

यह स्थानीय फ़ाइलों को लोड करने के साथ एक बग हो सकता है। मुझे लगता है कि के लिए एक समाधान बनाने में कामयाब रहे, लेकिन आप अभी भी कंसोल में एक त्रुटि प्राप्त होगी और आप मूल मुद्दों के कारण के भीतर अन्य आयात बयान उपयोग नहीं कर सकते मुझे लगता है:

window.addEventListener('load', function() { 
 
    function appendModule(code) { 
 
     let url = URL.createObjectURL(new Blob([code], { type: 'text/javascript' })); // create url from code 
 

 
     let script = document.createElement('script'); 
 
     script.type = 'module'; 
 
     script.src = url; 
 
     document.head.appendChild(script); 
 
    } 
 

 
    let scripts = document.querySelectorAll('script'); 
 
    console.log(scripts); 
 
    for (let script of scripts) { 
 
     script.parentElement.removeChild(script); 
 
     if (script.getAttribute('type') !== 'module') continue; // found normal script 
 
     if (script.getAttribute('src') !== null) { 
 
      // load a file 
 
      var request = new XMLHttpRequest(); 
 
      request.open('GET', script.getAttribute('src') + '?_=' + Date.now(), true); 
 
      request.onload = function() { 
 
       if (this.status >= 200 && this.status < 400) { 
 
        // file loaded 
 
        appendModule(this.response); 
 
       } else { 
 
        // error loading file 
 
        console.error('Not able to load module:', script.getAttribute('src')); 
 
       } 
 
      }; 
 
      request.onerror = function() { 
 
       // error loading file 
 
       console.error('Not able to load module:', script.getAttribute('src')); 
 
      }; 
 
      request.send(); 
 
     } 
 
    } 
 
});

<script src="./script.js" type="module"></script>

में संक्षिप्त: आप स्क्रिप्ट सामग्री लोड करते हैं, सही प्रकार के साथ Blob बनाएं और इसे ObjectURL से लोड करें।