😝

Svelte + Vite で簡単なChrome拡張機能の作成

2023/08/24に公開

Chrome

個人的にChrome拡張機能を作ったきたことがなかったので、Chrome拡張機能の世界にも飛び込んでみようとかとおもっています。その第一段です。

今回はセットアップレベルの記事なのですが、開いているChromeから何か思いついたり、メモしたいなぁとものがあったら、ヘッドレスCMSなどと連携させて作成した拡張機能からそのまま書留できるそんなアプリを作れたら考えております。

※この記事は vite v3でのお話です。

セットアップ

viteでセットアップしていきます。今回はSvelte, Typescriptを選択していきます。

$ npm init vite@latest
$ cd sample-svelte-ctx
$ npm install

manifest.json

vite単体でプロジェクトを作成した際、Chrome拡張機能で必要な manifest.json がないのでビルド時に生成できるように下記の vite.config.ts ようにて設定を記述していきます。今回は新規プロジェクト作成時にあるカウンターアプリをそのまま代用していきます。アプリ名を Counterみたいな形にします。

vite.config.ts

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { crx, defineManifest, } from '@crxjs/vite-plugin';

const manifest = defineManifest({
  manifest_version: 3,
  name: "Counter",
  version: "1.0.0",
  permissions: [],
  action: {
    default_popup: "index.html",
  },
});

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte(), crx({ manifest })]
})

インポート

ビルド
typescriptで開発しておりますので、インポートの前にビルドを行います。

$ npm run build

インポート
Chromeブラウザを開いて拡張機能を開き、デフォルトのビルド先dist/からインポートをおこないます。インポートをブラウザの方で完了すると作成したCounterアプリが出現しますので、右上端にある拡張機能開くボタンをクリックさせてポップアップがでたら今回は成功です。

まとめ

上記のように意外と？簡単にchrome拡張機能ができるのだなーとわかりました。manifest.jsonの設定次第ではいろんな形の拡張機能としてつくれるのではないかと考えております。今回はSvelteで実装してみましたが、これぐらいのレベルなら個々で好きなライブラリを選択するとよいと思っています。

私個人としてはVanillaJS + jQuery で拡張機能を開発できるようになれればと考えております。その考えている理由は今回は割愛させていただきます。

次回以降、manifest.jsonセットアップを深堀できればと考えております。

セットアップ

manifest.json

インポート

まとめ

Discussion