Webページをダークモードに切り替えるChrome拡張機能を自作

公開日: 2026/04/08 / 更新日: 2026/04/08

WEB

現代社会に生きるインターネット依存症の我々は、日夜Webサイトをサーフィンすることでドーパミンを放出している。

そして、背景が白のWebページをずっと見ていると目が疲れてしまうことが多い。そんな折に重宝しているのが、ダークモードである。

当サイトを閲覧しているもの好きの皆さまであれば、デフォルト設定でダークモードを使用している方も多いと見受ける。そして、「Webページを開いたらダークモードになっていない！目が疲れる！ダークモードくらい準備しとけよ！」と腹が立った経験も少なくないのではないだろうか。当サイトも、その怒りの矛先を向けられてもおかしくない。面目ない。気が向いたときに準備させていただきます。

冗談はさておき、、、

今回はそんな不満を感じた時にすぐに使える、Webページをダークモードに切り替えるChrome拡張機能を誰でもできるもっとも簡単な方法で自作していく。

なお、デベロッパーモードで個人使用することを目的としているため、Chrome拡張機能をストアに公開する際の審査基準は無視している。ストアに公開する際はこの審査基準を満たすよう、各自留意していただきたい。

準備するもの

Google Chrome
コードエディタ（今回はVSCode、インストールやセットアップについては各自で調べてほしい）

プログラムの作成

JSONファイルの作成

適当な名前でフォルダを作成後、manifest.jsonを作成。

このファイルが拡張機能の名前やバージョンなどの設定ファイルとなる。

{
  "manifest_version": 3, 
  "name": "Simple Dark Mode",
  "version": "1.0",
  "description": "Webページをダークモードにします",
  "permissions": ["activeTab", "scripting", "storage"],
  "action": {
    "default_title": "ダークモードを切り替え"
  },
  "background": {
    "service_worker": "background.js"
  }
}

"manifest_version"：Chrome拡張機能の使用バージョンを指定。現在はManifest V3のため、”3”を指定する。
"name"：拡張機能の名前。
"version"：自分の管理用バージョン。アップデートする際に、1.1などへ上げていく。
"description"：どのような機能を持つかの説明文。
"permissions"：ブラウザの特定の機能を使うための「許可」を申請する項目。
activeTab：「今開いているタブ」に対してのみ操作を行う許可。セキュリティ上、全てのタブへのアクセス権を持つより制限されているため安全とみなされる。
scripting：JavaScriptやCSSをページに流し込む（注入する）機能を使うために必須。
storage：拡張機能をオフにする（CSSを取り除く操作を行う）ときのため、ページの状態を保存しておく。
"action"：ブラウザのツールバー上の「アイコン」に関する設定
default_title：アイコンにマウスを重ねた時に表示されるテキスト。
※"default_icon" : "任意の画像ファイル名"を設定すると、アイコン画像を設定できる。今回はしない。
"background"：ブラウザが裏側で常に（または必要なときに）待機させておくプログラムの設定
service_worker：メインの処理を行うbackground.js を指定。Manifest V3 では「Service Worker」という仕組みが採用されており、メモリ節約のため必要な時だけ起動し、処理が終わると自動で終了する。

Webページに適用させるCSSの作成

色を反転させるためのスタイル。filterプロパティを使うと、Webページにある既存の全要素の色を簡単に反転できる。

html {
  filter: invert(1) hue-rotate(180deg) !important;
}

/* 画像や動画まで反転すると不自然なので、それらは元に戻す */
img, video, canvas {
  filter: invert(1) hue-rotate(180deg) !important;
}

CSSを適用させるJavaScriptの作成

アイコンをクリックした際に現在のページの状態（ON/OFF）を判定し、CSSを適用するか削除するかを分岐させる処理を書く。

chrome.action.onClicked.addListener(async (tab) => {
  // 現在の状態を取得（保存されていない場合は初期値 false）
  const prevState = await chrome.storage.local.get({ isDark: false });
  const nextState = !prevState.isDark;

  if (nextState) {
    // ダークモードをオンにする
    await chrome.scripting.insertCSS({
      target: { tabId: tab.id },
      files: ["dark-mode.css"]
    });
  } else {
    // ダークモードをオフにする
    await chrome.scripting.removeCSS({
      target: { tabId: tab.id },
      files: ["dark-mode.css"]
    });
  }

  // 次回のために新しい状態を保存
  await chrome.storage.local.set({ isDark: nextState });
});

ブラウザへの読み込み