【2024年夏】ブラウザ拡張機能開発を加速するフレームワーク・ツール3選をコードベース付きで紹介！
本記事では、ブラウザ拡張機能開発を加速させる、個人的に注目な3つの拡張機能開発フレームワーク・ツール（WXT、Plasmo、Extension.js）を紹介します。 サンプル拡張機能の実装を通して、それぞれの特徴、セットアップ方法、実際の開発フローを見ていきます。お好みの拡張機能開発ツールが見つかれば嬉しいです。 各フレームワーク・ツールの紹介 WXT WXTは、Viteベースのブラウザ拡張フレームワークです。次のような特徴を持っています（トップページから抜粋）。 クロスブラウザ対応 Chrome、Firefox、Edge、Safari、その他Chromiumベースのブラウザ Manifest V2、V3の両方に対応 開発モードでのHMRと、開発用ブラウザの自動起動 内部的にChrome Launcher等を使用 ファイルベースのエントリーポイントでマニフェストを自動生成 Nuxt風の自動
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
電子情報学特論：Chromiumのアーキテクチャを解き明かす
電子情報学特論： Chromium のアーキテクチャを解き明かす 〜 EEIC の授業が生きるプロダクトの世界〜 Kentaro Hara 2020 April (๑>ᴗ<๑) * * * *
Chromeは通信量を50%も節約できるなんて知りませんでした。格安SIM運用に最適なブラウザかも。 - いつもマイナーチェンジ！
言わずと知れたブラウザであり、僕も利用している Google Chrome ですが、通信量を50%節約できる設定があります。 僕はずっと iPhoneユーザーで、スマホのブラウザといえば Safari を利用していたので、Chromeの情報はあまり気にしてなかったのですが、この節約機能は 2014年1月頃のアップデートから利用できるようになったようです。 リリースから１年も知らずにいたとは^^; 何にしてもとてもすばらしい機能なので、記事に残しておきます。 まずはやり方を Androidの場合 iPhoneの場合 これだけです。 たったこれだけで、画像にもあるように50%程の通信量を節約できます。 なんという簡単設定。 なぜ通信量が節約できるのか簡単に言うと、「画像の圧縮と最適化を行うから」です。サイトの読み込みで一番時間がかかるのは、なんといっても画像です。その画像を更に圧縮してくれると
GithubやGitlabで開発する時に入れるべきChrome Extension - くりにっき
タイトルは若干釣り気味です GithubとGitlab両方使える MISAWA::MD https://chrome.google.com/webstore/detail/misawamd/legplkhbgdelfceignhcchogkmoflagl ミサワ画像をMarkdown形式でコピペできます Emoty https://chrome.google.com/webstore/detail/emoty/kgljgnbhcigffgoifhjbbifhbdkapmgm Githubなどで使える絵文字をポップアップで選んでクリップボードにコピペできます LTTM https://chrome.google.com/webstore/detail/lttm/jdidcgkdggndpodjbipodfefnpgjooeh textareaで手軽にミサワや LGTM.in/g の補完ができ
業務スピードが上がる！Google Chromeのおすすめ拡張機能9選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。GoogleChrome（グーグル・クローム）をこよなく愛する男、鮫島です。 仕事でもプライベートでもChromeを使いまくっているのですが、今回は超絶便利なChromeの拡張機能（エクステンション）をいくつかご紹介します。 これを全て使いこなせれば、業務の効率は確実に上がるので、特にWeb制作のディレクターの方にオススメですよ！ もちろんディレクター以外の人も使える拡張機能はたくさんあるので参考になれば！ そもそもGoogleChromeの拡張機能（エクステンション）ってなんなの？ 一言で言うと、Chromeに機能を追加するためのもの。Chromeにはいろいろな拡張機能が用意されていて、インストールすると、ページ全体のキャプチャを撮ったり、不必要な広告をブロックしたりする機能を追加できます。GoogleChromeのデフォルトの機能で物足りない方にオススメです。人によっては、
Effectively managing memory at Gmail scale | Articles | web.dev
Effectively managing memory at Gmail scale Stay organized with collections Save and categorize content based on your preferences. Introduction While JavaScript employs garbage collection for automatic memory management, it is not a substitute for effective memory management in applications. JavaScript applications suffer from the same memory related problems that native applications do, such as me
Chrome の拡張 JSONView が便利ですね - latest log
この記事の賞味期限は2013年内です。10秒で読めます。 (ε・ ワ ・)з 勘違いがありまして、本文の趣旨が変わり Chrome の拡張 JSONView の機能紹介になりました JSONView をインストールした状態でhttp: や https: スキームで始まる JSONファイルを開くと、改行やスペースを含まない(圧縮された状態の)JSONも、適切に展開した状態で見ることができます。 この状態で、マウスを各要素にホバーさせると、画面下の薄い紫の部分に、要素にアクセスするためのパスが表示されます。 紫色の部分: tree[0].attrs.frame[3] xpath のようなこれは、json path とでも呼ぶのでしょうか? また、各ノードの左側にある - や + をクリックすると展開と折りたたみが行われます。 以下のパスを JSONView をインストールした状態で開くと、お試
tracing-framework by Google
Rich Tracing Choose what methods to trace and add custom data to each event. Track asynchronous flows and actions. Slick Visualization Smoothly dig through millions of events in an awesome UI. See patterns and understand your code like never before.
Chrome's 10 Caches
While defining the set of page load time metrics that we think are most important for benchmarking, Mike Belshe, James Simonsen and I went through a seemingly simple exercise: enumerate the ways in which Chrome caches data. The resulting list was interesting enough to me that I thought it worthwhile to share. When most people think of "the browser's cache" they envision a single map of HTTP reques
Google Cloud Messaging for Chromeを体験してみた | コーヒーサーバは香炉である
Google Cloud Messaging for Chromeキター! これでChrome Extensionに対してサーバからプッシュ通知ができる。 グーグル、「Chrome」でプッシュ通知を可能に–「Google Cloud Messaging for Chrome」発表 – CNET Japan Chromium Blog: Building efficient apps and extensions with push messaging Google Cloud Messaging for Chrome – Google Chrome もともとGCM (Google Cloud Messaging) はAndroid向けのテクノロジーで、C2DM (Android Cloud to Device Messaging) の後釜のようなものだった。それがGoogle Chro
Google Chromeで複数AWSアカウントでの作業を快適に行う方法 ｜ DevelopersIO
頻繁にAWS Management Consoleでログイン・ログアウトを繰り返したりしていませんか？ 日頃AWSを利用して業務を行う際、複数のAWSアカウントを切り替えて作業を行う場合があります。もちろん、AWSで作業を行う場合、必ずといっていいほどAWS Management Consoleにログインを行うと思います。 下記の見慣れた画面にメールアドレスとパスワードを入力しログインしては、作業が終わればログアウトし、また別のアカウントのメールアドレスとパスワードを入力し。。。（以下略） 現在、AWS Management Consoleはマルチアカウントに対応していません。そのため、AWSアカウントを切り替えて作業を行う場合は、その都度ログイン・ログアウトを行う必要があります。 そこで、Google ChromeでAWS Management Consoleを利用する場合、Google
val it: α → α = fun - 数ヶ月ほど、テキストエディタを書いてたんですが、とりあえず公開しておきます。 数ヶ月といっても間が数週間とかいったレベルで空いているんで、暇な時間にちま��
数ヶ月ほど、テキストエディタを書いてたんですが、とりあえず公開しておきます。 数ヶ月といっても間が数週間とかいったレベルで空いているんで、暇な時間にちまちま遊んでいたというレベルですが。 コンセプトは、JS + HTML5 + Chrome Apps API といった構成です。もうちょっと安定したらwebstoreにでもアップロードしようかと思いますが、今のところいろいろとひどいので……。でもまぁ、いちおうファイルを開いて保存して、といった基本的な操作がようやくできるようになりました。 シンタックスハイライト可能なJS製テキストエディタは有名なものだけでも何種類かあるのですが、これは自作です。というか自作してみたかった、というやつです。エディタ部分は http://www.jmuk.org/editor/editor.html で動くようにしてあります。 まあそんなわけでまだまだですが、も
High Performance Networking in Google Chrome - igvita.com
The following is a draft chapter for the upcoming "The Performance of Open Source Applications" (POSA), a sequel to The Architecture of Open Source Applications. POSA is a collection of essays about performance optimization, designing for performance, managing performance as part of a development process, and more. The book will be published in Spring 2013 under a Creative Commons license with roy
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Solar Arxiv - Chrome Web Store
GitHub - chromedp/chromedp: A faster, simpler way to drive browsers supporting the Chrome DevTools Protocol.
Open-as-Popup
advanced filtering in Chrome's Network dev tools
GitHub - puppeteer/puppeteer: JavaScript API for Chrome and Firefox
http://buchineko.website/chrome-devtools-cording/
