Zenn
🕶️

自分用Chromeの新しいタブをVite+React+TypeScriptで作る

2023/11/10に公開
Chrome拡張
React
TypeScript
Vite
tech

はじめに

Google Chromeの新しいタブを自分用にカスタマイズしたいなと思い、どうやってやるのかを調べた際のメモです。

Viteのプロジェクトを作成する

https://vitejs.dev/guide/#scaffolding-your-first-vite-project を参考にViteのプロジェクトを作成します。今回はReact+TypeScriptでプロジェクトを作成します。

$ npm create vite@latest my-newtab                       
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Scaffolding project in /XXX/XXX/XXX/my-newtab...

Done. Now run:

  cd my-newtab
  npm install
  npm run dev

テンプレートが作成できたら指示に従って npm install します。

cd my-newtab
npm install

ビルドして新しいタブで表示するページを生成する

一旦Viteプロジェクトの初期状態のページを表示するためにビルドします。

$ npm run build

ビルドが完了すると dist にhtml,js,cssが生成されます。

manifest.json を作成する

プロジェクト直下に manifest.json を作成します

manifest.json
{
  "name": "my-newtab",
  "manifest_version": 3,
  "description": "my-newtabの説明",
  "version": "0.0.1",
  "permissions": [
    "management"
  ],
  "chrome_url_overrides": {
    "newtab": "dist/index.html"
  }
}

The chrome.management API provides ways to manage the list of extensions/apps that are installed and running. It is particularly useful for extensions that override the built-in New Tab page.

  • chrome_url_overridesでnewtab(新しいタブ)をViteで生成したページを表示するようにdist/index.htmlを指定します。

作成したプロジェクトを拡張機能としてChromeで読み込む

  1. chrome://extensions/ にアクセスします。
  2. ディベロッパーモードをONにします。
  3. 「パッケージ化されていない拡張機能を読み込む」から先ほど作成したプロジェクトを選択します。

    選択すると一覧に自作の拡張機能が表示されます。
  4. 新しいタブを開くとモダールが表示されるので「そのままにする」を選択します。

    これで完了と思いきや、まさかの画面が真っ白です。

    コンソールでログを確認してみると、Failed to load resource: net::ERR_FILE_NOT_FOUND と表示されています。jsやcssが読み込めていないようです。

アセットのパスを相対パスにする

package.jsonのbuildコマンドを修正して、アセットのパスを相対パスにします。

package.json
{
  ・・・
  "scripts": {
    "dev": "vite",
    // 👇 See: https://vitejs.dev/guide/build.html#public-base-path
    "build": "tsc && vite build --base=./",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  ・・・
}

これで再度、npm run buildして、Chromeで新しいタブを開くとViteの初期ページが表示されます🎉

あとは

  1. 表示させたい画面を実装
  2. npm run build

で反映で自分専用の新しいタブを実装できます。

Discussion