【TypeScript】ReactとCRXJS Vite Pluginで作るChrome拡張機能サンプルアプリについて 今回サンプルとして Zenn の閲覧履歴を管理できる Chrome 拡張機能を作成しました。 メッセージパッシングやストレージなど基本的な Chrome 拡張 API を使用しているので学習の補助などにご活用ください。 ソースコードは MIT ライセンスで公開しています。
ReactでChrome拡張機能を作るメモ
はじめに 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 │ ├── i
Chrome拡張 つくりかた 令和最新版
数年ぶりにChrome拡張のつくりかたを調べた。 本当に何も分からなかったので、Twitterで「2022年にChrome拡張つくりたかったら何見て学べばいい？」とつぶやいてみたところ、何人かの人が教えてくれた。教えてもらった中から幾つかのリンク先を紹介するような形で記述していく。 Create a Vite-React Chrome Extension in 90 seconds - DEV Community 2022年時点だと比較的新しめのフロントエンド向けツールであるviteと、viteのChrome拡張向けプラグインである@crxjs/vite-pluginを使ってChrome拡張をつくってみよう、という記事。今回自分は主にこれを参考にしながら開発を進めた。Reactと言っているが、自分のChrome拡張ではUIは存在しなかったので、Reactに関する部分は読み飛ばして、vite
electronに手軽にDevTools Extensionを導入する - Qiita
react devtoolsやredux devtoolsは非常に便利ですが、electronではchromeにインストールしたDevTools Extensionをそのまま使えません。 そして、electronはDevTools Extensionをサポートしていますが、その導入はやや複雑です。 electron/devtools-extension.md ドキュメントにはReact Developer Toolsを例にその導入方法が書かれています。 ChromeにReact Developer Toolsをインストールしてください。 検索バーからchrome://extensionsに移動し、extension IDを見つけます。fmkadmapgofadopljbjfkapdkoienihiのようにハッシュ文字列になっています。 拡張機能を格納しているChromeのファイルシステムの
ElectronでChrome Extension使えるようにするまでのハマりどころ - Qiita
const {BrowserWindow} = electron; const os = require('os') const path = require('path') const fs = require('fs') function createWindow() { : : // react dev toolのID const id = "fmkadmapgofadopljbjfkapdkoienihi" // extensionの場所、"~/Library"だとダメだった const extensionDir = path.resolve(os.homedir(), "Library/Application Support/Google/Chrome/Default/Extensions/") // version指定 const versions = fs.readdirSy
New React Developer Tools – React Blog
This blog site has been archived. Go to react.dev/blog to see the recent posts. A month ago, we posted a beta of the new React developer tools. Today, we’re releasing the first stable version of the new devtools. We’re calling it version 0.14, but it’s a full rewrite so we think of it more like a 2.0 release. It contains a handful of new features, including: Built entirely with React, making it ea
React Developer Tools - Chrome Web Store
Adds React debugging tools to the Chrome Developer Tools. Created from revision 44c3d3d665 on 2/7/2025. React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools. You will get two new tabs in your Chrome DevTools: "Components ⚛" and "Profiler ⚛". The Components tab shows
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactではじめるChrome拡張開発入門
Bug: DevTools tabs don't show up sometimes in latest release · Issue #19002 · facebook/react
GitHub - zalmoxisus/crossbuilder: Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.
GitHub - zalmoxisus/redux-devtools-extension: Redux DevTools extension.