Easily import JS and CSS resources from Chrome console.
Switch branches/tags
Clone or download
Latest commit 473ddbd Jun 30, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app Format with prettier Jan 27, 2018
assets Remove CSS gif Feb 28, 2017
test Fix tests Jul 30, 2017
.babelrc Test environment with Karma Jul 26, 2017
.gitignore Test environment with Karma Jul 26, 2017
.prettierrc Format with prettier Jan 27, 2018
.travis.yml Fix CI Jul 30, 2017
LICENSE Update LICENSE Jun 30, 2018
README.md Update README Jul 30, 2017
gulpfile.babel.js Use rollup as bundler Jul 18, 2017
karma.conf.js Add more tests Jul 30, 2017
package.json Format with prettier Jan 27, 2018
yarn.lock Format with prettier Jan 27, 2018

README.md

Console Importer

Build Status codecov Chrome Web Store Chrome Web Store Chrome Web Store

Demo

Installation

Install it from Chrome Web Store:

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

Usage

Open Chrome devtools console, a function named $i could be used to import JavaScript and CSS resources.

$i('jquery')

Import specific version:

$i('jquery@2')

Also, you can import a valid script URL:

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

CSS is supported, too:

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

Trouble shooting

Q: $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.

Q: $i fail to import resources

On some websites like GitHub, $i will fail to import resources. Console warning may be like follows:

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: "style-src 'unsafe-inline' assets-cdn.github.com".

It is because of strict Content Security Policy of these websites. For more information, see Content Security Policy (CSP) wiki

How does it work?

  • If it is like a JavaScript lib name, like 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.unpkg and $i.cdnjs which could be used to import resources from specific CDN.

License

MIT