【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 │ ├── index.ht
Chrome ExtensionsをVite + TypeScriptで開発する - ひよこまめ
最近、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のプラグイン
Kindle で購入済み本の一覧を CSV / JSON でダウンロードするブラウザ拡張を作りました！ - Qiita
Kindle で購入済み本の一覧を CSV / JSON でダウンロードするブラウザ拡張を作りました！ChromeFirefoxWebExtensions amazon.co.jp で購入済みの電子書籍 (Kindle) の一覧を CSV / JSON でダウンロードするブラウザ拡張を作りました！ 既読ステータスも出力できますので、買った本の棚卸しといった用途に使えると思います。 Kindle bookshelf exporter - Chrome ウェブストア Kindle bookshelf exporter – Firefox ADD-ONS ぜひご利用ください！ 使い方 ツールバーの "Kindle bookshelf exporter" ボタンをクリック （この時、amazon.co.jp のログイン画面が表示された場合は、ログイン後に再度ボタンをクリック） "CSVでダウンロー
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
👻 GhostText — Use your text editor in the browser
• Use your text editor in the browser Whenever you’re writing more than a little snippet of code anywhere on the web, activate GhostText to open your preferred text editor and enjoy your own development environment. Installation GhostText is a browser extension that connects to your editor via its own extension. Install both extensions and, if necessary, start the GhostText server in the editor’s
Svelte + TypeScriptで
chrome拡張を作る
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
GitHub - alyssaxuu/screenity: The free and privacy-friendly screen recorder with no limits 🎥
🎥 Make unlimited recordings of your tab, a specific area, desktop, any application, or camera 🎙️ Record your microphone or internal audio, and use features like push to talk ✏️ Annotate by drawing anywhere on the screen, adding text, arrows, shapes, and more ✨ Use AI-powered camera backgrounds or blur to enhance your recordings 🔎 Zoom in smoothly in your recordings to focus on specific areas 🪄
Tampermonkey - Chrome Web Store
Change the web at will with userscripts Enhance your browsing experience with Tampermonkey! 🌐🚀 Tampermonkey is a versatile browser extension with over 🔟 million users that enhances your browsing experience by allowing you to run userscripts on websites. Userscripts are small programs that modify page layouts, add or remove features, and automate actions to personalize your web experience. ###
Project Tab Manager - Chrome Web Store
Project Tab Manager is an extension for Google Chrome that helps you focus on a single project. Project Tab Manager is an extension for Google Chrome that helps you focus on a single project. It preserves each windows as projects, not only you can restore them anytime, you can synchronize projects across different devices using same Chrome profile. * In order to preserve window status for later us
Next.jsを使用してGoogle Chromeの拡張機能を作るとレイアウトとルーティングができるので結構楽に拡張の開発ができる。 - Qiita
Next.jsを使用してGoogle Chromeの拡張機能を作るとレイアウトとルーティングができるので結構楽に拡張の開発ができる。ReactNext.jsアドベントカレンダー2019 はじめに @yushimatenjinです。Next.jsアドベントカレンダー4日目ですね。 Next.jsを使うと簡単にGoogle Chromeの拡張機能が作れるんじゃないかなと思ったら簡単に作ることが出来たのでその紹介を今回しようかなと思います。 このときに得た知見をもとに書いています。 Google Chrome 78にアップデートされたところ、今まであった、現在開いているタブ以外を閉じる機能がなくなっていて作業がはかどらなかったため、Chrome Extensionsを作ってみました。 アイコンを押すとすべてのタブを閉じるだけです ↓ダウンロードhttps://t.co/oBt2S62m9F pi
Dark Reader
すべてのウェブサイトにダークテーマを適用します。夜間や毎日のブラウジングにDark Readerを使用し、あなたの目を気遣います。
Chrome拡張を簡単に作れるテンプレとライブラリ造ったので紹介 - Qiita
Chrome拡張を長年造ってきたなかで 手法や自作ライブラリが充実してきたのでこの辺で公開します。 Chrome拡張は本当に効果的に改善できて、すばらしい仕組みです。 これで皆さんが簡単に現場改善が進んだら嬉しい限りです。 (なお、これは 2017-08-05 Builderscon Tokyo 2017 でのトーク用に作成した資料です) わりと ウケた 改善 どんなことができるのか、ざっと見てみましょう。 サンプルページ ※各項目ごと、「拡張を有効化」をクリックすることで拡張が入った状態を見ることができます。 Chrome拡張を作るのに必要な 環境 必要な環境はシンプルです。 Google Chrome Text Editor or IDE(UTF-8 が扱えるなら何でもいい) （公開するなら）Zip 圧縮ができるソフトウェア （公開するなら）クレジットカード これだけ。 あとは、ソース
任意のスニペットを実行するChrome Extensionを作りました - Qiita
run-snippets 任意のスニペットを実行するChrome Extensionです。 v0.3.0からContent Scriptsによる自動実行も対応しています。 ただし、実行するスニペットは自身の手で書き、ビルド、パッケージを読み込む必要があります。 即座に使える拡張機能ではなく、スニペットをまとめるのに役立つboilerplateという感じです。 Firefoxでも同様に使用可能です。 デモ run-snippets 作ったきっかけ ブックマークレットを作成&修正するのはだるい Chromeのスニペット機能を使おうにもjQueryとかを呼べるようにするのはだるい 簡単にnpm packagesを利用したい 利点 npm packagesが利用できる スニペットをコード管理できる スニペットを実行可能なドメインを指定できる(github.com以外では実行不可など) チームでスニ
GitHub が少しだけ使いやすくなる Chrome 拡張を作ってみた - Qiita
こんにちは。Sansan Android エンジニアの @rockwillj です。前回は Android アプリ向けにライセンス文書自動生成プラグインをフォークした 話でしたが、今回は Android は全く関係なくて GitHub を少しだけ使いやすくする Chrome 拡張を作ってみた話になります。 はじめに 非常に多くのエンジニアが仕事でもプライベートでも GitHub を使っていると思います。ですが長時間 GitHub を使っていると時々イラッとすることがありますよね。例えば幅固定レイアウトとか差分に空白が含まれてるとか8タブとかです そんな「イラッとする GitHub あるある」の解消に役立つのが GitHub Cheat Sheet (日本語訳) だったり Chrome ウェブストアで公開されている Chrome 拡張だったりするのですが、いちいち個別に対応していくのは結構面
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML Table to Markdown - Chrome Web Store
ReactではじめるChrome拡張開発入門
GitHub - crxjs/chrome-extension-tools: Bundling Chrome Extensions can be pretty complex. It doesn't have to be.
Automa
Bug: DevTools tabs don't show up sometimes in latest release · Issue #19002 · facebook/react