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
グーグルが発表した新ウェブ技術「Portals」とは--「Google Chrome」向けのウェブナビゲーションシステム
Googleは米国時間5月7日、年次開発者会議「Google I/O 2019」で、ウェブページのローディングやナビゲーションに新風を吹き込む「Portals」と呼ばれる新たなテクノロジーを発表した。 GoogleによるとPortalsは<portal>という新たなHTMLタグを使って動作するという。このタグの動作は、従来からある<iframe>タグとよく似ている。ウェブ開発者は<portal>タグを指定することで、自らのページ内にリモートコンテンツを埋め込めるようになる。 <portal>タグと<iframe>タグの違いは何かと言えば、Googleの新たなPortalsテクノロジーが<iframe>タグの制約を取り去ったものだというところにある。 Portalsを使用することでユーザーは、埋め込んだコンテンツへのナビゲーションが可能になるとGoogleは述べている。<iframe>タグで
Google Chrome上でマイクから録音した声をリアルタイムで文字に書き起こしてくれる「The Recording Studio」
「Recording Studio」は、Chromeに対応している音声認識API「SpeechRecognition API」を利用してマイクから録音した声を音声認識によってその場で文字に起こしてくれるウェブツールです。オンラインのブラウザ上で動作するのでダウンロードやインストールは不要で、開発したみずちさんが無料で公開しています。 Recording Studio https://recording-studio.netlify.com/ ブラウザでマイク入力から書き起こしを行うツールを作った - mizchi's blog https://mizchi.hatenablog.com/entry/2019/01/20/203241 Googleは音声ファイルをAIが認識して文字にしてくれる「Cloud Speech-to-Text」という有料サービスを提供しています。Google Clo
Googleの新ツールが便利すぎる！デザイナーやディレクター向けの新しいデザインツール -ProjectVisBug | コリス
VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。 機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。
Chrome拡張の高速な英語辞書ツールをつくりました(Mouse Dictionary) - Qiita
経緯 もともと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 使い方 インストール
Ptengineウェブ運営All-in-Oneプラットフォーム | ウェブの改善や改善業務はこれひとつで完結
サイト強化はこれひとつ はやく、大きな成果へ ヒートマップ、サイト解析、ページ編集、A/Bテスト、WEB接客、パーソナライゼーション 1つのタグ設置だけで、全てノーコードで使えます。
Google Chromeにパソコンを盗聴器に変える脆弱性、---米メディアが報道
米GoogleのWebブラウザ－「Chrome」に、パソコンを盗聴器に変えてしまう脆弱性が見つかったと、複数の米メディア（InformationWeek、Gizmodoなど）が現地時間2014年1月22日に報じた。悪意のあるサイトは同脆弱性を利用することで、パソコンのマイクを起動し、パソコン周辺の音声を拾って記録できるという。 Chromeの脆弱性を最初に確認したイスラエルのWeb開発者、Tal Ater氏によると、ユーザーが不正サイトから離れても盗聴は継続され、Chromeが起動している限り、パソコンのすぐそばで行われる会話や通話が記録される可能性がある。 ユーザーがChromeの音声認識技術に対応したサイトを訪れた場合、サイトはマイクを使用する許可をユーザーに求める。ユーザーが承認すると、音声認識が有効になっていることを示すアイコンがタブに表れる。通常、ユーザーが音声認識を無効に切り替
なんでもっと早く使わなかったんだと後悔したChrome拡張５つ（ブロガーとして）
今回はChromeExtensionを５つのご紹介。正確には以前に１個紹介しているので４つかな。 たった4つかというのもありますが、あんまり拡張するのが好きではないのもあり、入れてもすぐ消す癖があって、本当に便利なもの、もしくはよく使うものしか基本的に追加してません。ただこれ、「職業ブロガー」っていうところに恐らく焦点が合わさっていますので、さきにご了承願います！ 以前書いた記事でもそうなんですけど、かなり消してますね・・・ 私が厳選して愛用するGoogleChromeエクステンション12個＋消した奴36個 是非まだ入れてないって人は使ってみてください。 使えば使うほど味が出る超便利エクステンション とりあえず今回紹介する4つはこちら。 他のやつはド定番なので紹介の必要が無いかと判断したりなんだりです。 １）ato-ichinen ダウンロード とりあえず「１」と書かれたアイコン。押してお
Chrome拡張の不具合を修正しました - はてなブックマーク開発ブログ
はてなブックマークの拡張機能を使用しているChromeブラウザで、Googleの検索結果から別のサイトへ遷移した後に、検索結果へ戻れない不具合がありました。本日リリースしたバージョンでこの不具合を修正しました。拡張機能は自動的にアップデートされます。 以下、詳細を説明いたします。 はてなブックマークChrome拡張には、Googleの検索結果にはてなブックマーク数を表示する機能があります。検索結果の読み込みが終わる前にブックマーク数が表示されると、今回の現象が発生します。回線の速度や遅延によって、発生しやすい場合がありました。 バージョン1.3.6では、検索結果の読み込み完了を待ってから、ブックマーク数が表示されるように修正しました。
米Google社員が語った、作業が捗るGoogle Chromeテクニック20個！ – 和洋風KAI
和洋風KAIは、Apple・水樹奈々・食べ歩きが三本柱のブログです。モットーは「楽しく」「便利で」「端的に」。 ⇒ アバウト ⇒ 免責事項 1．テキストのみコピペする方法。 リッチテキストエディタなどを使っていると、ブラウザからテキストをコピペした場合、画像なども付いてくる場合があります。 そんな時は「Control+Shift+V（Macだとcommand + shift + V）」を使ってペーストすると、テキストのみ貼り付けることが出来ます。 2．最後に閉じたタブを復活させる方法。 誤ってタブを閉じてしまった時は、「Control+Shift+T（Macだとcommand+shift+T）」とショートカットキーを叩くと復活させることが出来ます。 3. タブにマウスを置くと、ウェブページのタイトルの全てが読める。 Google Chromeはタブを開きすぎるとタブがとても小さくなってタイ
jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話
jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で
もっと便利に！ Google Chromeのお役立ち拡張機能まとめ | ライフハッカー［日本版］
ブラウザ「Google Chrome」は、動作の速さといった基本性能はもちろんのこと、ログイン機能でPC／スマホを問わずに、ブックマークや設定などが共有できる点もいいところ。共有できるものの中には、Chromeをより便利に使える拡張機能も含んでいます。 そこで今回は、ライフハッカーがこれまでお届けしてきた拡張機能の紹介記事をまとめました。ビジネスパーソンにオススメの「仕事がはかどる」、「もっと便利にパワーアップ」、さらに「かゆいところに手が届く」といったちょっとした機能もあります。Chromeユーザーはぜひチェックしてみてください。 （目次） ［1］仕事がはかどる ［2］もっと便利にパワーアップ ［3］かゆいところに手が届く
端末のカメラにアクセスできる「Google Chrome 21」がリリース
Googleは1日、同社Webブラウザ最新安定版となる「Google Chrome 21」を公開した。同社Webサイトからダウンロードできる。 最新版ではgetUserMedia APIに対応しており、HTML5とJavaScriptを利用してブラウザからカメラやマイクにアクセスできるようになる。getUserMedia APIは、Webブラウザを通してリアルタイムコミュニケーションの実現を目指すWebRTCプロジェクトの成果物の一つで、今回のChrome 21安定版に搭載されている。 Googleでは、getUserMedia APIを活用した「Sketchbots」という実験的コンテンツも披露している。Sketchbotsは、ユーザーのカメラで撮影した写真を使ってリアルタイムに砂地に描き出すというもので、getUserMedia APIの機能の一端を垣間見ることができる。
Google Chromeのメモリ節約におすすめな拡張機能まとめ | フリーソフト,Windows PC活用情報局
Google Chromeはサクサク動作する高速で軽量なウェブブラウザですが、その代わりに動作を安定させるため非常に多くのメモリを使用します。メモリを数ギガバイト以上も搭載しているハイスペックなPCならば特に困ることもありませんが、なかなかそうも行かない人も多いはず。 というわけで今回は、そんな人にオススメの、Google Chromeでメモリを節約して使うのに便利な拡張機能の紹介です。知っておくと案外役に立つことが多いので、非力なマシンのメモリ不足に悩まされている人はぜひ一度試してみてはいかがでしょうか。 TooManyTabs 現在開いているタブをサムネイルで表示できるものですが、この拡張機能の最大の特徴は、開いているタブをサスペンドボックスに入れることによってメモリを開放することができる点です。サスペンドされたタブはURLだけ保存して読み込みを停止してくれるため、ブラウザの表示領域と
HTML5アプリ開発基盤「Meteor」がすごい
サーバもクライアントもJavaScriptで記述できる「Meteor」が注目を集めている。サーバ上のコードが変更されると、クライアントも自動的に変更されるという Wikipedia MobileのiOS版がHTML5に 今年は、HTML5を使用したネイティブアプリ開発（ハイブリッドアプリと呼ばれます）が盛り上がりつつありますが、強力な事例が登場しました。WikipediaのiOSアプリがApache Cordova（PhoneGapのオープンソース版）を使って書き直され、Android版と同じソースコードを使用するようになったそうです（詳細：New Wikipedia app for iOS（and an update for our Android App））。 Opera 12ベータ版リリース Operaの次期メジャーリリースが近づいて来ました（リリース）。 一番大きな変化は、Oper
これはすごい！ChromeがSSHクライアントになるエクステンション「Secure Shell」 - Chrome Life
最近では、クラウド環境を使って簡単にサーバーを構築することができるようになったので、開発者もターミナルを使う機会が増えてきたと思います。 筆者は、Macユーザーなのでターミナルアプリケーションとして「iTerm2」を使っていますが、Windowsの時は「PuTTY」を使っています。 運用でもターミナルからSSHで接続して、設定ファイルを編集したりログをチェックしたりCPU負荷を確認することもよくあります。 こういったSSHクライアントは自分の開発環境にインストールして使っていると思います。 しかし、デモやプレゼンをする際など、自分の開発環境以外からSSHでサーバーに接続したい場合、ターミナルアプリケーションがインストールされていないことがあります。 そこで、今回ご紹介するのが、ChromeがSSHクライアントになるエクステンション「Secure Shell」です。 「Secure Shel
WEB開発者はインストール必須のChrome拡張「Pendule」:phpspot開発日誌
Chrome ウェブストア - Pendule WEB開発者はインストール必須のChrome拡張「Pendule」。 昔からあるChrome拡張ですが知らない間に色々と便利になっているようだったのでご紹介。 ４月からはたいている新入社員のWEBデベロッパーさんにもオススメ インストールすると以下のようなボタンが表示されますのでクリック。 まず、StyleSheetのタブではCSSを見れる、CSSがその場でリロードできたり、CSSをを無効にできます サイトで使われているカラーを１６進数で出してくれる機能もあります CSSビュー。折畳み可能で使いやすく見やすい Formsタブ。パスワードを表示したり、hiddenなフィールドのアイテムを表示したりできちゃいます。恥ずかしい！ Imagesのタブでは全部の画像を非表示にしたり、背景画像を非表示にしたり、altを全部表示したりといったことが可能 そ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの非表示(display:none)を使った広告の切り替えについて - Google グループ
chromeの爆裂的なメモリ消費をなんとかする拡張 * prasm（プラズム）
