ずっと家でアプリ作っていたい

業務効率化小ネタなど

【入門】超シンプルなGoogle Chrome Extension (拡張機能)を作って仕組みを学ぶ

はじめに

会社で何か作業をしている時、「あーこんな拡張機能Chromeについていたら助かるんだけどな...」と思う時があります。 探してみても無さそうな時は諦めていたのですが、ふと「自分でも作れるんじゃないか?」と思い調べてみると、どうやら簡単に作れるらしい。 そしてシンプルな機能を持つ拡張機能だったら自分で作れるようになったので、その情報をシェアしたいと思います。

拡張機能 (Extension)とは

まず拡張機能 (Extension)とは何かについて説明します。公式サイトによると

Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS. An extension must fulfill a single purpose that is narrowly defined and easy to understand. A single extension can include multiple components and a range of functionality, as long as everything contributes towards a common purpose.

拡張機能はブラウザをカスタマイズするための小規模のプログラムです。拡張機能を実装することでユーザーは好みに合わせた機能をブラウザへ追加できます。プログラムはHTML、CSSJavaScriptで記述されます。拡張機能は(あくまで"拡張"なので)一つの目的のみの為に開発されなければなりません。その目的を達成するために、さまざまさスクリプトファイルを含むことができます。

つまりWebの技術を使って、何かシンプルな機能を持たせたプログラムです。

拡張機能はブラウザでの使用が大前提なので、WebAPIだったりの技術を簡単に使用できるところを大きなメリットであり、最近流行っているWeb系エンジニアの方々は恐らく簡単に本格的な機能を実装できます。

また拡張機能はシェアが簡単なので、社内で配ると喜ばれたりする場合もあります。

具体例

拡張機能の具体例だとGoogle翻訳なんかは皆さん使用しているんじゃないでしょうか?

f:id:chang_app_dev:20210118231018p:plain

文章を選択するだけで翻訳してくれるので、外国語のドキュメントを読む方なんかは結構インストールしている気がします。

こんな感じで、通常のブラウジングをちょっと便利にしてくれるのが拡張機能です。

Hello, Chrome Extension

今回作るのは、ブラウザ上部のアイコンをクリックすると「Hello, Chrome Extension」という文字が出るだけの簡単なものです。

シンプルな拡張機能ですが、開発を行う上で重要なコンセプトが学べます。

事前に必要な知識

必要な知識はJSONとHTMLのみ。ツールはGoogle Chromeだけです。

ただ、必要と言ってもとても基礎的な部分でOKですので以下の記事を眺めておけば全然問題ないと思います。

saruwakakun.com

products.sint.co.jp

エディターはなんでもOKです。私はVSCodeを使用しています。

準備

では早速作っていきましょう。

まずは拡張機能ソースコードを保存するための場所を用意します。 ローカルに「hello-chrome-extension」と言うフォルダを作成します。場所はどこでも良いです。

その中に以下のファイルを作成します。まだ中身は空でOKです。

  • manifest.json
  • popup.html

特にmanifest.jsonが重要で、これがGoogle Chrome拡張機能に必須の唯一のファイルになります。

また拡張機能のアイコン画像も入れておきましょう。 今回私は以下のサイトからダウンロードして「icon.png」と言うファイル名で保存しました。お好みの画像を選んでpng形式で保存してください。

するとファイル構成は以下のような状態になります。

f:id:chang_app_dev:20210118231233p:plain

ではファイルの中身を作っていきましょう。

manifest.json

このファイルは「拡張機能の説明書」と言う役割があり、Google Chromeはこのファイルを参照して拡張機能の中身を認識します。

今回はmanifest.jsonの中身を以下のように記述します。

{
  "name": "Hello-Chrome-Extensiton",
  "version": "1.0",
  "description": "my first extenstion",
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "manifest_version": 2
}

各コードの意味を説明します。

name:拡張機能の名称 version:拡張機能のバージョン、更新するたびにバージョンを上げる description:アプリの簡単な説明 browser_action:ブラウザのツールバーにてボタンが押されたときの表示やボタンのアイコンなどを設定する default_popup:ボタンが押されたときに表示するポップアップ画面のhtmlファイル default_icon:ボタンのアイコン画像 manifest_version:manifestファイルのバージョン、これは2で固定

popup.html

次にpopup.htmlファイルの中身を以下のように記述します。

<!DOCTYPE html>
<html>
  <head>
    <style>
      
    </style>
  </head>
  <body>
    <h1>Hello Chrome Extension!</h1>
  </body>
</html>

シンプルにh1タグでHello Chrome Extension!と表示するようにします。

このpopup.htmlファイルのファイル名は任意で、index.htmlとかmain.htmlとかでも大丈夫です。ただしmanifest.jsonのdefault_popupの値と揃えるようにしてください。

Google Chromeに読み込み

Google Chromeに作成したフォルダhello-chrome-extensionを読み込みます。 こうすることで拡張機能がブラウザで使用できるようになります。

読み込む準備

chrome://extensions/ を開いてください。そして画像の「デベロッパーモード」と言うトグルをONにしてください。

f:id:chang_app_dev:20210118231342p:plain

このトグルを...

f:id:chang_app_dev:20210118231401p:plain

ONにしましょう。これで準備はOKです。

読み込み

「パッケージ化されていない拡張機能を読み込む」と言うボタンを押してください。

f:id:chang_app_dev:20210118231419p:plain

するとフォルダの選択画面が出るので、hello-chrome-extensionを選択しましょう。

f:id:chang_app_dev:20210118231432p:plain

すると chrome://extensions/ にhello-chrome-extensionが追加されます。

ただしこのままでは拡張機能を実行できないので、ブラウザのツールバー右の拡張機能管理エリアの設定を行います。

名前がわからないのですが、画像のようなパズルのペースみたいなアイコンを押します。 すると拡張機能の一覧が表示されますので、hello-chrome-extensionの安全ピンマークを押して青色にします。

するとツールバーにicon.pngの画像が表示されるようになり、実行する準備ができました。

f:id:chang_app_dev:20210118231453p:plain

実行

最後にicon.pngの画像をクリックします。 すると以下のようにポップアップが表示されるようになります!

f:id:chang_app_dev:20210118231511p:plain

お疲れ様でした!これで拡張機能をブラウザに読み込ませて実行することができました。

まとめ

今回シンプルな拡張機能を作ることができました。ただしこれだと用途はかなり限られていますので、今後はJavaScriptを使用し更に本格的な拡張機能の作り方をシェアしていきたいと思います。