pd4d10 / console-importer Goto Github PK

View Code? Open in Web Editor NEW

857.0 11.0 58.0 2.97 MB

Easily import JS and CSS resources from Chrome console.

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

License: MIT License

HTML 10.01% TypeScript 89.99%

console chrome-extension resources javascript css browser-extension

console-importer's Introduction

Console Importer

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')

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.

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:

# 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?

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

console-importer's People

Contributors

Stargazers

Watchers

console-importer's Issues

microsoft edge 扩展商店什么时候上架？ console-importer

https://microsoftedge.microsoft.com/addons/search/console-importer?hl=zh-CN

怎么解决不同ECMAScript标准库的源码和当前浏览器兼容的呢

Bug Report | `Faker` library path is outdated.

Hi, i love this library!
I'm happy to report a bug 😄
I found that Faker library path is outdated.

Minimal reproduction code

run $i('Faker')
see the download path of logs.

console importer installs Faker v3.1.0 (https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js).
But latest Faker version is 7.4.0 (https://github.com/faker-js/faker/releases)

I'm afraid if you know, Faker repository has been replaced from Marak to Fakejs Community.
details below.
https://fakerjs.dev/about/announcements/2022-01-14.html#i-heard-something-happened-what-s-the-tldr

I'm looking forward to fixing it 👍

‘$i('jquery')’ is success，but ‘$i('axios')‘ is failure

$i('jquery') is success

$i('jquery')
importer.js:2 [$i]: Searching for jquery, please be patient...
undefined
importer.js:2 [$i]: jquery is loading, please be patient...
importer.js:2 [$i]: jquery(https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js) is loaded.

$i('axios') is failure

$i('axios')
importer.js:2 [$i]: Searching for axios, please be patient...
undefined
7098146254491746334:1
Access to fetch at 'https://api.cdnjs.com/libraries?search=axios' from origin 'https://juejin.cn' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
monitors.3.6.34.cn.js:1

GET https://api.cdnjs.com/libraries?search=axios net::ERR_FAILED 502
importer.js:2 [$i]: There appears to be some trouble with your network. If you think this is a bug, please report an issue:
importer.js:2 [$i]: https://github.com/pd4d10/console-importer/issues

服务是挂了吗？

不能加载包

Can't get a request. Just say it's a network problem

[$i]: There appears to be some trouble with your network. If you think this is a bug, please report an issue:

provide a console-importer gif show

$i('axios');
$i('crypto-js');

axios.get('https://placekitten.com/200/300', { responseType: 'arraybuffer' })
  .then((response) => {
    // Convert the ArrayBuffer to WordArray
    const wordArray = CryptoJS.lib.WordArray.create(response.data);
    // Convert the WordArray to a base64 string
    const base64String = CryptoJS.enc.Base64.stringify(wordArray);
    const imageUrl = `data:image/jpeg;base64,${base64String}`; // Assuming the image is a JPEG
    // Create a new image and assign the base64 string as the source
    const image = new Image();
    image.onload = function() {
      // Once the image is loaded, use its dimensions to set the console padding
      const style = [
        'font-size: 1px;',
        `padding: ${this.naturalHeight / 2}px ${this.naturalWidth / 2}px;`, // Divide by 2 because of the 1px font-size trick
        `background: url(${imageUrl}) no-repeat;`,
        'background-size: contain;'
      ].join(' ');
      console.log('%c ', style);
    };
    image.src = imageUrl;
  })
  .catch((error) => {
    console.error('Error fetching or encoding the image:', error);
  });

from https://github.com/zhaoolee/ChromeAppHeroes/blob/master/page/121-console-importer-2023-12-20.md

get slugify failed

能自选cdn库吗？或者多提供几个

https://api.cdnjs.com/libraries 经常连接问题

can i set npm registry ?

能否支持 Firefox

如题, 能否支持 Firefox

Will console-importer support return a promise?

Sometime need hold wait before import success, like this.

async () => {
  await $i('jszip')
}

How to uninstall resources?

package loaded but no way to find it

Something wrong with what I did?

Import local ES6 module

The ability to import our own local ES6 modules would be very useful. :)

support chrome 87 or lower version

The mainfest.json version is 3, it just support 88 or higher version.

Uncaught ReferenceError: $i is not defined

CSP 网站安全策略 load 资源失败

对于有的网站是有CSP安全策略的，这时候加载外部资料是有限制的，加载不成功的

比如 github 网站

可以想想办法，规避这个限制

doesn't initialize in empty/blank tabs

My home page -- where I do most of my console'ing -- is about:blank. I also use this extension for blank new tabs: https://chrome.google.com/webstore/detail/blank-new-tab-page/jonikckfpolfcdcgdficelkfffkloemh

In both cases, $i is not getting created, only for "real" web sites. :(

script-src-elem

Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' *.xitu.io *.juejin.im *.baidu.com *.google-analytics.com *.meiqia.com dn-growing.qbox.me *.growingio.com *.guard.qcloud.com *.gtimg.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Don't pollute the global namespace

Right now when using $i it puts the result (when finished) on the global namespace - the window.

I'm proposing that instead it returns a promise (due to the async nature of import) that evaluates with the result of executing the desired imported module.

Something like this

$i('lodash').then(_ => _.toNumber(null));

This could also be used with top-level await like this

const _ = await $i('lodash');
_.toNumber(null);

This is gives you the control whether or not you want to pollute the global namespace and how.
Plus, now you don't have to know how the internal module exposes itself ($, _, etc.)