Console Importer插件是一款方便開發(fā)者從 Chrome 控制臺(tái)導(dǎo)入 JS 和 CSS 資源的工具，歡迎大家前來下載使用。

源代碼：

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

使用方法：

打開 Chrome devtools 控制臺(tái)，一個(gè)名為 $i 的函數(shù)可用于導(dǎo)入 JavaScript 和 CSS 資源。

$i('jquery')

導(dǎo)入特定版本：

$i('jquery@2')

此外，您可以導(dǎo)入有效的腳本 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')

導(dǎo)入 ES 模塊

ES 模塊已在現(xiàn)代瀏覽器中得到廣泛支持。 $i.esm 方法在這種情況下很有用：

d3 = 等待 $i.esm('d3')

或指定一個(gè)版本：

d3 = 等待 $i.esm('d3@7')

這種方法的優(yōu)點(diǎn)是不會(huì)向窗口添加全局變量，從而可以更好地控制副作用的范圍。有關(guān)詳細(xì)信息，請(qǐng)參閱 https://esm.run。

故障排除

問：$i 沒有按預(yù)期工作

某些網(wǎng)站（例如 Google Inbox）已經(jīng)將 $i 用作全局變量。此擴(kuò)展不會(huì)覆蓋它。

您可以在這些網(wǎng)站上使用 console.$i。

Q: $i 導(dǎo)入資源失敗

在 GitHub 等一些網(wǎng)站上，$i 將無(wú)法導(dǎo)入資源。控制臺(tái)錯(cuò)誤可能如下所示：

# js 錯(cuò)誤示例

拒絕連接到“https://api.cdnjs.com/libraries?search=jquery”，因?yàn)樗`反了以下內(nèi)容安全策略指令：

# CSS 錯(cuò)誤示例

拒絕加載樣式表“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”，因?yàn)樗`反了以下內(nèi)容安全策略指令：

這是因?yàn)檫@些網(wǎng)站有嚴(yán)格的內(nèi)容安全政策。有關(guān)詳細(xì)信息，請(qǐng)參閱內(nèi)容安全策略 (CSP) wiki

它是如何工作的？

如果它像一個(gè) JavaScript 庫(kù)名稱，如 jquery，請(qǐng)嘗試從 cdnjs 加載它

如果它有版本號(hào)，比如 jquery@2，嘗試從 unpkg 加載它

如果是有效的 URL（CSS 或 JS），直接加載

對(duì)于高級(jí)使用，還有兩個(gè)函數(shù) $i.unpkg 和 $i.cdnjs 可用于從特定 CDN 導(dǎo)入資源。

插件安裝方法

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

1.首先用戶點(diǎn)擊谷歌瀏覽器右上角的自定義及控制按鈕，在下拉框中選擇設(shè)置。

2.在打開的谷歌瀏覽器的擴(kuò)展管理器最左側(cè)選擇擴(kuò)展程序或直接輸入：chrome://extensions/

3.找到自己已經(jīng)下載好的Chrome離線安裝文件xxx.crx，然后將其從資源管理器中拖動(dòng)到Chrome的擴(kuò)展管理界面中，這時(shí)候用戶會(huì)發(fā)現(xiàn)在擴(kuò)展管理器的中央部分中會(huì)多出一個(gè)”拖動(dòng)以安裝“的插件按鈕。

4.松開鼠標(biāo)就可以把當(dāng)前正在拖動(dòng)的插件安裝到谷歌瀏覽器中去，但是谷歌考慮用戶的安全隱私，在用戶松開鼠標(biāo)后還會(huì)給予用戶一個(gè)確認(rèn)安裝的提示。

5.用戶這時(shí)候只需要點(diǎn)擊添加按鈕就可以把該離線Chrome插件安裝到谷歌瀏覽器中去，安裝成功以后該插件會(huì)立即顯示在瀏覽器右上角（如果有插件按鈕的話），如果沒有插件按鈕的話，用戶還可以通過Chrome擴(kuò)展管理器找到已經(jīng)安裝的插件。

方法二：文件夾格式插件安裝

1.首先用戶點(diǎn)擊谷歌瀏覽器右上角的自定義及控制按鈕，在下拉框中選擇設(shè)置。

2.在打開的谷歌瀏覽器的擴(kuò)展管理器最左側(cè)選擇擴(kuò)展程序。

3.勾選開發(fā)者模式，點(diǎn)擊加載已解壓的擴(kuò)展程序，將文件夾選擇即可安裝插件。

如果你在安裝過程中出現(xiàn)下圖中的錯(cuò)誤程序包無(wú)效 CRX_HEADER_INVALID

可以參考：超詳細(xì)的Chrome 瀏覽器/瀏覽器插件安裝教程(全方法) 一文解決