Chapter 05

アイコン実装編

gia
gia
2022.02.08に更新
このチャプターの目次

アイコン作成

  • 作成ツール

    • figma
  • 必要なアイコンのサイズ

    • 128 * 128
    • 48 * 48
    • 16 * 16

youtube thumbnail getter なので YTG にした。(ダサい)

アイコンのリサイズは下記の手順で行なった。(もっといい方法がある気はしている)

  • figma でアイコンのデザインを作成する
  • svg で書き出す
  • figma に.svg を取り込む
  • リサイズして3種類に展開させる
  • png を書き出す

アイコン実装

// manifest.json

{
  // アプリ名称
  "name": "youtube thumbnails getter",
    // アプリバージョン
  "version": "0.0.1",
    // manifest.json のバージョン
	"manifest_version": 3,
  // アプリの詳細
  "description": "chrome extension to get youtube thumbnails",
    // タブの取得権限 
  "permissions": ["tabs"],
  "action": {
    // 拡張機能のアイコンをクリックした時にポップアップ表示される html ファイルを指定
    "default_popup": "popup-dialog.html"
  },
	// アイコンを指定
	"icons": {
    "16": "icon/icon16.png",
    "48": "icon/icon48.png",
    "128": "icon/icon128.png"
  },
    // 作者名称
  "author": "gia_sorairo"
}

拡張機能を更新

拡張機能のアイコンを確認

ちゃんと反映されました🎉

ピン留めしてる方も確認。

反映されてる🎉

これでアイコン実装完了。

おつかれさまでした🍹

参考