【2020年版】ブックマークレットで外部ファイルをロードする方法

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

何に詰まったのか

ブックマークレットを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が提案されていましたので、こちらのサービスを利用してみました。

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')

最新ファイルを即配信する方法

ファイル更新してもjsdeliverにキャッシュされているため、なかなか最新のファイルが配信されません。最新ファイルを即配信したい場合は、以下URLにアクセスしてください。キャッシュ削除され最新ファイルが配信されます。

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

タイトルとURLをコピーしました