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 を参照してください。

トラブルシューティング

Q: $i期待どおりに動作しません

Google Inbox などの一部の Web サイトでは、すでに$iグローバル変数として使用されています。この拡張機能は上書きしません。

これらの Web サイトではconsole.$iを使用できます。

Q: $iリソースのインポートに失敗します

GitHub などの一部の Web サイトでは、 $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:

これは、これらの Web サイトの厳格なコンテンツ セキュリティ ポリシーによるものです。詳細については、コンテンツ セキュリティ ポリシー (CSP) wiki を参照してください。

どのように機能するのでしょうか?

• jqueryなどの JavaScript lib 名に似ている場合は、 cdnjs からロードしてみてください。
• jquery@2のようにバージョン番号がある場合は、unpkg からロードしてみてください。
• 有効なURL(CSSまたはJS)の場合は、直接ロードします。

高度な使用のために、特定の CDN からリソースをインポートするために使用できる 2 つの関数$i.unpkgと$i.cdnjsもあります。

ライセンス

マサチューセッツ工科大学