広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

Androidスマホ版Chromeでブックマークレットを作成する方法

Google Chrome

「Google Chrome」のアイコン画像

この記事では、Androidスマホアプリ版「Google Chrome」でブックマークレット(JavaScript)を作成する方法を書きます。

Androidスマホ版Chromeでブックマークレットを作成する方法

ざっくり以下の手順です。まぁ記事を最後まで見て画像を見たほうが分かりやすいと思います。

  1. 登録したいブックマークレットをコピーしておく
  2. ブックマークに登録したことがない適当なサイトを開く
  3. 右上の三点ボタン(⋮)をタップ
  4. 星マーク(ブックマークに追加)ボタンをタップしてブックマーク保存
  5. 再度三点ボタン(⋮)をタップ
  6. 「ブックマーク」メニューをタップ
  7. 先ほど保存した適当なサイトのブックマーク横の三点ボタンをタップ
  8. 「編集」をタップ
  9. 好きな名前にしてURL欄にコピーしたブックマークレットを貼り付ける

PCブラウザ版と同様スマホアプリ版でもブックマークレットを作成して、かつ実行できます。通常はできないちょっと高度な操作(JavaScript)を実行できます。

同じGoogleアカウントでログインして同期していれば、PCで作成したブックマークレットが同じくスマホアプリ版にも表示されます。逆にスマホで作成してもPCブラウザ版に反映されます。

本記事は筆者が持っているAndroidスマホでの解説ですが、多分iPhone(iOS)でも一緒だとは思います。違ったらごめんなさい。

スマホ版Chromeでブックマークレットを作成する手順

JavaScriptコードをコピーする

スマホで一からブックマークレット(JavaScript)を書く人はまぁいないと思います。

使いたいコードが既に完成されている状態だと思います。ブログの紹介記事なのか、「Visual Studio Code」などのテキストエディターで事前に自作したブックマークレットなのかは分かりませんが。

とにかく使いたいブックマークレットをコピーします。

例えば、サンプルとしてbody要素の背景色(background)を黄色にするブックマークレットを貼っておきます。

javascript:document.body.style.background='yellow';void(0);
スマホアプリ版Chromeでブックマークレットをコピーする手順画像

念のための注意点ですが、他人の見ず知らずのブックマークレットを何の疑問ももたずに実行するのは危険です。JavaScriptは便利な反面悪いこともできてしまうので、悪意あるコードをうっかり実行しちゃわないようにしましょう。

今の時代ChatGPT(AI)があるので、JavaScript全く分からない方はコピペで危険じゃないか聞いてみるといいです。便利な時代になったもんです。

ブックマークを作成する

これまでブックマークしたことがないサイトを開いて、右上の三点ボタン(⋮)→星マーク(ブックマークに追加)ボタンをタップします。

スマホアプリ版「Chrome」で開いているサイトをブックマークに登録する手順画像

登録直後は下部にポップアップが表示されるのでタップして編集画面を開きます。

スマホアプリ版「Chrome」でブックマークした後の下部ポップアップ画像

好きな名前、URL欄にコピーしたブックマークレットを貼り付ける

「ブックマークを編集」ポップアップを開けたら、名前を好きなタイトルにします。

そのブックマークレットを実行する時に必要になるので、分かりやすいだけでなく自分がタイピングしやすい文字列かどうかも考慮こうりょしましょう。例えば上記のサンプルコードは背景色を黄色にするものなので「黄色」にしてみました。

スマホアプリ版「Chrome」のブックマークを編集ポップアップでブックマークレットを書き込む手順画像

URL欄に一番最初にコピーしたブックマークレット(JavaScriptコード)を貼り付けます。

ブックマークレットという専用の欄はなく、URLに書き込むのがミソです。

Chromeのブックマークは保存ボタンやチェックマークがないです。左上の「←」ボタンを押すと自動的に保存してくれています。

作成できたか確認

右上の三点ボタン→「ブックマーク」をタップします。

スマホアプリ版「Chrome」でブックマークページを開く手順画像

作成したブックマークレットがあります。

スマホアプリ版「Chrome」で作成したブックマークレット画像

ポイントとしてここからタップしても実行してくれません。

Chromeはブックマークページからの実行はどういうわけか反応してくれない仕様になっています。

実行方法は以下記事を参考にしてみてください。

感想

以上、Androidスマホアプリ版「Google Chrome」でブックマークレット(JavaScript)を作成する方法でした。

とはいえ、僕はあんまりスマホアプリ版で実行したいブックマークレットはないです。

無理やり疑似開発者ツールを開く「Eruda」くらいかなと思うんですが、それすらも知識として知っているだけで使ってはないです。皆さんが使っているブックマークレットで便利なのあったら知りたいですね。

余談ですが、Firefox版も書いています。

2025年8月6日Google Chrome

Posted by ナポリタン寿司