GitHub Gist に置いた Javascript をブックマークレットとして実行する

スポンサーリンク

普通に、document で読み込んだら使えませんし。

"Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec."

ちょっとしたコードをシェアするのにGistは便利ですが、HTMLとしてそのままブラウザに表示したり、JSONとして利用するには少々難があります。レスポンスヘッダのContent-Typeがtext/plain固定なので、Rawデータにアクセスしてもソース表示に。

👉 GistのHTMLを直接表示する方法 - Qiita 

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

禁断の eval() 使います。

👉 eval() - JavaScript | MDN 


(
  () => {
    fetch('https://gist.githubusercontent.com/path/to/raw/script.js')
      .then(response => response.text())
      .then(script => eval(script))
  }
)();

通信部分は Future な Promise でシンプルに書くことができます。

👉 Fetch の使用 - Web API | MDN 

思ってたより良い進化をしてる javascript に驚きました。

まずは、一つの Gist を書き換えながら、ブックマークをポチポチしながら作りますか。

おまけ

ついでに、Gist の URL をまとめておきます。


[top]
https://{main_host}/{user_id}/{gist_id}

[edit] *
https://{main_host}/{user_id}/{gist_id}/edit

[raw latest] *
https://{raw_host}/{user_id}/{gist_id}/raw/[{file_name}]

[raw permanent]
https://{raw_host}/{user_id}/{gist_id}/raw/{revision_id}/[{file_name}]

そのうちまた変わるのでしょうがね。

👉 iPhone Android アプリ横断検索 
👉 Google「Closure Compiler」 (クロージャコンパイラ) の使い方