ブラウザ拡張機能とは

ブラウザ拡張機能とは？

「いつものブラウザ」を、自分専用ツールに変える技術です。

Webサイトを見ていて、

この操作、毎回面倒だな…
このページ、もっと見やすくしたい
この情報だけ自動抽出したい

と思ったことはありませんか？

実は、ブラウザ拡張機能を使うと、普段使っているブラウザそのものを、自分専用ツールへ進化させることができます。

しかも、主に使う技術は：

HTML
CSS
JavaScript

です。

つまり、普段のフロントエンド技術で開発できます。

ブラウザ拡張機能とは、Chrome や Edge などのブラウザに、後付けで機能を追加できるものです。

例えば：

広告ブロック
翻訳
ダークモード
パスワード管理
ChatGPT補助
Webスクレイピング
UI改善

など。

普段何気なく使っている便利機能の多くは、実は拡張機能だったりします。

代表的な開発対象：

Google Chrome Extensions
Firefox Add-ons Extensions
Microsoft Edge Extensions

実は「ブラウザを改造」している。

普通のWebサイトは、 「ページの中」 でしか動けません。

しかし、拡張機能は、ブラウザ側へ入り込みます。

つまり：

タブ操作
ページ監視
DOM変更
自動入力
通知
ダウンロード制御

など、かなり強力のことが実現できます。

具体的に何ができるのか？

例えば、こんなことができます。

① Webページを書き換える

例：ページ背景を黒くする

document.body.style.background = "black";

これだけで、現在ページの背景色が変わります。

② ボタンを追加する

const btn = document.createElement("button");

btn.textContent = "クリック";

document.body.appendChild(btn);

ページへ独自UIを追加できます。

③ 選択文字を取得する

const text = window.getSelection().toString();

console.log(text);

例えば：

翻訳
検索
辞書

などに応用可能です。

④ 自動化

例えば：

フォーム自動入力
CSVダウンロード
定型操作
Webスクレイピング

など。

かなり実務的です。

⑤ ブラウザそのものを操作

chrome.tabs.create({
  url: "https://example.com"
});

新しいタブを開けます。

どうやって開発するのか？

実は開発自身は、「普通のWeb開発」に近い為、はじめての人は驚きやすいのですが、冒頭で説明したように

ブラウザ拡張は：

HTML
CSS
JavaScript

で作れます。

つまり：

React
Vue
TypeScript
Vite

などのフレームワークも利用可能です。

拡張機能の基本構成

最小構成はこんな感じです。

my-extension/
├ manifest.json
├ content.js
└ icon.png

一番重要なのは manifest.json

これは、拡張機能の設定ファイルです。

例えば：

{
  "manifest_version": 3,
  "name": "Hello Extension",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

この設定の意味

項目	意味
manifest_version	拡張仕様バージョン
name	拡張名
version	バージョン
content_scripts	ページへ注入するJS

content.jsとは、Webページへ注入されるJavaScriptです。

例えば：

alert("こんにちは！");

を書くだけで、ページを開いた時に動作します。

実際に動かしてみよう

Step1 フォルダ作成

Windowsの場合：

「ターミナル」アプリのウインドウから、コマンド入力により作業を行っていきます。

スタートボタンを右クリック
「ターミナル」をクリック

表示されたターミナルアプリで、任意の場所（例：c:\users\test）に my-extension フォルダを作成。

mkdir my-extension

Step2 manifest.json ファイル作成

作成したフォルダー(例：C:\Users\test\my-extension)に移動し、 manifest.json ファイルを作成します。

👉 ここでは、Windows標準の「メモ帳」アプリを使用します。

以下を入力：

cd my-extension
notepad manifest.json

メモ帳で開かれた、manifest.json ファイルに、下記を入力して保存：

{
  "manifest_version": 3,
  "name": "Hello Extension",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

Step3 content.js ファイル作成

作成したフォルダー(例：C:\Users\test\my-extension)に、 content.js ファイルを作成します。

👉 ここでは、Windows標準の「メモ帳」アプリを使用します。

以下を入力：

notepad content.js

メモ帳で開かれた、content.js ファイルに、下記を入力して保存：

alert("拡張機能が動きました！");

Step4 Chromeへ読み込む

Edgeを起動し、URLボックスに、”edge://extensions/” を入力し、拡張機能の設定画面を開きます。
左ペインの下側にある「開発者モード」をONにします。
右ペインの先頭に、「開発者向けオプション」の行が表示されることを確認し、「展開して読み込み」をクリックします。
表示されたファイルダイアログにて、作成した”my-extension” フォルダを選択し、「フォルダの選択」をクリックします。
右ペインの一覧を下方にスクロールし、manifest.json の name に定義してある「Hello Extension」が追加されていることを確認します。

Step5 実行

URLボックスに、新たなページとして ”https://msn.co.jp” を開くと、"拡張機能が動きました！" がポップアップ表示されます。

👉 これだけで「自作ブラウザ拡張」の完成です。

このとおり、 「普段見ているWebページを書き換えられる」

これはかなり強力な機能です。

Step6 拡張機能の削除

ここでは、先ほど追加した拡張機能の削除方法を説明します。

Edgeを起動し、URLボックスに、”edge://extensions/” を入力し、拡張機能の設定画面を開きます。
右ペインの一覧を下方にスクロールし、manifest.json の name に定義してある「Hello Extension」を探します。
見つかった「Hello Extension」の「削除」をクリックします。
削除確認のポップアップ画面にて「削除」をクリックします。
「Hello Extension」が一覧から削除されるのを確認します。

※　「削除」ではなく、右肩のスイッチを OFF にすることで、一時的に拡張機能を停止できます。

拡張機能の主要パーツ

ブラウザ拡張には、下記の主要なパーツが存在します。

① content script

ページ内部で動作するスクリプトです。拡張機能において、最も重要です。

ページ内の DOM操作を担当します。

② popup

拡張アイコン押下時の小UI。拡張アイコン押下時に開くポップアップ画面です。

manifest.json で、下記の様にHTMLとして指定できます。

"action": {
  "default_popup": "popup.html"
}

③ background / service worker

裏側に常駐して処理を行うものです。

例えば：

通知
タイマー
通信
タブ監視

などを裏方として実現できます。

Manifest V3では Service Worker 化されました。

まとめ

ブラウザ拡張機能は、ブラウザを自分仕様へ改造する技術です。

しかも：

HTML
CSS
JavaScript

だけで始められます。

今後のWeb技術とも非常に相性が良く、学ぶ価値の高い分野です。

✒️ ブラウザ拡張機能とは