技術は私たちの力。技術は私たちの楽しみ。 Creative Developer BLOG 技術部ブログ
Technology is our strength. Technology is what we enjoy.

挫折しない！非プログラマーのためのChrome拡張機能入門

小林
2025-04-07　
「業務の流れを快適にする」「アナログな作業をアプリ化する」「AIを使って作業を時短で終わらせる」業務効率化の手段はどんどん高度になっていますが、その一方で、もっと手前にある“ちょっとした不便”が見過ごされていることに、最近気づきました。

アプリで管理するほどじゃないけど、毎回ちょっとストレス。これまで当たり前だった作業なので悩みとして意識すらしていないかもしれませんが、まずはその当たり前を疑ってみましょう。

私は普段、既存の拡張機能やサイトを使う中で、「いらない機能がついている」「常にレビューを求められる」といった煩わしさを感じていました。今回、知識ゼロからChrome拡張機能を自作してみて自分の確認作業がぐっと楽になり、業務改善って、こういう“小さな気づき”からでもできるんだと実感しました。

「プログラミングできないし…」という方も大丈夫です。今の時代なら誰でもできます！

Chrome拡張機能とは

Google Chromeの拡張機能とは、Google Chromeブラウザに自分の好きな機能を後から追加でき、ブラウザの使い勝手を良くする小さなアプリのようなもので、Chromeウェブストアから入手できます。基本的にスマホでは適用されません。特にiphoneは実装予定がないそうです。

拡張機能の中には、ユーザーのデータにアクセスするものもあります。そのため、公式のChromeウェブストアからのみインストールし、必要最小限の拡張機能にとどめることが推奨されます。また、多数の拡張機能を同時に使用すると、ブラウザの動作が遅くなる可能性があるため、定期的に不要な拡張機能を無効化・削除することで、パフォーマンスを維持できます。

参考記事

ゼロからヒーローへ: モバイル Chrome 拡張機能の作成方法55
First look: This special version of Chrome for Android supports extensions - Android Authority

実際に自分で作れるのか？

実はしっかり公式からのチュートリアルがあります。
https://developer.chrome.com/docs/extensions?hl=ja

実際に自分だけ適用できるように自作して拡張機能に追加することができます。
注意事項として、公開するのには100MBまで（1ファイル10MBまで）の制限があり、ローカルストレージ(chrome.storage.local)は5MBまでです。←日本語だと最大250万文字、英数字だと最大500万文字ぐらいだそうです。

※chrome.storage.localとは
拡張機能の中でデータ（メモ・設定・フラグなど）を保存・読み出しできる仕組みです。Webサイトでいう「ローカルストレージ」に近いですが、拡張機能に特化したAPIです。保存期間はアカウントがある限りで、ローカルに保存されるため他のデバイスとは同期されません。

ほ〜らやっぱりプログラミングができないと作れないでしょ？

私も実際、拡張機能ってコード書ける人だけのツールだと思っていて触ったこともありませんでしたが、実は意外とシンプルな構成。

Chrome拡張機能はHTML、CSS、JavaScriptという3つの技術で作られていますが、ゼロからゴリゴリ書く必要はありません。

やりたいことが明確であれば、実用的な拡張機能を作ることは十分可能です。
そう、なぜなら私たちにはAIがいますからね。次は実際の課題と既存の拡張機能と比較して作ってみた拡張機能をご紹介します。

HTML警察

<機能・特徴>
・HTMLの閉じタグチェックと、非推奨の書き方になっている箇所を教えてくれます。
・デザインデータ（画像）をアップロードすることで、ズレを確認できます。

<背景>
・既存のエラーチェッカーが作動せず、解決方法が見つけられなかった。また、URLを貼ってチェックしてくれるサイトがあるが、行ったり来たりするのが面倒で、かつローカルで確認したい時に無効となっていたので不便だった。
・コードレビューの負担を減らすため、最低限のエラーを自力ですぐ発見できたらいいなと、研修が終わった頃に感じた。これも、既存のサイトがあるが上記と同じくサーバーアップしないと確認できないので不便だった。

エラーをクリックすると、該当する箇所へ案内してくれます

閲覧注意ですが(遅い)デザインとのずれを確認できます。

画像の透明度や大きさを調整できます。

コピーストック

<機能・特徴>
・メールやチャットなどで送る時にサイトを行き来しなくて済むように、Webサイトの一部をコピーしてストックできます。
・手動で追加もできます。
・メモを追加できるので、なんのコピーか忘れずに済みます。

<背景>
・作業報告チャットなどでいちいち色んなページを読み込んでコピーすることがあったのでイライラしてました。Macにはデフォルトでクリップボードの履歴を簡単に呼び出せるものがないので、なるべく回遊する時間を減らしたいと思いました。

非プログラマーが具合悪くならずに始める拡張機能入門

用意するもの
メモ帳（Windows）／ テキストエディット（Mac）
→拡張子（.json / .js / .html）をしっかり設定すればOK
フォルダ
→自作拡張機能をまとめる入れ物を作ります

手順1：拡張機能のフォルダを作る

my-extensionというフォルダ名にでもしましょうか。

手順2：manifest.json を作成

(1)メモ帳を開いて、以下のコードをコピペ 
{
  "manifest_version": 3,
  "name": "My First Extension",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": [],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}
(2)名前を manifest.json にして、先ほどのフォルダ内に保存
Windows：保存時に「ファイルの種類」を「すべてのファイル」にしないと .txt になります
Mac：.txtを付けず、拡張子が.jsonであることを確認！

manifest.jsonとは？
Chromeは、拡張機能を読み込むときにまずこのファイルを見て、「どんな機能なのか？」「何を読み込むのか？」を判断します。
つまり、このファイルがないと、Chromeはあなたの拡張機能の存在を認識できません。政権公約もマニフェストと言いますね。訳し方は賛否両論ありますが。

Chromeに表示される拡張機能の名前（name）
バージョンは？（version）→内容を更新するたびに数字を増やして更新したことをアピールします。自分の拡張機能が「何回目の更新か」を示す番号です
どんな画面を表示する？（popup.htmlなど）
どんなページで動くか？（matches）
何のファイルを読み込む？（content.jsなど）

manifest_version
必須の記述で現在は「3」が主流です。昔のルール（v2）で書かれた拡張機能は今でも動いているものもありますが、新しく作る拡張機能は、必ずmanifest_version: 3 にしないとChromeに認識されません。
action.default_popup
ボタンを押したときの画面はどうするの？と聞かれているので、popup.htmlなどのUIファイルを使うよと記述します。
content_scripts
ページ上で実行するスクリプト(実際の動きや処理)です。どのページに、何を読み込むか指定します。

all_urlsはすべてのWebページで実行することを意味します。

手順3：popup.html を作成

(1)メモ帳で新しくファイルを開く
(2)以下のコードをコピペ 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>My Extension</title>
</head>
<body>
  <h2>Hello!</h2>
  <button id="helloBtn">クリック</button>

  <script src="popup.js"></script>
</body>
</html>

(3)popup.html という名前で保存（さっきと同じフォルダに）

手順4：popup.jsを作成

(1)もう一つメモ帳を開く
(2)以下のコードをコピペ 
document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('helloBtn').addEventListener('click', function () {
    alert('こんにちは');
  });
});
(3)popup.js という名前で保存

手順5：content.js を作成（簡単な例）

(1)もう一つメモ帳を開く
(2)以下のコードをコピペ 
console.log("拡張機能がページに読み込まれました！");
(3)content.js という名前で保存

手順6：Chromeに読み込む

(1)Chromeを開いて、以下のURLをコピーしてアドレスを貼る
chrome://extensions/
(2)右上の「デベロッパーモード」をONにする
(3)左上の「パッケージ化されていない拡張機能を読み込む」をクリック
(4)さっき作った my-extension フォルダを選択
(5)Chromeの右上にアイコンが出れば成功

実行してみよう！

(1)Chrome右上のパズルアイコン（拡張機能）から自分の拡張機能を開く
(2)「クリック」ボタンを押すと「こんにちは」とアラートが出るはず！
popup.htmlの中身（HTMLとJS）は、ChatGPTにお願いすることでだいたい作ってもらえます。
「何をしたいか」さえ明確なら、コードがわからなくても十分に機能が作れます。
プログラマーじゃなくても、自分の理想のツールを実現できる時代です！

実際のコード作成用のプロンプトの例はこんな感じです。
コツは、やりたいこと＋動作のタイミングを指定することです。

例）選択範囲のWebサイト上のフォント名を調べてくれる拡張機能を作成したいです。必要なコードを作成し、アイコンも生成してください。

拡張機能を作って気づいたこと

すでに便利な拡張機能はたくさんありますが、
「こんな機能いらない…」「なにこれ、何書いてるかわかんない…」と思ったこと、ありませんか？

今までは「誰か作ってくれないかな」「ちっ、なんでできないんだ！」と不満だけ感じていました。拡張機能はコードが書ける天才だけが作るものだと思っていました。

でも実際は、「作る力」がなくても、「こうだったらいいのに」と気づく視点さえあれば、あとはAIに聞けばなんとかできます！それを実感できたのが一番の学びでした。

おまけ〜ChatGPTとGeminiどちらが良いか〜

記事内ではChatGPT-4oを使っていました。
同じプロンプトで、出力結果が違うのか、またどっちがわかりやすいかを検証してみました。

Geminiはどのバージョンでもほぼ変わらず丁寧な解説付きで出力してくれます

結論としては、ChatGPTでもGeminiでもどちらでも使えるコードを出してくれました。

ChatGPTではアイコンの生成までしてくれた上に画像生成の精度もGeminiより高そうでした。

Geminiの方が、コードの解説が細かいのでなんでこの書き方をするのか都度教えてほしいならGeminiがいいですね。でもChatGPTも言えば教えてくれます。

普段使い慣れている方で問題なさそうです。

参考記事

https://qiita.com/RyBB/items/32b2a7b879f21b3edefc
https://www.gon-dola.com/lift/marketing-general/5113/#i2
https://www.shinobi.jp/affiliate/creating-extention/
記事一覧へ

New!

Category

Member

システム部開発ユニット
システム部SIユニット
クリエイティブ戦略部デザインユニット
クリエイティブ戦略部プランニングユニット
管理部
Copyright(C) Interpark Co., Ltd. All Rights Reserved.