ブックマークレットとしてGithubファイルをロードする方法（外部ファイル参照）

以下の記事で紹介しているブックマークレットを作成している際に、Githubファイルを外部ファイルをロードするところで詰まったので、解決方法を記事に残します。

何に詰まったのか

ブックマークレットをGithubに登録して、外部ファイルロードを行いました。しかし、起動しない。

javascript:(function(url){s=document.createElement('script');s.src=url;document.body.appendChild(s);})('https://raw.githubusercontent.com/rs-techdev/Bookmarklet/master/rakuten-calc.js')

デベロッパーツールのログを確認したところ以下のエラーが出ていました。

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://raw.githubusercontent.com/rs-techdev/Bookmarklet/master/rakuten-calc.js with MIME type text/plain.

MIME typeがtext/plainになってしまっているのでダメなようです。ブックマークレットとして読み込むには、text/htmlである必要があります。

解決方法

色々ググってみるとRawGitと呼ばれるものを使用すればよいことがわかりました。が・・・、2019/10にサービスが終了してしまったようです。代替サービスとしてjsDelivrが提案されていましたので、こちらのサービスを利用してみました。

RawGit

RawGit served raw files directly from GitHub with proper Content-Type headers.

jsDelivr - A free, fast, and reliable CDN for JS and Open Source

Optimized for JS and ESM delivery from npm and GitHub. Works with all web formats. Serving more than 150 billion requests per month.

jsDelivrの利用方法

まずは、外部ロードしたいファイルのGithubのURL(raw)を準備します。

https://raw.githubusercontent.com/rs-techdev/Bookmarklet/master/amazon-calc.js

次にURLを以下を以下のように変更します。変更部分は色付けをしています。(jsdeliver ではなく jsdelivr です）

https://cdn.jsdelivr.net/gh/rs-techdev/Bookmarklet@master/rakuten-calc.js

以上で終了です。非常に簡単です。

上記URLにアクセスするとMIME tyepeがtext/htmlでファイルロードされます。ブックマークレットを外部ファイルとしてロードすることができます。

javascript:(function(url){s=document.createElement('script');s.src=url;document.body.appendChild(s);})('https://cdn.jsdelivr.net/gh/rs-techdev/Bookmarklet@master/rakuten-calc.js')