Chrome developer toolsのconsoleでnpmパッケージを試したい

概要

新しくnpmパッケージを追加する前に、さくっとchrome developer toolsのconsoleで試したいと思いました(わざわざローカル環境にnpmインストールして実行するのはめんどくさい)

なので、chromeにスクリプトを貼り付けて実行する方法を調べてみました。

この記事にかくこと

chrome developer toolsのconsoleでnpmパッケージを使用する方法

この記事にかかないこと

chrome developer toolsの基本的な説明、使い方

検証条件

対象ブラウザ: Chrome
対象npmパッケージ: js-cookie
対象npmパッケージのURL: https://github.com/js-cookie/js-cookie
(外部サイトから読み込む)対象のjavascript:

実行するソースコード:
js-cookieを読み込んだあと、
Cookiesという変数を参照して、メソッドを実行します。

Cookieにキーと値を追加できたら成功です！

// HTMLタグにscriptタグを追加して、外部サイトからjavascriptを読み込む
var url = 'https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js'
script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);

Cookies.set('aaaa', '-1', {
  expires: new Date('2022/4/8 12:26:00'),
  path: '/',
  secure: true
});

検証結果

うまくいきました！

対象サイト1: https://www.yahoo.co.jp/

Content Security Policyに関するエラーが表示される場合

サイトのサーバー側でContent Security Policyが設定されていて、外部サイトのjavascriptの読み込みを制限している場合があります。その場合、下記のようなエラーが表示されます。

Refused to load the script 'https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js' because it violates the following Content Security Policy directive: "script-src github.githubassets.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

対象サイト2: https://github.com/js-cookie/js-cookie

上記のようなエラーが出る場合は、chrome拡張機能をONにしてContent Security Policyをすべてdisabledにします。
※セキュリティ上、普段は拡張機能をOFFにしておきましょう

うまくいきました！

参考: