🔖

Chrome拡張機能の実践と公開までの流れ

に公開
Chrome拡張
JavaScript
課題解決
内製開発
tech

はじめに

本記事はあまたにあるChrome拡張機能の開発の話というより、どちらかと言うと
社内SE、情報システム、コーポレートITを担当されている方に向けて2025年7月現在においての
開発スタイルとChrome拡張を社内向けに開発・公開するにはどうしたらよいのか、拡張機能と社内課題解決の可能性についての記事となります。

なので、主に不特定多数に一般公開するというより、社内向けに便利な拡張機能を開発して展開したい人向けとなります。

1.開発した拡張機能を公開するには

拡張機能を使う人が少数(1～)

  • 一番楽なやり方です。
  • ローカル環境に拡張機能に必要なファイルをダウンロードしておいて、Chrome拡張のデベロッパーモードを有効化して、拡張機能ファイルを読み込むだけで使えます。
  • 展開方法としては、Zipファイルもしくはクラウドストレージに保存やSlack等にZipファイルベタ張りでいいかもしれません。

拡張機能をChromeウェブストアまたはGWSポリシーで社内全体に展開したい場合

例として開発した電卓計算機拡張機能を公開するまでの流れを解説します。

  1. Chrome ウェブストアのデベロッパーにアクセスしてデベロッパー登録料5$(1回限り)を支払います。
    https://chrome.google.com/webstore/devconsole/register

  2. デベロッパーダッシュボードからアイテム、新しいアイテムを選択します。

  3. ストアの掲載情報の必要な情報を入力します。
    必要な情報

  • 説明
  • カテゴリ
  • 言語
  • ショップアイコン　※128x128ピクセルの画像が必要です。拘りがなければ生成AIに作ってもらいましょう。
  • スクリーンショット　※最低1枚必要です。
  1. プライバシーに必要な情報を入力します。
  • 単一用途の説明
  • 権限が必要な理由　※電卓ツールの例：storageが必要な理由は計算結果を保存・履歴として見るため
  • データの使用　※特に社内ツールであれば下3つにチェックを入れておけばOKでした

    プラバシーポリシーのURLもユーザーデータを収集するものでなければ不要でOKでした
  1. 販売地域
  • 決済方法　料金なし
  • 拡張機能の公開設定は、公開、限定公開、非公開と選択できます。

限定公開はリンクを知っている人ならアクセス、インストール可
非公開とすると、Trusted Testerで指定しているユーザーもしくはグループアドレスが対象となります。販売地域で選択できるユーザーグループ数が1個しか選択できないようで、アカウントページの
Trusted Tester欄に,区切りで複数のグループを追加したりできます。

  1. 各種情報を入力したら審査のため送信する事ができます。記入漏れ等あるとアラートが隣に表示されますので何が不足しているのか確認しましょう。

  2. 必要とするユーザー権限次第で1～3日の審査日程がかかります。審査が終わると公開可能となります。

  3. 公開可能になった後は、ストアURLを展開するか、GWSのポリシーで配布します。

2.開発スタイルについて

2025年7月時点ですので、言わずもがAIに生成してもらった方が早いですしGASやPythonに比べて
javascript色が強いのとmanifestなどのお作法も覚えなくて時短できます。

自分の場合はClaude CodeとGemini CLIを用いて電卓機能を持つChrome拡張を作ってみました。
勝手に自走して両者でアイデアを形にしてくれるのでほったらかしで終わります。

ChatGPTやGeminiでも良いと思うのですが、ローカル上に拡張機能に必要なファイルを生成してくれるので10分もかからないで終わってzip化したら終わりなので楽です。

ローカルで動作確認する場合は、ChromeのデベロッパーモードをONにして拡張機能に必要なファイルをまとめたフォルダを読み込むだけです。

3.社内課題解決の可能性について

Vibe Coding時代にChrome拡張と社内課題解決の相性は抜群だと感じています。

現在、取り組みとして下記の拡張機能をリリースしました。

  • 業務フローＡ（従来）に対して2～4を拡張機能のボタン一つで自動化しました。
  1. KickFlowで申請を起案する。
  2. 取引先を入れるフォームと、コンプライアンスチェック済みなのか入力するフォームが分かれておりそれぞれ入力する（例としてコンプライアンスチェック時の証跡URL等）
  3. Googleスプレッドシートを見に行き、取引先がチェック済みか確認と証跡URLをコピー
  4. フォームに戻り、証跡URLを貼り付ける

自分自身も申請を上げる事が多く、割と煩わしかったので自動化したいなと
ちょうど20件ほど申請を上げる機会があったので使ってみたら移動・検索の手間が無くなりすごく楽になりました。

  • 業務フローＢ（従来）に対しては拡張機能がバックグラウンドで承認有無と金額のチェックを行う事で2を省略しました。
  1. MoneyFowardで支払申請を出す
  2. 承認者は支払申請がKickFlowで承認済みであること、金額が正しい事を確認
  3. 承認する

いずれも小さな自動化や省力化ですが、全社規模で利用するツールなどに対しては
効果が高くなると想定しています。

このように拡張機能を使用することで、今まで以上に自動化などの工数削減系の課題解決や
それ以外にも応用ができると考えています。例えば、メール誤送信チェッカーなどは実は他社が
開発したものが無料で公開されていますが、開発先がいつ閉鎖するのか分かりませんし、変な
コードが組み込まれているかもしれません。それならば自分たちで開発した方がいいのではと思います。

バックエンドにAPI用のサーバーを用意しておいて、色々なやり取りに使える可能性も大いにあります。
生成AI時代こそ社内課題解決にChrome拡張の選択を入れてみるのもありです。

拡張機能を配布して気づいたポイント

  • GWSのポリシー配布について
    • インストール可能
    • 自動でインストール

前者の場合は、バージョンアップ後のツールは展開されません。後者であればポリシー上の拡張機能をいったん削除して再登録すれば配布対象者は知らずにバージョンアップ後の拡張ツールに差し変わります。

  • バージョンアップについて
    • 不具合や機能追加でツールをアップデートする場合、再度zip化した拡張ファイルを登録・審査する必要があり、即座にリリースするという事ができなかったです。やり方はあるのかもしれませんが、過去のセキュリティに関する問題で厳格化されたのかもしれません。

Discussion