Google Chromeの拡張機能を作ってみよう！【入門編】

2024.12.23

WEB

システム開発

日本においてトップシェアを誇るブラウザと言えば Chrome ですが、その Chrome の拡張機能を皆様使っていますでしょうか。

私もいくつかインストールして活用しているのですが、時々こういう拡張機能があったらなぁと思うことがあります。
でもなかなか、自分のニーズに合っていなかったり、日本語に対応しておらず使い方が分からなかったりするんですよね…

『ないんだったら、自分で作ればいいのよ！』

ということで、Chrome拡張機能を作ってみたいと思います。

INDEX

作り方
実用できるものを作る
まとめ

作り方

作り方に関しては公式のページがありますので、こちらを参考にしていきます。（外部には公開しない、あくまでローカル専用の拡張機能として作成します。）

拡張機能へようこそ

基本的には manifest.json(マニフェストファイル形式) という情報をリスト化したjsonファイルがあれば拡張機能は作れます。

example-extension/
　└ manifest.json/

▼ manifest.json

{
  "manifest_version": 3,
  "name": "example",
  "description": "example です",
  "version": "1.0"
}

このような構成を作り、chrome://extensionsにアクセスして、

右上のデベロッパーモードを有効にすると表示される、『パッケージ化されていない拡張機能を読み込む』を選択して、
先程作ったexample-extensionを読み込みますと、

無事、読み込まれましたね。

現状では何の機能も持たない拡張機能ですので、ここからさらに機能を追加していく必要があります。

ではここで、王道の「Hello World」を表示する拡張機能を作ってみます。

▼ manifest.json

{
  "manifest_version": 3,
- "name": "example",
+ "name": "Hello World",
- "description": "example です",
+ "description": "Hello World を表示します。",
- "version": "1.0",
+ "version": "1.1",
+ "action": {
+   "default_popup": "hello.html",
+   "default_icon": "hello.png"
+ }
}

まず、manifest.jsonの内容をアップデートしまして、
加えて「Hello World」を表示する為のポップアップの html ファイルと、拡張機能として表示されるアイコンを設定します。

example-extension/
  ├ hello.html/
  ├ hello.png/
　└ manifest.json/

▼ hello.html

<html>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

▼ hello.png

以上のファイルを追加して、example-extensionを再読み込みしますと、

しっかりとmanifest.jsonの内容にアップデートされていますね。

また機能面に関しても、

設定したアイコンになっているのと、「Hello World」が表示されるようになりましたね。

さて、これだけで終わるのも味気ないので、次は使えそうな拡張機能を作っていきましょう。

実用できるものを作る

最近導入した「BrowserStack」というクロスブラウザテスト用サービス（前回記事参照）が日本語入力に対応しておらず、一度メモ帳等に入力してからコピー＆ペーストしないと入力できないことに導入後に気付きました。
ちょうど毎回OS標準のメモ帳を起動するのが面倒だと感じていたので、これを機にメモ帳の拡張機能を作ってみようと思います。

▼ manifest.json

json
{
  "manifest_version": 3,
  "name": "メモ帳",
  "description": "メモ帳を表示します。メモ内容をコピー可能です。",
  "version": "1.2",
  "action": {
    "default_popup": "memo.html",
    "default_icon": "memo.png"
  },
  "permissions": ["clipboardWrite"]
}

▼ memo.png

manifest.jsonに関しては、クリップボードにコピーする機能を追加するので、permission を追加＋アイコンの変更。
html に関しては

<html>
  <head>
    <meta charset="UTF-8" />
    <title>メモ帳</title>
  </head>
  <body>
    <h1>メモ</h1>
    <textarea id="memo"></textarea>
    <button id="copyBtn">コピー</button>
    <script src="memo.js"></script>
  </body>
</html>

メモ帳の最低限の要素と script タグを追加しまして、

▼ memo.js

document.addEventListener("DOMContentLoaded", () => {
  const memo = document.getElementById("memo");
  const copyBtn = document.getElementById("copyBtn");

  //　メモをローカルストレージに保存
  memo.addEventListener("input", () => {
    localStorage.setItem("memo", memo.value);
  });

  // 保存された内容の読み込み
  const savedContent = localStorage.getItem("memo");
  if (savedContent) {
    memo.value = savedContent;
  }

  // コピー機能
  copyBtn.addEventListener("click", async () => {
    await navigator.clipboard.writeText(memo.value);
    alert("クリップボードにコピーされました。");
  });
});

コピー機能用の js ファイルを追加しました。

以上のファイルに変更して、再読み込みしてみると、