サンプルアプリについて 今回サンプルとして Zenn の閲覧履歴を管理できる Chrome 拡張機能を作成しました。 メッセージパッシングやストレージなど基本的な Chrome 拡張 API を使用しているので学習の補助などにご活用ください。 ソースコードは MIT ライセンスで公開しています。
![【TypeScript】ReactとCRXJS Vite Pluginで作るChrome拡張機能](https://cdn-ak-scissors.b.st-hatena.com/image/square/65fcc78bd8bae20bbc1f8e6076c1f398c6e1a8f4/height=288;version=1;width=512/https%3A%2F%2Fstorage.googleapis.com%2Fzenn-user-upload%2Favatar%2F426b418501.jpeg)
はじめに Chrome拡張機能を作る機会があったのでその時のメモです。 ライブラリ選定 以下のライブラリを使用する。 React TypeScript Vite Material-UI prettier 選定基準は新しすぎず古すぎない。 プロジェクトの作成 プロジェクト作成は以下のサイトを参考に行う。 vite3がbeta版なので、vite2を使用する。 プロジェクトの設定 MUIは以下のサイトを参考にインストールする。 prettierは以下のコマンドでインストールする。 . ├── manifest.json ├── package-lock.json ├── package.json ├── src │ ├── background.ts │ ├── content.ts │ └── popup │ ├── App.tsx │ ├── index.css │ ├── index.ht
最近、Vite + TypeScriptの構成でマニフェストV3のChrome拡張を作った。 今後もChrome拡張を作る機会は何度もありそうなので、未来の自分のために、この記事では次のことが参照できるようにする。 Vite + TypeScriptで作る場合のファイル構成Chrome拡張でよくある処理をどう実現するか以前Chrome拡張をwebpackで開発する話を書いたことがあるが、この記事は、その記事のVite版である。 Chrome Extensions を wepback + TypeScript で開発する 動作を確認した環境 Typescript v4.6.4Vite v3.2.3@crxjs/vite-plugin v2.0.0-beta.17CRXJS Vite Plugin 今回は、CRXJS Vite PluginというChrome拡張を作るためのViteのプラグイン
Transcript Svelte + TypeScriptͰ Chrome֦ுΛ࡞Δ Sakito ࣗݾհ • ໊લɿsakito • Twitterɿ@__sakito__ • ॴଐ • αΠϘζ גࣜձࣾ ϑϩϯτΤϯυΤΩεύʔτνʔϜ ΞδΣϯμ • Svelteͱʁ • ࡞Δͷ • ڥߏங • manifestΛ࣮Λ͢Δ • svelteͰ࣮Λ͢Δ • ·ͱΊ Svelteͱʁ Svelteͱ? • React,Vue,AngularͷΑ͏ʹએݴతʹUIΛॻ͚Δ • গͳ͍ίʔυͰ࣮͕Ͱ͖Δ • https://svelte.dev/blog/write-less-code • ԾDOMͳͲΛ༻ͤͣɺϏϧυ࣌ʹ࠷దͳόχϥJSʹม͢Δ • ͦͷ্ύϑΥʔϚϯε༏Ε͍ͯΔ • TypeScriptͷରԠ͞Εͨ • https://svelte.de
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く