Google Chromeの拡張機能が存外簡単に作れた話

最近Googole Chromeの拡張機能を作りました。

思ったより完成までの道のりが短かったので記事にしてみました。

開発に至る背景(読み飛ばしても大丈夫です)

とあるサービスのAPIを使った自作システムがAPIの提供終了によって動かなくなってしまいました。

そのシステムはAPIを用いてバックグラウンドでデータを取得するものでした。

なんとかそのシステムと同じものを作れないか考えたところ、ユーザー自信に情報を取得させれば同じことができることに気付いたのでフロントで実行してしまえばいいと思いました。

やってることは画面に表示されている情報を取得するだけなのでJavaScriptでいけると思い、調べたらまさにGoogle Chromeの拡張機能がうってつけだと分かったので作り方を調べました。

拡張機能を作る難易度について

想像以上に簡単でした。

最低限必要な知識

• HTML
• CSS
• JavaScript

まず最低限この3つは必須です。

厳密にはJavaScriptかCSSのどちらか片方でも作れます。今回はJavaScriptで実装するのでむしろCSSは不要とも言えます。

あると開発が広がる知識

• Ajaxなどの非同期通信
• それに伴うサーバーサイドの知識

この2つの知識があるとバックエンドを利用することができるので出来ることが増えます。

とりあえず動くところまで持っていく

本題です。

やることは2つ。どちらも非常に簡単。

拡張機能を動かすために必須となるファイルの作成と、ブラウザの設定で拡張機能を読み込ませること。

manifest.json の作成

manifest.json というJSONファイルを作成します。

拡張機能を読み込む際にこのJSONファイルが最初に読み込まれます。

当然ですが中身はJSON形式になります。

{
  "manifest_version": 3,
  "name": "テスト拡張機能",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://google.com"],
      "js": ["test.js"]
    }
  ]
}

こちらが最低限の記載になります。

今回はとにかく動かすことを優先しているので他の項目は割愛します。

ここで重要なのは以下の3点です。

• “matches”は拡張機能が動作するURL条件。* を挟むことで可変対応も可能です。
• “content_scripts”は表示されている画面に対して実行する内容になります。”background”でも動作しますが今回はcontent_scriptsにします。
• “js”は上記で実行されるJavaScriptファイルです。このパスはフォルダで階層設定も可能です。

なおこの”js”は”css”でも同様となります。”js”か”css”のどちらかがあれば成立します。

jsを読み込ませれば記載されたscriptを実行し、cssを読み込ませれば表示されているページに自分で記載したcssを割り当てることができます。

test.js の作成

manifest.json と同じフォルダに test.js というファイルを作成してください。

中身は alert("Hello world!"); だけで大丈夫です。

以上でコードの実装は終了です。

ブラウザの設定で拡張機能を読み込ませる

次に作成した拡張機能をGoogle Chromeに読み込ませます。

※ 以降は現バージョンでのブラウザでの説明になりますが、ブラウザがアップデートされると文言やデザインが変わるのでご注意ください。

ブラウザを開きます。

「右上の三点リーダー -> 拡張機能 -> 拡張機能を管理」という手順で拡張機能の管理画面を開きます。

右上にある「デベロッパー モード」をクリックして有効にします。

デベロッパーモードが有効になると拡張機能のヘッダーに3つの項目が追加されるので、その一番左の「パッケージ化されてない拡張機能を読み込む」をクリックします。

フォルダ選択画面が出るので先ほど作った manifest.json が置いてあるフォルダを選択します。

ここでエラーが出なければ拡張機能の完成です。

エラーが出た場合はエラーメッセージに従って修正します。

動作確認する

manifest.json にあるmatchesに書いたURLを開きます。(上記の例だと https://google.com になります)

注意：読み込んだ拡張機能がONになってることを確認してください。

ページを開いたら「Hello world!」というアラートが出れば成功です。

何も出なければ test.js の記述に誤りがある可能性が高いです。

デベロッパーツールなどを開いて確認し、そこでエラーが確認できなければブラウザの拡張機能の管理に戻しましょう。

コードの修正が出来たら自作の拡張機能の「詳細」を開いて「更新」を押せば変更が反映されます。

以上

目的の「とりあえず動くところまで持っていく」は以上になります。

あとはこの要領で好きな拡張機能を作ってください。

表示されている画面にCSSを割り当ててデザインを変えたり、Scriptで邪魔な要素を消したり加えたりもできます。

もちろん jQuery などを読み込ませることもできます。

先述したとおりAjaxなどでバックエンドを利用することも可能ですが、自分のドメインの拡張機能でなければほぼ必ずCORSの知識が必要になります。

最後に下記に一般公開についての内容を少しだけ載せました。

拡張機能が完成した後

もし作成した拡張機能をGoogle Storeで一般公開したい場合、個人情報の登録・5ドルの課金・アプリの登録・審査が必要になります。

matchesのURLに * を使った場合、アプリの登録時に質問内容が追加されます。(なんでURLが可変なのか？という感じの質問)

アプリの登録時に最低限の画像が必要になります。スクリーンショットやアイコンなど。適宜用意してください。

審査は人間が見ているようには感じませんでしたが、実査どうなっているんでしょうね？