【効率化】Bookmarklet(ブックマークレット)の作り方

プログラミング

この記事はブラウザで利用できるBookmarklet(ブックマークレット)の作り方について書いてます。

ブックマークレットって何?という方に簡単に説明すると、ブックマークに簡単なjavascriptプログラムを仕込んでおいて、クリックするとそのプログラムが発動するという感じです。

よくわからないかもなので、作り方と合わせて実例を1つ紹介します!




Bookmarklet(ブックマークレット)の作り方

ではブックマークレットの作り方について解説します。

まず、適当にひらいているページをブックマークしてください。

で、そのブックマークを右クリックして「編集」を選択すると↓のように、名前とURLを編集できるようになります。

「名前」には、自分がわかりやすい名前を付けて、URLにはjavascriptのコードを記入します。

ちなみにコードは「javascript:」ではじめてください。

といっても、使いどころが良くわかないという人のために、1つ例を紹介します。

Bookmarklet(ブックマークレット)の活用事例

なんでもよかったんですが、今回の例ではgithubをvscodeでみるためのブックマークレットを紹介します。

最近知ったのですが、githubのURLから「com」の部分を「dev」に変更するとvscodeで見る事ができるようになるんですよね。

これ、以外と便利なんですが、いちいち書き換えるのは面倒なのでブックマークレットを作成しました。

ちなみにコードは以下の通りです。

javascript:(function (){if(location.href.match(/com/)){let e=location.href.replace("com","dev");window.location.href=e}else{let e=location.href.replace("dev","com");window.location.href=e}})();

先ほどのブックマークレットの作り方で紹介したように、ブックマークの編集から「URL」をこのコードに書き換えれば使用できます。

よかったら使ってください!