【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のプラグイン
Awesome Dev Tool Tips 🔥
Contents (Click to expand) ↕️ Design Mode Pretty Print Command Pallet and Super Search Snippets Live Expressions Tracking Changes Console Shorthand Find Unused Code Rendering Panel Network Paint Times Network Timings Inspect Network Requests Performance Identifying Memory Leaks Raw Memory Inspection Test bfcache Full Refresh Lighthouse Page Size Breakdown Record User Flows Advanced User Flow Opera
レスポンシブの確認が簡単に！ iPhone, iPad, Androidなど各モデルのサイズ、操作や動画にも対応した優れもの -モバイルシミュレーター
iPhoneをはじめ、PixelやGalaxyのAndroidスマホ、iPadやGalaxyのタブレット、ラップトップ、ワイドスクリーンなど各モデルのサイズでWebページを表示して確認ができるChromeの機能拡張を紹介します。 デベロッパーツールのデバイスモード（command+shift+M）で各デバイスの表示を確認できますが、モバイルシミュレーターはさらに多くのデバイス、スクリーンショット・動画撮影など機能も充実しています。また、モバイルシミュレーターでデベロッパーツールを使用することも可能です。 無料で、多くのデバイスをサポートしているのがいいですね。 WinでもMacでも、ツールバーと右クリックから1クリックで簡単に起動できます！ Mobile FIRST レスポンシブの確認を簡単にできます。 スクロール・スワイプなどの操作をはじめ、リンクをクリックしてのページ移動もできます。
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
chrome devtools の tips N連発 - mizdra
mizdra.icon が社内向けに発表した資料なのですが、折角なので一般向けに書き直して公開します。
puppeteerで動的にウインドウの大きさを変更するには - non vorrei lavorare
こんばんは。先週は次男が発熱で実家に居て、週末に自宅に帰ってきた@kjunichiです。 背景 puppeteerで非ヘッドレスモード（Chromiumが画面に表示されるモード）でブラウズしている様子をキャプチャーする際にChromiumのウインドウのサイズを変更したくなった。 page.setViewportでは、ウィンドウのサイズは変わらない page.setViewportでは、ウインドウのサイズは変わらなかった。puppeteerでpdf等のファイルの保存した際の画面サイズは このメソッドで変更されるが、画面に表示されているウインドウのサイズは変わらなかった。 Chrominumのウインドウのサイズを変更するには 以下のISSUEを見つけた github.com ここに、ヒントになるコードが載っていた。 puppeteerで非ヘッドレスモードで表示されているウインドウのサイズを動的
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 🪄
Yashints | If you consider Puppeteer cool, then Playwright is awesomeness 😍
If you consider Puppeteer cool, then Playwright is awesomeness 😍 If you’ve ever used Puppeteer, you’d know it enables you to control a Chrome instance (or any other Chrome DevTools Protocol based browser) and execute common actions, much like in a real browser - programmatically, through a decent API. The same team has now build a new product called Playwright which apparently is their new favour
Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる
Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。 表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。 Chromeの新機能「CSS Overview」 Fyi: New in Chrome: CSS Overview Chromeの新機能「CSS Overview」の準備 Chromeの新機能「CSS Overview」の使い方 Chromeの新機能「CSS Overview」の準備 まずは、Chrome デベロッパーツールを開き、右上の歯車アイコン（Settings）をクリックします。
Chromebookを快適な開発環境にするためのプチノウハウ群（2024年2月版） - Qiita
Chromebook歴も10年ぐらいになりました 4年使用したPixelbook Goに変わってメインマシンとなったASUS CX3402。CPUの世代が4つ上がってファン付きになったのでおおよそどのベンチマークでも2-3倍のスコアが出ていて快適😭。ちなみにこのマシンからLinuxコンテナは複数使い回すことにして、よく変える環境と実験の環境は分けることにした。 pic.twitter.com/BcMbcvIilI — Taiki Komoda (@komde) February 18, 2024 #Pixelbook go 到着。到着して開封して起動して5分で(アップデート走ったので、通常なら2分)仕事再開できるのホント生産性高い。hp x360 14 はTDP高いi3でOctaneで5000ぐらいスコア高かった(32000)けど、Pixelbook go m3のほうが体感スピード速い。
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
Release v2.0.0 · puppeteer/puppeteer
Big changes Chromium 79.0.3942.0 (r706915) Puppeteer now requires Node.js v8+; Node.js v6 is no longer supported page.screenshot now clips elements to the viewport (#5080) New APIs: page.emulateTimezone(timezoneId) page.emulateMediaType(type) (superseding the old page.emulateMedia(type) API) page.emulateMediaFeatures(features) API changes New API: page.emulateTimezone(timezoneId) (#4949) New API:
Dockerコンテナ内でpuppeteerを使うとChromeゾンビプロセスがたまる問題 - その手の平は尻もつかめるさ
表題のような問題があり，その調査したという記録です．なお，結論を一言で言うと--initを使え，ということになります． そもそもDockerコンテナを起動すると，CMDあるいはENTRYPOINTに指定されたコマンドがコンテナ内でPID 1として起動します．これが何を意味するかと言うと，「CMDあるいはENTRYPOINTに指定されたコマンド」はそのコマンド自体の責務をまっとうするのと同時に，initプロセスとしての振る舞いも行わなければならないということになります (id:hayajo_77さんにこの辺を詳しく教えてもらいました，ありがとうございます)． つまりPID 1で動いているプロセスは「SIGCHLDをトラップすることで孤児プロセスを適切に回収し，waitpidをかける」という処理も適切に行う必要があります． さて，puppeteerを使ってChromeブラウザを起動するとどうな
Puppeteer on LambdaでWebページのキャプチャを撮る | PRESSMAN*Tech
AWS Lambdaで遂にNode v8.10を使用できるようになりました。 これでPuppeteerが使える！と意気揚々としていたのですが、いつの間にか必須要件がv6.4.0以上となっていました。以前はv7.10以上必須と書かれていたはずですが・・・ いきなり出鼻を挫かれましたが、気を取り直していきます。 はじめに：PuppeteerとはGoogle謹製のGoogleChromeを自動操作するライブラリです。Nodeで動作します。 「このサイトにアクセスして、このボタンをクリックして・・・」といった操作を自動で行うことができます。雑に言うとExcelのマクロみたいなものです。 Chrome59で実装されたヘッドレスモードに合わせる形でプロジェクトが立ち上がり、主にWebアプリの自動化テストの分野で注目されています。 似たプロジェクトにPhantomJSやChromelessがあります。
carlo + parcelでお手軽デスクトップアプリケーション - Qiita
ウェブ技術でデスクトップアプリを開発するとなると、一番メジャーなのはやはりelectron/electronでしょう。ところがElectronは割と面倒です。配布ファイルのサイズ、セキュリティなど。 それとバンドラとして有名なWebpackですが、こっちも仰々しいです。 そこで今回はライトウェイトでゼロコンフィグな、carloとparcelの組み合わせについて書きます。 GoogleChromeLabs/carloは先日登場したばかりの headful Node app framework です。headlessならぬheadfulです。 中身はぶっちゃけると puppeteer-core の薄いラッパーです。 普通のPuppeteerはオープンソースのChromiumをダウンロードしてきて動作しますが、puppeteer-coreは既にローカルにインストールされているChromeなどを対
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactではじめるChrome拡張開発入門
Bug: DevTools tabs don't show up sometimes in latest release · Issue #19002 · facebook/react
Project Tab Manager
