console importer

Importateur de consoles

Installation

Installez-le depuis le Chrome Web Store :

https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie

Usage

Ouvrez la console Chrome devtools, une fonction nommée $i pourrait être utilisée pour importer des ressources JavaScript et CSS.

 $i ( 'jquery' )

Importer une version spécifique :

 $i ( 'jquery@2' )

Vous pouvez également importer une URL de script valide :

 $i ( 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' )

CSS est également pris en charge :

 $i ( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' )

Importer le module ES

Le module ES a été largement pris en charge dans les navigateurs modernes. La méthode $i.esm peut être utile dans ce cas :

 d3 = await $i . esm ( 'd3' )

ou spécifiez une version :

 d3 = await $i . esm ( 'd3@7' )

L’avantage de cette approche est qu’aucune variable globale n’est ajoutée à la fenêtre, ce qui permet un meilleur contrôle sur l’étendue des effets secondaires. Pour plus de détails, consultez https://esm.run.

Dépannage

Q : $i ne fonctionne pas comme prévu

Certains sites Web comme Google Inbox utilisent déjà $i comme variable globale. Cette extension ne l'écrase pas.

Vous pouvez utiliser console.$i sur ces sites Web.

Q : $i ne parviens pas à importer les ressources

Sur certains sites Web comme GitHub, $i ne parviendra pas à importer les ressources. Les erreurs de la console peuvent ressembler à ceci :

 # js errors example
Refused to connect to ' https://api.cdnjs.com/libraries?search=jquery ' because it violates the following Content Security Policy directive:

# css errors example
Refused to load the stylesheet ' https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css ' because it violates the following Content Security Policy directive:

Cela est dû à la politique stricte de sécurité du contenu de ces sites Web. Pour plus d'informations, consultez le wiki Politique de sécurité du contenu (CSP)

Comment ça marche ?

• Si cela ressemble à un nom de bibliothèque JavaScript, comme jquery , essayez de le charger depuis cdnjs
• S'il a un numéro de version, comme jquery@2 , essayez de le charger depuis unpkg
• S'il s'agit d'une URL valide (CSS ou JS), chargez-la directement

Pour une utilisation avancée, il existe également deux fonctions $i.unpkg et $i.cdnjs qui peuvent être utilisées pour importer des ressources à partir d'un CDN spécifique.

Licence

MIT