Console Importer(控制台导入器) v2.1.0 Chrome扩展插件

Console Importer插件是一款方便开发者从 Chrome 控制台导入 JS 和 CSS 资源的工具，欢迎大家前来下载使用。

源代码：

https://github.com/pd4d10/console-importer

使用方法：

打开 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 导入资源。

插件安装方法

方法一：.crx文件格式插件安装

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入：chrome://extensions/

3.找到自己已经下载好的Chrome离线安装文件xxx.crx，然后将其从资源管理器中拖动到Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。

4.松开鼠标就可以把当前正在拖动的插件安装到谷歌浏览器中去，但是谷歌考虑用户的安全隐私，在用户松开鼠标后还会给予用户一个确认安装的提示。

5.用户这时候只需要点击添加按钮就可以把该离线Chrome插件安装到谷歌浏览器中去，安装成功以后该插件会立即显示在浏览器右上角（如果有插件按钮的话），如果没有插件按钮的话，用户还可以通过Chrome扩展管理器找到已经安装的插件。

方法二：文件夹格式插件安装

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序。

3.勾选开发者模式，点击加载已解压的扩展程序，将文件夹选择即可安装插件。

如果你在安装过程中出现下图中的错误程序包无效 CRX_HEADER_INVALID

可以参考：超详细的Chrome 浏览器/浏览器插件安装教程(全方法) 一文解决