【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にサービスが終了してしまったようです。代替サービスとしてjsDeliverが提案されていましたので、こちらのサービスを利用してみました。

jsDeliverの利用方法

jsDeliverのこちらのページにアクセスすると以下画面が表示されます。ブックマークレットの外部ファイルURLを貼り付けてURL変換します。

貼り付けるURLはrawgitにする必要があります。raw.githubusercontent.com → rawgit.com に置換してから貼り付けてください。するとjsDeliverのURLが表示されます。

変換されたURLをブックマークレットで外部ロードするファイルとして指定してください。

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

これで解決となります。

雑記
スポンサーリンク
rs-techdev
タイトルとURLをコピーしました