GoogleChromeの拡張機能を作ってみよう

Posted at 2024-05-31

こんにちは、WEBエンジニアの堀井です。

今回は、GoogleChromeを利用している方は、一度は使ったことがあるであろうChrome拡張機能の作成方法について書いていきたいと思います。

Chrome拡張機能とは

Chromeウェブストアからインストールすることのできる、ブラウザ上で動作する拡張機能のことです。

主にGoogleChromeやEdgeで利用することができます。

有名なものだと、選択した文章を翻訳することができる「Google翻訳」や、ブラウザ上にある色のカラーコードを取得できる「ColorZilla」などがあります。

作り方

公式のドキュメントがありますので、こちらを参考にしました。

今回は、拡張機能をクリックすると運勢がわかるおみくじ拡張機能を作成します。

必要なファイルは以下になります。

manifest.json
omikuji.html
omikuji.js
omikuji.ong

それぞれ説明していきます。

manifest.json

こちらは拡張機能を作成する場合に、必ず必要なファイルになります。

manifest.json

{
    "manifest_version": 3,
    "name": "Omikuji Extension",
    "description": "Omikuji Extension",
    "version": "1.0",
    "action": {
        "default_popup": "omikuji.html",
        "default_icon": "omikuji.png"
    }
}

項目	説明
manifest_version	マニフェストのバージョン。今は3が最新。
name	拡張機能の名称。
description	拡張機能の説明。
version	拡張機能のバージョン。
action	ツールバーに表示される拡張機能のアイコンの外観と動作を定義。
default_popup	拡張機能クリック時に表示されるポップアップ。
default_icon	拡張機能のアイコン。48x48。

omikuji.html

こちらはポップアップで表示されるファイルです。

omikuji.html

<html lang="ja">
  <body>
    <span id="result"></span>
    <script src="omikuji.js" charset="UTF-8"></script>
  </body>
</html>

omikuji.js

こちらはランダムで運勢を表示するスクリプトです。

omikuji.js

const omikujilist = ['大吉', '中吉', '中吉', '小吉', '小吉', '吉', '吉', '吉', '凶', '大凶'];
window.addEventListener("load", function () {
    let num = Math.floor(Math.random() * 10);
    document.getElementById('result').innerText = omikujilist[num];
});