chrome拡張機能の開発(テストまで)

今日は、chat-gptを使ったchrome拡張機能の開発をやってみた。

まずは、開発をするフォルダを作る。

①manifest.jsonというファイルを作成して、chrome拡張機能に表示される名前など指定する。

{
  "name": "〇〇",
  "description": "〇〇〇〇",
  "version": "1.0",
  "manifest_version": 3,
  "icons": {
    "48": "icons/48.png",
    "72": "icons/72.png",
    "96": "icons/96.png"
  },
  "action": {
    "default_popup": "popup.html",
    "default_title": "〇〇"
  },
  "permissions": ["activeTab", "tabs", "storage"]
}

②popup.htmlファイルを作成し、拡張機能を有効化した際に表示されるHTMLを記載する。

③HTMLが完成したら、

chrome://extensions/にアクセスし、右上のデベロッパーモードをON、「パッケージ化されていない拡張機能を読み込む」を押してフォルダをアップロードする。

上記までで、拡張機能のポップアップに表示される。