ブックマークレットとは、ブラウザのブックマークから起動できる簡易的なJavaScriptプログラムのことです。基本的な仕組みから作り方・使い方はもちろん、他の解説記事では意外と触れられていない安全性の注意点や、ブラウザ拡張機能との違いまで、初めての方にもわかりやすくまとめました。
ブックマークレットとは
ブックマークレットは、ブラウザのブックマーク(お気に入り)に登録しておき、クリック1つで起動できる小さなプログラムです。プログラムといっても専用のソフトをインストールする必要はなく、普段使っているブラウザの機能だけで動作します。表示中のページの見た目を変えたり、選択した文字列を検索したり、ページの情報を取得したりと、ブラウザ標準機能では足りない「かゆいところ」を補ってくれるのが特徴です。
仕組み:正体は「javascript:」から始まる1行のコード
通常のブックマークはURL欄に https://... のようなアドレスを登録しますが、ブックマークレットはここに javascript: から始まるコードを登録します。ブラウザは通常のURLと同じようにこれを「開こう」としますが、javascript: で始まる場合は新しいページへ移動する代わりに、続くコードをそのページ上でそのまま実行します。この仕組みを利用して、今見ているページに対して処理を行うのがブックマークレットです。
javascript:(function(){alert(document.title);})();
たとえばこのコードをブックマークレットとして登録して実行すると、今見ているページのタイトルがアラートで表示されます。function(){ ... }() という形で処理を1つの塊(無名関数)にまとめて即座に実行しているのがポイントで、この書き方によって複数行の処理も1行のURLとして登録できるようになっています。
ブラウザ拡張機能との違い
「ブラウザを便利にする」という点ではブラウザ拡張機能(Chrome拡張機能など)と役割が似ていますが、性質は大きく異なります。
| ブックマークレット | ブラウザ拡張機能 | |
|---|---|---|
| 導入方法 | ブックマークに登録するだけ | ストアからインストールが必要 |
| 動作するタイミング | クリックした瞬間だけ | 常駐・常時監視も可能 |
| 権限の広さ | そのページに対する処理に限定 | 閲覧履歴や他サイトへのアクセスなど広い権限を持てる |
| 向いている用途 | ちょっとした処理をその場で1回実行したい | 常に自動で動いてほしい機能 |
インストール不要ですぐ使える手軽さがブックマークレットの強みです。逆に、ページを閉じている間も動き続けるような処理や、複数ページをまたいだ常時監視のような用途にはブラウザ拡張機能の方が向いています。
安全性・使うときの注意点
ブックマークレットは今見ているページに対してJavaScriptで実質どんな操作でも行えてしまうため、便利さの裏側で注意しておきたい点もあります。
- 出所が分からないコードをそのまま登録しない:SNSなどで拡散されているコードの中には、入力されたパスワードやクレジットカード情報を外部に送信するような悪意あるものが紛れている可能性があります。コードの中身にざっと目を通し、意味の分からない難読化されたコードは避けましょう。
- ログイン中のページで実行する場合は特に注意する:ブックマークレットはクリックした時点で開いているページの権限で動くため、銀行やSNSなどにログインした状態で不審なコードを実行しないようにしましょう。
- 信頼できる配布元のものを使う:公式ドキュメントや実績のある解説記事など、出典が明確なコードであれば基本的に安全に利用できます。
ブックマークレットの使い方
基本的な流れはどのブラウザでも共通していますが、ブックマークバーの表示方法や登録画面の呼び出し方は環境によって異なります。
- ブラウザのブックマークバーを表示する
- 新しいブックマークを追加し、URL欄に
javascript:から始まるコードを貼り付けて保存する - 保存したブックマークをクリックして起動する
スマートフォンの場合はブックマークバーがそもそも表示されていないなど、パソコンとは異なるつまずきポイントがあります。より詳しい手順はデバイス・ブラウザ別に以下で解説しています。
ブックマークレットの作り方
既存のコードを使うだけでなく、自分でオリジナルのブックマークレットを作ることもできます。基本的な流れは、実現したい処理をJavaScriptで書き、それを javascript:(function(){ ... })(); の形に収めて1行のURLとして登録する、というものです。文字数の上限やエラーが起きたときの調べ方など、実際に手を動かして作る際のポイントは以下で詳しく解説しています。
→ ブックマークレットの作り方を詳しく見る(JavaScriptコードの書き方とサンプル集)
今すぐ使えるおすすめのブックマークレット
まずは1つ、安全に試せるシンプルな例を紹介します。ページ上で選択した文字列をそのままGoogle検索するブックマークレットです。
javascript:(function(){var t=window.getSelection().toString();if(t)window.open('https://www.google.com/search?q='+encodeURIComponent(t));})();
気になる単語を選択してこのブックマークレットをクリックするだけで、新しいタブでGoogle検索結果が開きます。このほかにも、動画のダウンロード補助やSNSの投稿一括削除、翻訳、広告非表示など、実用的なブックマークレットを用途別にまとめています。
よくある質問
ブックマークレットは危険ですか?
信頼できる配布元のコードを使う限り、基本的には安全です。ただし出所不明のコードをそのまま実行すると、入力情報を盗まれるなどのリスクがあるため、中身が確認できないコードは避けるのが安全です。
スマホでも使えますか?
iPhone(Safari)・Android(Chrome)のどちらでも利用できます。ただし、ブックマークバーの表示方法や登録手順がパソコンと異なるため、各デバイス別の使い方ページを参考にしてください。
ブラウザ拡張機能とどちらを使うべきですか?
用途次第です。ちょっとした処理をその場で1回だけ実行したいならブックマークレット、常に自動で動いていてほしい機能ならブラウザ拡張機能が向いています。
まとめ
ブックマークレットは、インストール不要でブラウザをちょっと便利にできる手軽な仕組みです。仕組みと安全に使うためのポイントを押さえたうえで、まずは今回紹介したシンプルな例から試してみてください。より詳しい作り方やデバイス別の手順は、各ページで解説しています。