はじめに

Chrome拡張機能を初めて作って公開してみたので、作成〜公開まで手順を迷ったところとともにメモしておく

つくったもの

今回は、私の大好きなステゴザウルスを新規タブを開くと表示できるようにするため、Chrome拡張機能を作ってみた。
こういうの作るの初めてだったけれど、想像していたよりずっと簡単🌷

新規タブを開くたびこんな感じで可愛いステゴザウルスがあるいているよ。超絶可愛いからぜひインストールしてね⭐️

githubソースコード

Chrome拡張機能の作成〜公開まで

作成

必要なファイル構成はとってもシンプル。
「manifest.json」っていうchrome拡張機能の設定ファイルがあるのでそれの準備と、実際に動かしたい機能（今回は新規タブに表示するhtml）、アイコン画像などを用意するだけ。

|--dino.js // 今回は恐竜を歩かせたかったのでアニメーション用に追加
|--img
|  　必要なアイコン画像など入れておく
|--manifest.json // 拡張機能の「設定ファイル」
|--newtab.html // 新しいタブ画面

manifest.jsonを作る

全然知らなくて「うっ」てなったけど実はそんなに大変じゃない。

{
  "name": "Dino Tab",
  "version": "1.0.0",
  "manifest_version": 3, 
  "description": "dino tab dayo",
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },
  "icons": {
    "16": "img/dinoicon16.png",
    "48": "img/dinoicon48.png",
    "128": "img/dinoicon128.png"
  }
}

それぞれどんな項目か？軽く解説。

version：現在は3推奨なので3と書こう
name：この拡張機能の名前となる
description：公開時に説明として表示される。ここでは132文字までだが後で公開設定ページの中で10000字程度たっぷり記載可能
icon：この拡張機能のアイコン
（詳細にどれがどこかまでは見切れていないが、以下画像のところでは48*48の画像が使われているみたい）

chrome_url_overrides：これはなにを作るかによる。今回は新規タブを上書きしたいため上記のように書いた
content_scripts：今回は特に書いてないが、拡張機能といえばよくあるjsかなにかうごいたりするものであれば以下のように書いたりするっぽい

"content_scripts": [
    {
      "matches": ["https://jsを動かしたいページ/*"],
      "js": ["content.js"]
    }
  ],

参考）https://developer.chrome.com/docs/extensions/reference/manifest?hl=ja

html/css/js

今回公開までの流れをいったん書きたいので、詳細は割愛。
新規タブを以下のHTMLで上書きするイメージである。こんなイメージでかけば、可愛い恐竜の画像が新規タブに表示できる。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>new tab</title>
    <link rel="icon" href="img/dinofavi.png" />
  </head>
  <body>
    <img src="img/dino1.svg" alt="超絶可愛いステゴザウルスの画像" />
  </body>
</html>

イラスト・アイコン画像

イラスト
今回figmaの鉛筆で書いてみた（マウスでがんばって描いただけなので正直ツールはなんでもよかったが使い慣れていたため）

アイコン画像
イラストで力尽きたためこちらのフリーアイコンを拝借。可愛いのがいっぱい🫶

chromeでいざお試し

デベロッパーモードをONにし、左側の『パッケージ化されていない拡張機能を読み込む』から開発中のフォルダを選択すれば実際に確認することができる

公開

完成したらいよいよ拡張機能の公開をしていく。

デベロッパー登録（$5）

実際に公開するにはデベロッパー登録というのをしないと公開できない。
登録料は$5かかる💰（お金かかるのは最初の一回だけ！）

登録はここから。

必要事項の記入

アカウントの準備ができたら実際に公開準備をしていく。

必要事項を記載して『審査のため送信』を押す。たりてない項目があればエラーで教えてくれる。

ストアの掲載情報

記入すべき各項目が実際どこにつかわれるものなのかよくわからなかったので簡単にメモ。
画像は指定のサイズを用意しないといけなくてややメンドイ。

説明：ウェブストア検索後のページの「概要」に表示される内容。英語のほうがいっぱい見つけてくれるかな？と思って日本語と英語で書いてみた

ショップアイコン：詳細ページに飛んだ後のキャプチャ左上のアイコン（DinoTabの左）
スクリーンショット：これはそのまま。具体的な使用感の例として表示される

プロモーションタイル（小）：これが検索直後に表示されるタイル画像

マーキープロモーションタイル
何に使われているのかわからなかったのでAIに聞いたところ、Chrome ウェブストアで拡張機能が特集・おすすめとして表示される時に使われる画像らしい。（設定しなくてもよかったか？）

プライバシー

左にプライバシータブがあり、こちらも設定が必要。

アカウント

googleアカウントは２要素認証にしていないとエラーとなった。

また、以下のアカウントのメールアドレスも設定してあげないとエラーとなるのでわすれずに。

おまけ：審査待ち〜公開

ドキドキの審査は１日かからないくらいで完了〜公開された。
調べたら初回は長め？と書かれたりしていたが意外とスムーズ（たいした機能がついていないからなのかな？）

私の場合、公開から数時間後にはちゃんとウェブストア内で検索からも引っかかるようになった
（検索ひっかかるまではURLから直接飛んで確認できる）

最後に

HTMLプロフェッショナルの資格を以前取得したのですが、そこで勉強したアニメーションやら画像反転のCSSやらの技術が生きてきました。
資格勉強中はこんなものいつ使うんだと思っていましたが、今回たくさん使えたので勉強はしておくものだなあ、と。

また、DinoTabはもっとかわいくバージョンアップしていきたい所存です😌