ReactではじめるChrome拡張開発入門ReactとTypeScriptで、シンプルかつ実用的なChrome拡張機能を開発するための入門書です。 開発のために最低限知っておきたい知識から環境構築の方法、実装で陥りやすいポイントまでを網羅的に解説します。 また、本書を読むことでDeepLのような実践的な翻訳Chrome拡張機能を開発できるようになります。 所要時間： 約2時間 対象者： Reactを少しでも触ったことがある人 【2023/02/20】 初版を公開しました！ 【2024/02/18】 改訂版を公開しました！
YouTubeのすごい拡張機能10選 | ライフハッカー・ジャパン
YouTubeに拡張機能をダウンロードすることで、視聴体験がググッとアップします。 ただし、これらの拡張機能をダウンロードする際には、調子に乗ってインストールしすぎるのも注意。 スピードが落ちたり、プライバシーが危険にさらされたりするおそれもあります。各拡張機能が求めてくる許可に、「ここまでだったら許せる」という一線を引いてそれを守り、本当に必要な機能だけをインストールするようにしましょう。 1. Enhancer for YouTubeインストールする拡張機能がひとつに限られるなら、選ぶべきは「Enhancer for YouTube」でしょう。 広告がブロックできるほか、どんな動画でもボリュームを大きく上げられますし、デフォルトの画質やフレームレート、コーデックも選択肢が豊富です。Chrome、Firefox、Safari、Operaで利用できます。 2. Volume MasterY
Chrome 拡張機能の content_scripts で CORS を回避する方法
注意 現在は Manifest V3 が登場しているので、もしかしたら Manifest V3 とはやり方が異なるかもしれないが、備忘録として残しておく。Manifest V3 での方法については気が向いたらいずれ投稿する予定。 概要 Chrome 拡張機能の content_scripts のスクリプト内で XMLHttpRequest や fetch などの非同期通信を実行すると以下のようなエラーが発生する。 XMLHttpRequest cannot load https://example.com/. Origin chrome-extension://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx is not allowed by Access-Control-Allow-Origin このエラーは CORS というセキュリティ機能によるもので、許可されていな
Chrome 拡張機能で CSV ファイルを生成してダウンロードする方法
はじめにChrome 拡張機能で CSV ファイルを生成してダウンロードする方法について整理した。 TL;DRほぼ JavaScriptでファイルダウンロード処理を実現する - Qiita の通り new Blob でオブジェクトを生成 createObjectURL で URL に変換 <a href="..." download="hoge.csv"> でダウンロード 目次はじめにTL;DR環境・条件詳細manifest.jsonJS(main.js)まとめ参考文献 環境・条件Google Chrome バージョン: 77.0.3865.120（Official Build） （64 ビット） 詳細リポジトリ: 17number/chrome-extension-file-download-example 拡張機能を有効化後に Google のトップページ(https://www.go
稀に便利な、Chrome拡張機能の開発
本当は使いたくないブラウザ拡張機能 今さらブラウザ拡張機能なんて、と思うわけです。 拡張機能を利用するということは、Webサイトを相手に手動でブラウザ操作しながらローカルベースで作業をしているという状況だと思います。今や何でもWebアプリ的なシステムで解決したいところなので、拡張機能に頼らざるを得ないというのは、望ましい状況ではないと考えています。 しかし、稀に便利です。 今回は業務上の利点があって作成しました。ブラウザでお客様サイトを巡回したときにエビデンスとして画面キャプチャを取得していたのですが、よく忘れるし面倒くさいので自動で取得するようにしたかったのです。 これを実現するは、拡張機能以外では難しいことだと思います。ブラウザ拡張機能も選択肢として知っておく価値があると感じました。 以下では実際に即してChrome拡張機能の開発の概要を示します。具体的なソースコードは提示しないのでご
Chrome Extension の作り方 (最終話: メッセージパッシング) - Qiita
Chrome Extension の作り方 (その1: 3つの世界) - Qiita Chrome Extension の作り方 (その2: Contents Script) - Qiita Chrome Extension の作り方 (その3: Browser Action / Page Action) - Qiita Chrome Extension の作り方 (その4: Event Page / Background Page) - Qiita の連載の最終回！！ ChromeExtensionを作っていると「メッセージパッシング」という言葉を見かけます。 Message Passing - 公式 Chrome Extension の作り方 (その1: 3つの世界) - Qiitaの説明の通り、3つの世界があるのですが、異世界とやり取りしたい状況が出てきます。 今回のサンプルでは c
WebサイトのデータをダウンロードするChrome拡張の開発方法とサンプル · kapieciiのブログ
Aug 15, 2021 01:00 · 1035 words · 3 minute read JavaScript Chrome Webページ上のデータをテキストファイルで保存したい場面がありました。 データ取得といえばクローラーを使ったスクレイピングが定番ですが、今回は必要なデータをテキストファイルの形式でダウンロードするChrome拡張を作ってみました。 次に同じようなものが必要になったときのために、メモを残しておきます。 目次 やりたいこと 作ってみる 雛形 要素の指定 ダウンロード サンプル 使い方 最後に やりたいこと Webページ上の特定箇所の情報をテキストファイルとして保存する。 作ってみる 完成したChrome拡張機能のソースコード全体はこちら。 kapiecii/chrome-extension-download-sample (github.com) とてもシンプルな
Chrome拡張機能をmanifest v3で開発した簡易記録とハマりポイントの解消方法 - 雑多に技術メモと他色々
Chromeの拡張機能（プラグイン）を自作で作ってみたので、色々書く。 やってみたこと やった結果 動かせたの？ 開発した時の環境 ハマりポイントと解消方法の一覧 そもそも拡張機能を作るために必要な構成や作るべきファイルがわからない 開発成果物のそれぞれの役割がよくわからない 自作したChrome拡張機能の取り込み方法がわからない ツールを修正した時の取り込み方法がよくわからない service_workerが動作しない原因がわからず、デバッグもできない content_scriptsに指定したcssの参照先画像(URL)にアクセスできない 拡張機能アイコンクリック時の動作が定義しても動かない service_workerで外部jsが使えない 自作した拡張機能用HTMLでonclick属性が動作しない Local Storageから読み込んだ情報が想定外にObjectになった Javasc
なにこれ、スゴすぎる！ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張 -Wildfire
ページをどのくらいスクロールし、どこをクリックするのか、マウスやキーボードをどのように操作し、コンテンツを見るのか、ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張を紹介します。 ユーザビリティテストに利用するだけでなく、操作を編集・再生することもできるので、プレゼンなどでページの操作を再現することも可能です。 Wildfire Wildfireの特徴 Wildfireのインストール Wildfireの使い方 Wildfireの特徴 Wildfireはユーザーがページをどのように操作するのか、どのように見るのか、手軽にユーザビリティテストができるChromeの機能拡張です。また、アクションをシミュレーションし、新しいデザインの確認にも利用できます。 ブラウザで表示したページのアクションを記録します。 記録したアクションは、すべて再生可能。 アクションを編集し、シミ
404エラーで消えてしまったページを各種キャッシュサービスから掘り起こすChrome拡張「Web Cache」
404エラーで消えてしまったページのキャッシュを、Google・Yahoo・Bing・InternetArchiveなどの各種キャッシュで一度に探すことができる、Google Chrome用の無料拡張機能が「Web Cache」です。。 Web Cache - Chrome ウェブストア https://chrome.google.com/webstore/detail/web-cache/coblegoildgpecccijneplifmeghcgip?utm_source=chrome-app-launcher-info-dialog Web CacheをインストールするにはGoogle Chromeで上記のリンクを開いて、「CHROMEに追加」をクリック。 ポップアップウィンドウが表示されるので、「追加」をクリック。 「Web CacheがChromeに追加されました」と表示されたら
以前紹介したYoutube動画のダウンロード方法ができないと発覚してしまったので、代替案を書きます。 | itkhoshi.com
このブログではYoutube動画のダウンロード方法についていくつかの記事がありますが、読者の方から指摘があり、ダウンロードができないということで検証しました。 結果、僕のMac上でもダウンロードできないことが分かりましたので、代替案をここに書きます。 僕の環境はOSX Mavericks、Safari7.0.6ですが、この方法でうまくダウンロードできました。 Sponsored Links 以前のエントリー⇒【[2014年 最新版] Youtubeの動画をダウンロードする方法[Mac][Safari]】 [2014年 最新版] Youtubeの動画をダウンロードする方法[Mac][Safari] | itkhoshi.com YouTubeの映像をPCに保存する方法[Google Chrome][Mac] | itkhoshi.com この方法は先月までは大丈夫だったんですが、急にダウ
定番SSHクライアント「Google Chrome」
はじめに こんにちは。KMC2回生のtyageです。 京都もほんとに寒くなってきて鍋が捗りますね。簡単だし美味しいあったまるし、最高ですね。 この記事はKMCアドベントカレンダー2013の17日目の記事で、 昨日は1回生のnona65537君によるSSH の二段階認証についてでした。 今日はGoogle ChromeというSSHクライアントの紹介なのですが、12日間続いたKMCアドベントカレンダーのサブプロジェクトであるSSHアドベントカレンダーもこれで最後になります。 最後がこれでいいのか？とも思うのですが、今までの内容がハードだったという方に向けて優しい内容となっておりますので、安心して御覧ください。 定番SSHクライアント「Google Chrome」 Google Chrome（もしくはChromium）と聞いて「あっ、SSHクライアントのことか！」と思われた方には少し物足りないか
広告を消してくれるブラウザ拡張機能「Adblock Plus」の秘密
6月21日にページ中に表示される広告を非表示にする「Adblock Plus」のInternet Explorer対応版がリリースされ、主要ブラウザであればどれでも「Adblock Plus」が使えるようになりました。 ブラウジングの際に広告バナーをブロックしてくれるということで重宝している人も多いと思いますが、その裏で、Adblock Plus製作者の背後には“戦略的パートナー”の存在があり、製作者の関連企業やお金を出した企業の広告はブロックせずに配信しているということが明らかになっています。 Adblock Plus Undercover – Einblicke in ein mafioeses Werbenetzwerk | Mobilegeeks.de | Allgemein http://www.mobilegeeks.de/adblock-plus-undercover-ein
Torrentクライアントいらず。Google ChromeでTorrentネットワークからダウンロード·OneClick MOONGIFT
OneClickはGoogle ChromeにTorrentのダウンロード機能を加えるGoogle Chrome機能拡張です。 日本ではP2Pに対するイメージの悪さからかなかなか普及しないTorrent。ダウンロード技術としてみると分散処理による速度向上は見逃せません。しかし専用クライアントを用意するのが面倒でした。そこで使ってみたいのがOneClick、Google Chrome機能拡張のTorrentダウンローダーです。 Google Chrome機能拡張がダウンロードできるようになっていますが、筆者が確認した時にはJSONのエラーでした。ソースからJSONを修正してインストールできます。 インストールします。 Torrentファイルをダウンロード後、一気に複数ファイルがダウンロード開始します。Torrentクライアントは不要です。 OneClickは普通にTorrentファイルをダウ
Google Chromeのメモリ節約におすすめな拡張機能まとめ | フリーソフト,Windows PC活用情報局
Google Chromeはサクサク動作する高速で軽量なウェブブラウザですが、その代わりに動作を安定させるため非常に多くのメモリを使用します。メモリを数ギガバイト以上も搭載しているハイスペックなPCならば特に困ることもありませんが、なかなかそうも行かない人も多いはず。 というわけで今回は、そんな人にオススメの、Google Chromeでメモリを節約して使うのに便利な拡張機能の紹介です。知っておくと案外役に立つことが多いので、非力なマシンのメモリ不足に悩まされている人はぜひ一度試してみてはいかがでしょうか。 TooManyTabs 現在開いているタブをサムネイルで表示できるものですが、この拡張機能の最大の特徴は、開いているタブをサスペンドボックスに入れることによってメモリを開放することができる点です。サスペンドされたタブはURLだけ保存して読み込みを停止してくれるため、ブラウザの表示領域と
スマホのWeb開発に、Adobe Shadowが神ツールな件 | fladdict
スゴイ。ヤバい。 Adobe Shadowは、Adobeのラボがリリースした、スマホコンテンツの開発支援ツール。 何ができるかというと、PCのブラウザで表示したURLのコンテンツを、iPhoneやiPadで同時に表示してくれる。 PCでサイトをリロードするだけで、iPhoneやiPadでも自動でブラウザがリロードされて、表示を検証できる！！ iPhoneやiPadはURLの入力が面倒だし、PCで作業する度にデバイスを移動するのが大変だった。 Adobe Shadowを使うと、PCでリロードするだけで、全環境で表示の確認がすぐできる。これは作業がはかどる。 使い方 Mac / PC に Adobe Shadowをインストール ブラウザ（Chrome)にAdobe Shadowの拡張をインストール iPhone, iPad, android, kindleに Adobe Shadowアプリをイ
Google Chrome Extensions（拡張機能）に広告なし版 Neat Bookmarks の追加 | sugitaku.net
Neat Bookmarks 以外に使いやすいブックマークツールはあるかな？と、いろいろ試してみたけど、どれもしっくりこず、広告なし版の Neat Bookmarks を追加することにしました。 github から広告なし版の Neat Boomarks のソースをダウンロードして、Chrome の拡張機能に追加します。ソースは、https://github.com/cheeaun/neat-bookmarks から zip ファイルをダウンロードします。ダウンロードした zip ファイルは解凍しておきます。 拡張機能を開いて、デベロッパーモードを有効にします。 【パッケージ化されていない拡張機能を読み込む…】をクリックして、先程ダウンロードして解凍したディレクトリを選択します。 拡張機能に広告なし版の Neat Bookmarks が追加されます。 参考になればと思いますが、Neat B
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.2ch-search.net/blog/6
Simple Bookmarks
これは便利！今話題になっている人気急上昇中のGoogle Chrome エクステンション - iTea3.0
