pd4d10 / console-importer

Easily import JS and CSS resources from Chrome console.

Hi there 👋

console-importer's Issues

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

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

1. run $i('Faker')
2. 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 👍

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

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.

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

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

比如 github 网站

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

Will console-importer support return a promise?

Sometime need hold wait before import success, like this.

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

package loaded but no way to find it

Something wrong with what I did?

support chrome 87 or lower version

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

Import local ES6 module

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

能否支持 Firefox

如题, 能否支持 Firefox

How to uninstall resources?

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

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

Uncaught ReferenceError: $i is not defined

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

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

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. :(

‘$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

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

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

get slugify failed

服务是挂了吗？

不能加载包