初めてChromeの拡張機能を作ってみた！ - アップガレージグループテックブログ

１.Chromeの拡張機能とは
２.実際に作成してみる
３.まとめ

はじめまして。株式会社アップガレージグループ ITソリューション事業部　エンジニアの中尾です。

今回のテーマは、「Chromeの拡張機能作成」について。日々Chrome 拡張機能は利用していて、自分でも便利なツールを作成したいと思ったため共有いたします。

１.Chromeの拡張機能とは

まず、ChromeとはGoogleが開発したWebブラウザであり、現在は世界シェアNo.1で多くの方が利用しています。そのChromeに機能を追加・強化することができるのが、Chrome 拡張機能です。

ここでは、作成から導入までの流れをご紹介します。

２.実際に作成してみる

今回はGithub上で好きなスタンプを使えるようにしてみます。（デフォルトのスタンプだと味気ないので・・・）

以下のようなフォルダ構成で作成していきます。

2-1. manifest.jsonの書き方

manifest.jsonは、Webアプリケーションやブラウザ拡張機能の開発に使用されるJSONファイルです。

「作成するChrome拡張の設定全般」について書く必要があり、

どんなファイルがあるのか
どんな機能を利用するのか
どんな制限を設けるのか

など定義する必要があります。以下記述例です。

▼manifest.json


    {
        "name": "Githubのスタンプ変換機能",
        "version": "1.0.0",
        "manifest_version": 3,

        "content_scripts": [
            {
                "matches": ["*://github.com/**"],
                "js": [
                    "js/jquery-3.7.1.js",
                    "js/main.js"
                ],
                "run_at": "document_end",
                "all_frames": false
            }
        ],
        "web_accessible_resources": [
            {
                "matches": [ "http://*/*", "https://*/*" ],
                "resources": [ "/images/*" ]
            }
        ]
    }

name

拡張機能の名称で、45文字まで入力できます。

version

拡張機能のバージョンです。拡張機能を更新する際には必ずバージョンが上がってなくてはなりません。

manifest_version

マニフェストファイル自身のバージョンです。

content_scripts

コンテントスクリプトを使用する場合に記載します。

matches

content_scriptsに対する必須の項目で、動作対象となるURLをMatch Patternsの形式で設定します。

js

content_scriptsに対する任意の項目で、動作させるスクリプトをリストで設定します。

web_accessible_resources

拡張機能で特定の画像などを使用する場合に記載します。

2-2. 処理したいコードを実装する

上記の画像を見ていただくと、Githubのスタンプはテキスト形式で表示していることがわかります。そのため今回はSVGをテキストに変換して、スタンプを変更していきたいと思います。

▼main.js


    // 新しい画像のURL
    const newImageUrl = chrome.runtime.getURL('../images/shouchi.svg');

    // <g-emoji>要素を取得
    const emojiElement = document.querySelector('g-emoji[alias="-1"]');

    // テキスト内容を置き換える
    emojiElement.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" width="24" height="24">
      <image xlink:href="${newImageUrl}" width="24" height="24"></image>
    </svg>';

詳しい説明は省きますが、SVG形式のスタンプをテキストに変換して置き換えています。これで既存のスタンプが、今回用意したスタンプに置き換わっているはずです。