ReactとTypeScriptで、シンプルかつ実用的なChrome拡張機能を開発するための入門書です。 開発のために最低限知っておきたい知識から環境構築の方法、実装で陥りやすいポイントまでを網羅的に解説します。 また、本書を読むことでDeepLのような実践的な翻訳Chrome拡張機能を開発できるようになります。 所要時間: 約2時間 対象者: Reactを少しでも触ったことがある人 【2023/02/20】 初版を公開しました! 【2024/02/18】 改訂版を公開しました!
![ReactではじめるChrome拡張開発入門](https://cdn-ak-scissors.b.st-hatena.com/image/square/3d14d649f8639dd587226e690ced72863a1714fc/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--wZG2VB9e--%2Fg_center%252Ch_280%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYm9va19jb3Zlci83MzJhMzIzZjRlLnBuZw%3D%3D%252Cw_200%2Fv1627283836%2Fdefault%2Fog-base-book_yz4z02.jpg)
最近リリースされたChrome拡張機能「AWS Peacock Management Console」をご紹介します。 AWS Peacock Management Console - Chrome ウェブストア AWSマネジメントコンソールを見やすくしてくれるChrome拡張機能です。AWS SSOを使って、いや使わない場合でも、複数のアカウントのコンソールを行き来するようなAWSの使い方をしている場合、「あれ、今どのアカウントにログインしているんだっけ?」と迷子になることはありませんでしょうか。私はよくあります。この拡張機能はその問題を解決します。 具体的にはこの拡張機能は、コンソールの2箇所の表示を変えることで、今どのアカウントにログインしているのかを判別しやすくします。 1. グローバルヘッダーの色の切り替え どの画面でも共通して表示される一番上の黒背景の部分のことです。拡張機能を
経緯 もともとMouseoverDictionaryという素晴らしいFirefox用辞書があったのですが、Quantumの登場とXULの廃止とともに使えなくなってしまったため、自分用にChrome拡張をつくった次第です。 ソースコード 実装に関わる技術寄りの用語: React, esbuild, chrome.storage.local, chrome.storage.sync, Cross-extension messaging, Hogan, debounce, resizable/draggable, intl.v8BreakIterator, deinja, クロスブラウザ, など。 ※詳細は「Mouse Dictionaryの技術的な話」をご参照ください https://qiita.com/wtetsu/items/2a5568cb0b5a38c003fb 使い方 インストール
つい先ほど公開したWIRED.jp の「ヴ」を変換するブックマークレットに加えて、WIRED.jp の「ヴ」を、対応する適当な文字に変換する Chrome 拡張機能を作成しました。 Wired Normalizerです。 この Chrome 拡張機能では、変換は、記事を読み込むことで自動的に行なわれます。 WIRED.jp では無限スクロールによって記事が追加的に読み込まれることがありますが、ブックマークレットでは、ブックマークレットを適用してから読み込まれた記事には変換が行なわれないという問題があります。 Chrome 拡張機能では、追加的に読み込まれた記事にも変換が適用されます。 変換の例 変換前 変換後 シリコンヴァレー シリコンバレー ヴィデオ ビデオ サヴァイヴ サバイブ レヴェル レベル ヴォキャブラリー ボキャブラリー マウンテンヴュー マウンテンビュー イノヴェイション イ
a.md Chrome ExtensionのLive HTTP Headersを調査した。Firefox用のものではない。Firefox用のものではない。 https://chrome.google.com/webstore/detail/live-http-headers/iaiioopjkcekapmldfgbebdclcnpgnlo 11/7追記 類似 or 同様の方法で難読化scriptを埋め込んでいる拡張機能が大量にあったため、Googleに報告済み。 https://twitter.com/bulkneets/status/795260268221636608 English version: https://translate.google.com/translate?sl=ja&tl=en&js=y&prev=_t&hl=ja&ie=UTF-8&u=https%3A%2F%
You can find (just about) anything on Medium — apparently even a page that doesn’t exist. Maybe these stories will take you somewhere new?
やまもといちろうさんのブログ移転に伴い、新ブログ( http://lineblog.me/yamamotoichiro )に対応いたしました。 「緑背景こそが、やまもといちろうブログだろ!!!」という多くのファンの声にお応えいたしました。 どうぞよろしくお願いいたします。(追記ここまで) 有名ブログやまもといちろうBLOGを見やすく補佐する Chrome拡張機能「切込隊長補佐」をリリースしました。 インストールはこちらから! Chrome ウェブストア – 切込隊長補佐 この拡張機能を作った理由 やまもといちろうブログは、愛読しているブログのひとつで、大好きです。 ただ、読みづらいんです。背景緑の白文字は、とても読みづらい。 また、一段落が長く、改行が少ない構成の為、非常に体力を使うのです。 「それが切込隊長の良さだろ馬鹿野郎」と言われればそれまでなのですが、 どうにか見やすくできればいい
アップデートの分類 Firefoxには三つのアップデートがある。一つはセキュリティアップデートで、たとえばFirefox 3.0.7から3.0.8へとバージョンアップする場合だ。もう一つはメジャーアップデートで、Firefox 2からFirefox 3へのバージョンアップがこれに当たる。最後はアドオンのアップデートで、とくに主要な拡張機能がバージョンアップすると、セキュリティアップデート以上にユーザーへの影響が大きい。 Firefoxには昔から、本体とアドオンのアップデート機能が備わっている。本体に関していえば、セキュリティアップデートの場合、一つ前のバージョンから更新するときは差分アップデートが、それ以前のバージョンからだとフルアップデートが提供される(『現在提供されているFirefoxアップデートの経路』参照)。それでも、Firefox 3を使っていれば、このアップデート機能を使って3
Google Chromeの機能拡張を作ったので公開しました。 CustomBlocker (Chrome Web Store) かなり細かいフィルタリング機能を追加します。 どこのサイトで どの要素の中を検索して どんなキーワードが含まれたら どの要素をブロックするか というのを全部自分でカスタマイズできます。 HTML文書の中の狙った要素(しかも複数)を選択するとなると、どうしてもXPathを自力で書いたりしないといけないので非常に面倒だし、それなりに知識が要りますが、この拡張にはHTML文書の中の要素を選ぶとそれに類似した要素を選択できそうなXPathをいくつかsuggestしてくれるという親切機能をつけておきました。たとえば、Twitterの「本文」をひとつクリックすると、空気を読んで同類の要素を選択できるXPathをひねり出してくれます。 これを使うと、 TwitterやFa
Chrome拡張のSmooth Gesturesをインストールするとサイト内の広告が置き換えられてしまう 2011-12-22 目次 変な広告が表示される 何気なくChromeでサイトを見ていたところ、 「なんか、変な広告が表示されるなー。それも、サイト表示後に、一瞬遅れて」 と思って原因を探ってみたところ、Chrome拡張のSmooth Gesutresが、サイト内の広告っぽい領域を置き換えていたのでした。 置き換えられて表示されていた広告。なんだよ、これ。 設定で停止することはできる 一応、Smooth Gesturesの設定で動作を止めることはできます。Enable Sponsorship、という項目です。(でも72時間しか停止できない、と書いてある気もします) Smooth Gesturesの設定画面 「表示される広告の収益はSmooth Gesturesの開発者達が食べていくため
Interactive Javascript with jQuery and jLinq
先日、Adobeからモバイル向けFlashの開発中止というニュースがありました。 リッチコンテンツの領域で独占していたFlashでさえ、HTML5の標準化の波には逆らえなかったんですね。 来年あたりから、HTML5の利用が一気に加速していく予感がします。 筆者も、最近ではサイト構築の際にHTML5を選択する機会が増えてきました。 HTML5+CSS3+jQuery この組み合わせで、ほとんどのWebアプリケーションの機能を実装することができる時代になってきたと思います。 必要なデータは、クラウドに保存してAPI経由で読み書きできれば良いので、その部分だけサーバーサイドに任せる感じのシンプルな構成になればベストです。 JavaScriptの部分は、別にjQueryじゃなくてもよいのかもしれませんが、プラグインや情報が豊富で、jQueryが使える開発者も多いことから、jQueryを選択しておけ
ローカルプロキシサーバーソフトのProxomitron(以下オミトロン)を使ってニコニコ動画を見たりするのですが、何かと問題がでる可能性があるので通常のサイトはダイレクトアクセスで見たいわけです。 しかし、ブラウザに特定のURLだけプロキシサーバー経由でみるという機能は付いてないのわけで、しかもGoogle ChromeはIEと同じインターネットオプションを使っているのでオミトロン経由でインターネットに接続するように設定するといろんなところに影響があるわけです。VMwareのVMwateToolsのアップデートとかもインターネットオプション経由ですし、オミトロンが起動してないとインターネットに接続できなくなるのでオミトロン停止しててはまるということがあったりするわけです。そういうわけで、今までは、独自にプロキシサーバー設定できるOperaをオミトロン経由でインターネットに接続する様にプロキ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く