Console Importer插件是一款方便开发者从 Chrome 控制台导入 JS 和 CSS 资源的工具，使用方法：打开 Chrome devtools 控制台，一个名为 $i 的函数可用于导入 JavaScript 和 CSS 资源
使用方法
打开 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 = 等待 $i.esm('d3')
或指定一个版本：
d3 = 等待 $i.esm('d3@7')
这种方法的优点是不会向窗口添加全局变量，从而可以更好地控制副作用的范围。有关详细信息，请参阅 https://esm.run。
故障排除
问：$i 没有按预期工作
某些网站（例如 Google Inbox）已经将 $i 用作全局变量。此扩展不会覆盖它。
您可以在这些网站上使用 console.$i。
Q: $i 导入资源失败
在 GitHub 等一些网站上，$i 将无法导入资源。控制台错误可能如下所示：
# js 错误示例
拒绝连接到“https://api.cdnjs.com/libraries?search=jquery”，因为它违反了以下内容安全策略指令：
# CSS 错误示例
拒绝加载样式表“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”，因为它违反了以下内容安全策略指令：
这是因为这些网站有严格的内容安全政策。有关详细信息，请参阅内容安全策略 (CSP) wiki
它是如何工作的？
如果它像一个 JavaScript 库名称，如 jquery，请尝试从 cdnjs 加载它
如果它有版本号，比如 jquery@2，尝试从 unpkg 加载它
如果是有效的 URL（CSS 或 JS），直接加载
对于高级使用，还有两个函数 $i.unpkg 和 $i.cdnjs 可用于从特定 CDN 导入资源。
插件安装说明
1、在打开的谷歌浏览器的扩展管理器
就是点击最左侧的三个点，在弹出的菜单中选择【更多工具】——【扩展程序】
或者你可以在地址栏中直接输入chrome://extensions/
2、进入扩展程序页面后将开发者模式打勾
3、最后将解压出来的crx文件拖入到浏览器中即可安装添加
4、如果出现无法添加到个人目录中的情况，可以将crx文件右键，然后选择【管理员取得所有权】，再尝试重新安装
5、安装好后即可使用
扫码关注公众号，发【识别码】获取
