Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pd4d10/console-importer
Easily import JS and CSS resources from Chrome console.
https://github.com/pd4d10/console-importer
browser-extension chrome-extension console css javascript resources
Last synced: about 1 month ago
JSON representation
Easily import JS and CSS resources from Chrome console.
- Host: GitHub
- URL: https://github.com/pd4d10/console-importer
- Owner: pd4d10
- License: mit
- Created: 2017-02-18T07:46:14.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2023-04-19T14:53:21.000Z (over 1 year ago)
- Last Synced: 2024-06-01T07:34:06.151Z (3 months ago)
- Topics: browser-extension, chrome-extension, console, css, javascript, resources
- Language: TypeScript
- Homepage: https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie
- Size: 2.9 MB
- Stars: 839
- Watchers: 11
- Forks: 57
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - pd4d10/console-importer - Easily import JS and CSS resources from Chrome console. (TypeScript)
README
# Console Importer
[](https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie)
[](https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie)
[](https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie)
## 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.
```js
$i('jquery')
```
Import specific version:
```js
$i('jquery@2')
```
Also, you can import a valid script URL:
```js
$i('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js')
```
CSS is supported, too:
```js
$i('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css')
```
### Import ES Module
ES module has been widely supported in modern browsers. `$i.esm` method can be useful in this case:
```js
d3 = await $i.esm('d3')
```
or specify a version:
```js
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.
## 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 errors may be like follows:
```sh
# 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
## 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