React + ViteでSide panelのChrome extensionの作り方

React + ViteでSide panelのChrome extensionの作り方

1. React + Viteのプロジェクトを作って、Tailwind CSSなどを設定する

2. Chrome extension

• Manifest.jsonを追加する

{
    "manifest_version": 3,
    "name": "日程チェッカー",
    "version": "1.1.1",
    "action": { "default_title": "アプリを開く" },
    "side_panel": {
      "default_path": "index.html"
    },
    "icons": {
      "16": "logo.png",
      "32": "logo.png",
      "48": "logo.png",
      "128": "logo.png"
    },

    "permissions": ["identity", "sidePanel", "storage"],
    "oauth2": {
      "client_id": "your_cliend_id",
      "scopes": [
        "https://www.googleapis.com/auth/calendar.events.readonly",
        "https://www.googleapis.com/auth/directory.readonly",
        "https://www.googleapis.com/auth/userinfo.profile",
        "https://www.googleapis.com/auth/userinfo.email"
      ]
    },
    "background": {
      "service_worker": "service-worker.js"
    },

    "key": "key_of_chrome_extension"
}

• GoogleログインのOAuth2を使うため

  • clientIDとkeyを開発者アカウントで設定する必要がある
  • 認証の後Access Tokenを取得して、Google APIをアクセスするため、Access Tokenが必要

• Side panel

  • side_panelを設定して、Side panelのChrome拡張機能を作れる
  • backgroundのservice-worker.jsでSide panelの入り口を作る

    // Allows users to open the side panel by clicking on the action toolbar icon
    chrome.sidePanel
      .setPanelBehavior({ openPanelOnActionClick: true })
      .catch((error) => console.error(error));
    

  • Side panelのwidthが360pxで決められるので、現在プログラミング上で修正できない（将来できるかも）

• アプリで使うGoogle APIの権限をScopeで設定して、Access Tokenを使って、情報を取得する

  • https://www.googleapis.com/auth/calendar.events.readonly Google Calendar APIで読み込み権限
    https://www.googleapis.com/auth/directory.readonly Google People APIで連絡先の読み込み権限
    https://www.googleapis.com/auth/userinfo.profile ログインされるユーザの情報
    https://www.googleapis.com/auth/userinfo.email

3. npm run buildをして、distフォルダを生成されて、chromeに導入する