console importer

控制台导入器

安装

从 Chrome 网上应用店安装：

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

用法

打开Chrome devtools控制台，可以使用名为$i的函数导入JavaScript和CSS资源。

 $i ( 'jquery' )

导入特定版本：

 $i ( 'jquery@2' )

此外，您还可以导入有效的脚本 URL：

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

CSS 也受支持：

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

导入ES模块

ES模块已在现代浏览器中得到广泛支持。 $i.esm方法在这种情况下很有用：

 d3 = await $i . esm ( 'd3' )

或指定版本：

 d3 = await $i . esm ( 'd3@7' )

这种方法的优点是没有向窗口添加全局变量，这可以更好地控制副作用的范围。有关更多详细信息，请参阅 https://esm.run。

故障排除

问： $i没有按预期工作

一些网站（例如 Google Inbox）已经将$i用作全局变量。此扩展不会覆盖它。

您可以在这些网站上使用console.$i 。

Q: $i导入资源失败

在某些网站（例如 GitHub）上， $i将无法导入资源。控制台错误可能如下：

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

这是因为这些网站严格的内容安全政策。有关更多信息，请参阅内容安全策略 (CSP) wiki

它是如何运作的？

• 如果它像 JavaScript 库名称，例如jquery ，请尝试从 cdnjs 加载它
• 如果它有版本号，例如jquery@2 ，请尝试从 unpkg 加载它
• 如果是有效的URL（CSS或JS），则直接加载

对于高级使用，还有两个函数$i.unpkg和$i.cdnjs可用于从特定 CDN 导入资源。

执照

麻省理工学院