パソコンでブックマークレットを使うための、Chrome・Edge・Firefoxそれぞれの登録方法をまとめました。特にEdgeはChromeと同じ手順では登録できないことがあり、つまずく人が多いポイントです。「動かない」ときの原因と対処法もあわせて解説します。
ブックマークレットの仕組みや安全に使うための注意点は、まずブックマークレットとは？作り方・使い方からおすすめ活用例まで完全ガイドをご覧ください。
Chromeでの登録方法
1. ブックマークバーを表示する
ブックマークバーが表示されていない場合は、Ctrl + Shift + B キーを押すか、右上のメニューから「ブックマークとリスト」→「ブックマークバーを表示」で表示できます。
2. ドラッグ&ドロップで登録する
ブックマークレットの配布リンクがある場合は、そのリンクをそのままブックマークバーへドラッグ&ドロップするだけで登録できます。
3. 手入力（URL欄に直接貼り付け）で登録する
コードをコピーして自分で登録したい場合は、以下の手順で行います。
- 適当なページをいったんブックマークバーに追加する
- 追加したブックマークを右クリックして「編集」を選択する
- 「URL」欄の内容をすべて削除し、
javascript:から始まるコードを貼り付けて保存する
Edgeでの登録方法（Chromeと同じ手順では動かないので注意）
EdgeはChromiumベースでChromeとよく似ていますが、ブックマークレットの登録に関してはアドレスバーへ直接javascript:コードを貼り付けても登録できないという制限があります。ブックマークレットの配布リンクをドラッグ&ドロップしても、通常のリンクとして保存されてしまい正しく動かないことがあります。
回避策：先に普通のページをブックマークしてからURLを書き換える
- 今開いている適当なページを、通常の手順でお気に入り（ブックマーク）に追加する
- お気に入りバーに追加されたそのブックマークを右クリックし、「編集」を選択する
- 編集画面の「URL」欄の内容をすべて削除し、
javascript:から始まるコードを貼り付けて保存する
アドレスバーに直接ではなく、あくまで「既存のブックマークの編集画面」からURLを書き換えるのがポイントです。
補足：DevToolsの「スニペット」機能という選択肢
Edgeには開発者向けに、ブックマークレットの代替となる「スニペット」機能もあります。F12キーで開発者ツールを開き、「ソース」タブの「スニペット」からコードを登録しておくと、いつでも実行できます。ブックマークバーを圧迫したくない場合や、コードが長くURLとして登録しづらい場合の選択肢として覚えておくと便利です。
Firefoxでの登録方法
FirefoxはChromeと同様の手順で登録できます。ブックマークレットの配布リンクをブックマークツールバーへドラッグ&ドロップするか、適当なページをブックマークしてからプロパティ画面でURLをjavascript:コードに書き換えれば登録完了です。
ブックマークレットが動かないときの原因と対処法
- コード内の引用符が正しく閉じていない：ブラウザがブックマークの編集画面でコードの一部を書き換えてしまい、
'や"の対応が崩れることがあります。貼り付けた後にURL欄の内容を確認しましょう。 - コードが長すぎて途中で切れている：ブラウザによってはURLとして扱える文字数に上限があり、長いコードは途中で切り詰められることがあります。文字数を減らす工夫はブックマークレットの作り方で解説しています。
- ページ側のセキュリティ設定で実行がブロックされている：拡張機能ストアの管理ページなど、一部の特殊なページではセキュリティ上の制約により
javascript:コードの実行が許可されていない場合があります。別の通常のWebページで試してみてください。 - 他の拡張機能と干渉している：同じページを操作する拡張機能を一時的に無効化してから試してみてください。
スマホでブックマークレットを使いたい場合
スマートフォンではブックマークバーの表示方法自体がパソコンと異なります。デバイス別に手順をまとめています。
まとめ
Chrome・Firefoxはドラッグ&ドロップや通常のブックマーク編集画面で問題なく登録できますが、Edgeだけは「先に普通のページをブックマークしてからURLを書き換える」という一手間が必要です。動かないときは、コード内の引用符の崩れや文字数オーバーをまず疑ってみてください。
