Install it from Chrome Web Store:
Open Chrome devtools console, a function named
Import specific version:
Also, you can import a valid script URL:
CSS is supported, too:
Import ES Module
ES module has been widely supported in modern browsers.
$i.esm method can be useful in this case:
d3 = await $i.esm('d3')
or specify a version:
d3 = await $i.esm('d3@7')
The advantage of this approach is that no global variables are added to the window, which allows better control over the scope of side effects. For more details, see https://esm.run.
$i doesn't work as expected
Some websites like Google Inbox already have
$i used as a global variable. This extension doesn't overwrite it.
You can use
console.$i on these websites.
$i fail to import resources
On some websites like GitHub,
$i will fail to import resources. Console errors may be like follows:
# 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:
It is because of strict Content Security Policy of these websites. For more information, see Content Security Policy (CSP) wiki
How does it work?
jquery, try to load it from cdnjs
- If it has version number, like
jquery@2, try to load it from unpkg
- If it is a valid URL(CSS or JS), load it directly
For advanced use, there are also two functions
$i.cdnjs which could be used to import resources from specific CDN.