Chrome拡張機能を自作して、Hagakureブログサイト(Scroll)に「ホームに戻るボタン」を表示させる方法

はじめに

以前からChromeの拡張機能の自作に興味があり、「いつか自分でも作ってみたいな」と考えていました。今回、ちょうど良い機会があったので、実際に簡単な拡張機能の作成に挑戦してみることにしました。

Chrome拡張機能って何？

Chrome拡張機能は、Google Chromeブラウザの機能を拡張するための追加プログラムで、ブラウザの機能を追加したり、既存の機能を強化したりできます。例えば、広告ブロッカー、翻訳ツールなどがよく使われていますね。

今回やってみたかったこと

Scrollのページをよく見てみると、Hagakure Programming塾のホームページに戻るボタンが見当たらなかったのです。(2025/06/19時点)

スクリーンショット 2025-06-19 0.01.02

これは拡張機能を自作して、自分専用の「ホームに戻る」ボタンを作ってみよう！と思いつき早速やってみました。

Chrome拡張機能の自作手順

拡張機能に必要なファイル

今回Chrome拡張機能を作成する上で、基本となるファイルは以下の２つです。

・manifest.json

拡張機能の「設計図」となるファイルで、拡張機能の名前、バージョン、権限などを定義します。これは必ず必要になります。

・content.js

Webページのフロントエンド（HTML、CSS、JavaScript）を操作するためのJavaScriptファイルです。ページの表示内容を変更したり、新しい要素を追加したりする際に使用します。

拡張機能の内容によっては他にもファイルが必要になることもありますが、今回の「ホームに戻る」ボタンの追加というシンプルな機能であれば、この２つだけで実装できました。
今回の拡張機能用にディレクトリを作成して、その中にこの２つのファイルを作成していきましょう。

スクリーンショット 2025-06-19 0.05.21

manifest.jsonの作成

manifest.jsonでは、拡張機能のメタデータ（名前、説明、バージョンなど）や、どのような権限が必要か、どのスクリプトを実行するかといった設定が記述されています。
複雑な処理をする場合には適切に権限設定を行わないと上手く動作しなかったりするようです。

今回作成したmanifest.jsonの中身は以下の様になります。

{
  "manifest_version": 3,
  "name": "Hagakure ScrollにHomeページへ戻るボタンを追加する拡張機能",
  "version": "1.0",
  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "matches": ["https://hagakurepgm.net/blog/*"],
      "js": ["content.js"]
    }
  ]
}

ここで特に重要なのは"permissions"と"content_scripts"です。
permissionsでは現在アクティブなタブを操作するために、"activeTab"を指定する必要があります。
content_scriptsでは拡張機能の動作を行うjavascriptのファイル名(content.js)と、動作を反映させる対象となるURL(https://hagakurepgm.net/blog/*)を定義しておく必要があります。今回はScrollのページに反映させるため"https://hagakurepgm.net/blog/*"としています。

content.jsの作成

content.jsはJavaScriptで記述されるファイルで、WebページのHTMLに直接アクセスして変更を加えることができます。既存のHTML要素を操作したり、新しいHTML要素を追加したりすることが可能なので、今回の目的である「ホームに戻る」ボタンの追加は、content.jsの中にHTML要素を追加するコードを記述することで実現しました。

今回作成したcontent.jsの中身は以下の様になります。

const homeButtonElement = document.createElement('div');
homeButtonElement.classList.add("header-buttons");
homeButtonElement.innerHTML = '<a href="https://hagakurepgm.net/" class="login-button"> <span class="button-text">ホームに戻る</span> <img src="/static/image/base/create_icon.a3fea3c473b9.png" alt="記事作成"> </a>';

const targetElement = document.getElementsByClassName("header-buttons")[0];

targetElement.insertAdjacentElement('beforebegin', homeButtonElement);

ここでは上から順に下記の動作を行うように記述しています。
1. "homeButtonElement"というdiv要素を新規作成
2. "homeButtonElement"にClass(header-buttons)を追加
3. "homeButtonElement"にホームに戻るボタンのHTMLコードを追加
4. 記事を書くボタンの要素を"targetElement"に代入
5. "targetElement"の直前に、"homeButtonElement"の要素を追加

ここで、"header-buttons"というクラス名や、ホームに戻るボタンのHTMLコードは、既存の記事を書くボタンのHTMLから流用しています。

Chrome拡張機能に追加

以下の手順でChromeブラウザの拡張機能に、今作成したものを追加します。

先ずはChromeブラウザを開き、アドレスバーに「chrome://extensions」と入力して拡張機能管理ページを開きます。

スクリーンショット 2025-06-18 23.56.33

次にページの右上にある「デベロッパーモード」のトグルをオンにします。

スクリーンショット 2025-06-18 23.59.21

画面左上にある「パッケージ化されていない拡張機能を読み込む」ボタンをクリックします。
表示されたフォルダ選択ダイアログで、今回作成したファイルが保存されているディレクトリを選択します。

スクリーンショット 2025-06-19 0.05.21

拡張機能が追加されたら、その拡張機能のトグルがオンになっていることを確認します。

スクリーンショット 2025-06-18 23.59.55

これで自作の拡張機能がChromeに読み込まれました。

動作確認

今回作成した拡張機能が正常に動作するか、Hagakureブログ(Scroll)のページを開いて確認してみましょう。

スクリーンショット 2025-06-19 0.01.42

画面上部、ヘッダーの真ん中にホームに戻るボタンが増えていることが確認できました。（レイアウトは考えずに作ったので、ど真ん中に入ってしまいましたが...笑）
実際にこのボタンをクリックすると、ホームページに戻ることができます。
今回、記事を書くボタンのクラス名やHTMLを流用しているため、同様なデザインでボタンが追加されています。
また、manifest.jsonの中で、"https://hagakurepgm.net/blog/*"とワイルドカードで指定してるため、各記事のページに飛んだとしても同様にホームに戻るボタンが表示されていることが確認できました。

スクリーンショット 2025-06-19 0.02.13

感想

意外と簡単！拡張機能作り

Chromeの拡張機能の自作って、なんだか難しそうに聞こえますよね。でも、実際にやってみたらちょっとしたものならパッと作れました。

今回は、「記事を書く」ボタンの横に「ホームに戻る」ボタンを足しただけですが、これだけでも「できた！」という達成感がありました。

JavaScriptの勉強にもなった！

今回の拡張機能の自作を通して、JavaScriptの良い勉強になりました。実現したいことを調べていく中で、結果的にjavascriptの書き方を学ぶことになりインプットとアウトプットを同時に行うことができました。

本やWebサイトからインプットするだけじゃなくて、実際に動くものを作りながら学ぶのが、一番頭に入りますね。JavaScriptを勉強したいけど、何をやりたいかが決まらないという人は、Chrome拡張機能の自作も選択肢に入れてもいいかもしれません。

でも、ちょっと怖い話も…

自分で作ってみて、ひとつ「これは危ないな…」と感じたことがありました。

それは、もし悪意を持った人が作った拡張機能をうっかり入れてしまうと、自分のブラウザ上に表示されるウェブサイトが勝手に書き換えられてしまう可能性があるということです。

例えば、

普段使ってるサイトのログイン画面が、そっくりな偽物に変わってしまって、パスワードを盗られてしまうとか。
見たくもない変な広告が、勝手に出てくるようになってしまうとか。
こっそり、あなたが見ている情報が盗まれてしまう、なんてことも…。

拡張機能を入れるということは、その拡張機能に「このウェブサイト、自由に見て、情報を保存したり、書き変えていいよ！」と許可を出すことと一緒なんだなと、今回強く実感しました。だから、便利そうに見えても、どこの誰が作ったか分からないような拡張機能は、絶対に入れない方がいいと思います。

まとめ

・Chrome拡張機能の自作は意外と簡単だった。
・JavaScriptのいい勉強になった。
・怪しい拡張機能を入れると危ないので注意が必要。

最後までお読みいただきありがとうございました！