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拡張機能開発入門 - とほほのWWW入門
Chrome の拡張機能を開発する手順について説明します。まずは、拡張機能が実行されたらポップアップを表示するだけのものを作成してみます。下記のフォルダとファイルを作成します。 my-extension manifest.json popup.html { "name": "My Extension", "description": "My Extension", "version": "1.0", "manifest_version": 3, "action": { "default_popup": "popup.html" } } <!DOCTYPE html> <html> <body> <h1>Hello world!</h1> </body> </html> Chrome で chrome://extensions を開き、[パッケージ化されていない拡張機能を読み込む] から上記
ブラウザ拡張の権限でどこまで悪いことをできるのか？とその対策【デモあり】 - Qiita
[2018/07/07 追記] 本記事ではChrome拡張について説明していますが、Firefox1やEdgeの拡張機能もほぼ同じ仕組みで動いています。 [2023/11/06 追記] #参考 ページを追加しました。 Chrome拡張。便利な機能を簡単に追加できるので使っている人も多いと思います。 ただ、インストール時の権限の注意書きが分かり難いので無条件に承認（追加）していることもあるのではないかと思われます。 そこで、本記事ではChrome拡張の権限の種類・確認方法の他、拡張がどこまで（悪いことを）できるのかとその対策を3段階の権限（危険性）レベルごとに紹介していきたいと思います。 便利だが危険性もあるChrome拡張 Chrome拡張をインストールすると、Webページを読むというブラウザ本来の機能だけでなく様々なことができるようになります。 例えば、Webメールの新着通知や記事などの
これはすごい！Chromeで最強のコマンド環境を構築する方法「gleeBox＋Quix」 - Chrome Life
皆さんはキーボード派ですか？マウス派ですか？ 筆者のようにプログラマの方であれば、キーボード派の人が多いと思います。 マウスでグリグリ操作するよりも、ショートカットキーを使いこなす方が何倍も早く操作できることを知っているはずです。 ターミナルをよく開いている人は1日の大半はキーボードだけで生活しているでしょうw しかし、そんな人でもブラウザの前では、キーボードだけでは効率良く操作できないので、仕方なくマウスで操作するしかありません。 そこで今回ご紹介するのは、Chromeをコマンドで操作できるようにしてくれるキーボード派のためのエクステンション「gleeBox」です。 「gleeBox」は、Chrome上に入力ボックスでコマンドを打ち込むだけで様々な操作が可能になるエクステンションです。 何がそんなにスゴイかというと、ほとんどマウスを使わなくても操作ができるように様々なコマンドが用意されて
Chrome用携帯シミュレーターExtension
日本の携帯は、なんだかんだで、これまでのオサイフケータイなどの素敵な機能とスマートフォンのいいとこ取りをしつつ進化しそうな気がする今日この頃。 今日は携帯サイトやスマートフォン向けサイトの制作時に役立つ携帯シミュレーターを何点かをピックアップ。 ドコモ端末のみの対応であるならば、iモードHTMLシミュレータIIを使えば、端末で確認する前に大体のイメージを掴める。 しかし、3キャリアとなると「FirefoxのアドオンFireMobileSimulator」を使うか、有料の「P1」を使う感じになる。 Firefoxのアドオン「FireMobileSimulator」は無料で使え、3キャリアの絵文字も表示できるので重宝してる人も多いはず。 しかし、最近もっぱらGoogleのChromeを使用していて、ChromeのExtensionにも携帯向けサイトをシミュレートしてくれるExtensionがな
Greasemonkeyを超えた！ユーザースクリプトを自在に実行できるChromeエクステンション「jsshell」 - Chrome Life
先日、Adobeからモバイル向けFlashの開発中止というニュースがありました。 リッチコンテンツの領域で独占していたFlashでさえ、HTML5の標準化の波には逆らえなかったんですね。 来年あたりから、HTML5の利用が一気に加速していく予感がします。 筆者も、最近ではサイト構築の際にHTML5を選択する機会が増えてきました。 HTML5+CSS3+jQuery この組み合わせで、ほとんどのWebアプリケーションの機能を実装することができる時代になってきたと思います。 必要なデータは、クラウドに保存してAPI経由で読み書きできれば良いので、その部分だけサーバーサイドに任せる感じのシンプルな構成になればベストです。 JavaScriptの部分は、別にjQueryじゃなくてもよいのかもしれませんが、プラグインや情報が豊富で、jQueryが使える開発者も多いことから、jQueryを選択しておけ
Chromeの「シークレットウィンドウ」はWeb開発にとても使える
皆さん、Google Chrome の「シークレットウィンドウ」使ってますか？ Google Analytics を見る限り、このブログでは Google Chrome がトップシェアですが、周りの方に話を聞いてみると、残念ながら Google Chrome の「シークレットウィンドウ」機能はそれほど使われていないようです。 あれほど Web 開発に使える機能は他にないのに…と残念に思っていても仕方ないので、活用方法をまとめて記事にしてみました。 目次 まずは基本の使い方 Webサービスにログインしている状態としていない状態を同時に確認 Webサービスに2つのアカウントで同時にログイン Webページの表示がおかしい時は、まず「シークレットウィンドウ」で確認 検索エンジンでの順位チェックは「シークレットウィンドウ」で ニコニコ動画が何度もエラーになる時は「シークレットウィンドウ」で まずは基
Vim使いなら導入必須のGoogle Chrome拡張機能「Vichrome」 - (DxD)∞
独特の操作体系が初めは取っ付きにくいエディター「Vim」(Vi)。しかし、慣れてしまえば、その操作性の快適さから手放せなくなるエディター「Vim」。「Vimの快適なインターフェイスをGoogle Chromeでも使いたい」、そんな全てのVim使いにおすすめしたい、Vim使いなら導入必須のGoogle Chrome拡張機能「Vichrome」を紹介します。 Google ChromeをキーボードでVim風に操作する拡張機能はいくつか存在します。その中でも「Vimium」は最も利用されている拡張機能ではないでしょうか(ちなみに、Firefoxであれば「Vimperator」が最も利用されているアドオンでしょう)。 実際に、自分もこれまで「Vimium」を利用してきましたが「Vichrome」の存在を知り、さっそく乗り換えました。 「なぜVichromeはVim使いに必須の拡張機能なのか？」、「
たぶん日本最速のChromebook(SAMSUNG)レビュー、chromebookは普通にすごかった
トップ > Chromebook > たぶん日本最速のChromebook(SAMSUNG)レビュー、chromebookは普通にすごかった いしたにまさきの新刊：HONDA、もうひとつのテクノロジー ～インターナビ×ビッグデータ×IoT×震災～ 01 それはメッカコンパスから始まった｜Ｈｏｎｄａ、もうひとつのテクノロジー 02 ～インターナビ×GPS×ラウンドアバウト～ 運転する人をサポートすること｜Ｈｏｎｄａ、もうひとつのテクノロジー 03 ～インターナビ×災害情報×グッドデザイン大賞～ 通行実績情報マップがライフラインになった日 2011.06.14 たぶん日本最速だと思うのですが、アメリカでもGilt限定で先行発売されたサムソンのchromebookが、手元にあります。 さっそく、開封しますよ。 なぜか、ついでにchromebookを入れるためのCHROMEもあるわけですが、それは
電子書籍の未来の姿がインストールするだけで簡単に読めるChrome拡張機能「青空縦書きリーダー」 | ライフハッカー・ジャパン
疲れやすい、呼吸の浅さを改善。ストレッチポールは毎日使いたいほど気持ちがいい!【今日のライフハックツール】
「Google Chrome OSだけで仕事できる？」最新版を古いノートPCで動かしてみる|ガジェット通信 GetNews
●「Webさえあれば大丈夫。」そんな未来はもうすぐです ガジェ通豆知識「まめち！」担当ふかみんです(豆知識「まめち！」の記事一覧はこちら）。さて『Chrome OS』ですが、最新版では特に設定をいじらなくてもいきなり日本語入力ができるようになってきており、Flashも最初から組み込んでありますから、すぐにニコニコ動画を観ることもできます。上級者じゃなくてもChrome OSが体験できるような環境が整いつつある、ってわけです。実際この原稿もChrome OS 上で書きました。 来月6月にはChromeBook(Chrome OS が最初から入っているノートパソコン)も発売される予定で、なんか面白そうなんだけど、それって一体どんなもので、どれくらい使えるのか、というところが気になっている人も多いんじゃないでしょうか――というわけで実際に動かしてみたら割と面白かったので「Chrome OS」を体
触れる価値あり。Google Chromeをプログラミングエディタ化する·SourceKit MOONGIFT
SourceKitはGoogle Chrome内で動作するテキストエディタ。Dropbox APIを使っている。 SourceKitはGoogle Chrome向けのフリーウェア（ソースコードは公開されている）。なかなかWebアプリケーション化しないものの筆頭として考えられてきたのがテキストエディタだ。特にプログラマ向けのエディタになると手になじんでいるかどうかの問題が大きく、なかなか本格化しなかった。 まさにエディタ 確かにWebベースで開発するということに大きなメリットは感じられなかったのは確かだ。だがSourceKitを見たら、その考えが変わってしまいそうだ。 SourceKitはGoogle Chromeの機能拡張として提供される。左側にファイルツリー、右側に編集画面が表示される。開発者向きに各言語向けのハイライトに対応している。さらにテーマも幾つも用意されており自分好みの配色を選
gadget-or-gimmick
ถ้าไม่มีอะไรอย่างอื่น สล็อต ต้องขอบคุณ Naraka Bladepoint ที่เป็นหนึ่งในไม่กี่ชื่อ Battle Royale ที่การถูกยิงโดยใครบางคนที่ สล็อต...
数秒で起動するGoogleの「Chromebook」、ノートパソコンとどこがどう違うのか？まとめ
「Chromebook」は一般的なノートパソコンとは違うとGoogleは定義しており、約2年前からその開発は始まりました。そしてついに本日、SamsungとAcerから実機のChromebookが発表されましたが、そもそもこのChromebookは一体何を目指しており、そしてどこがどのようにすごいのでしょうか？ というわけで、現在実機に実装されているハードウェア的な面だけではなく、GoogleはこのChromebookでどこに行こうとしているのか、そういったもろもろのまとめは以下から。 Chromebook http://www.google.com/chromebook/ Google Chrome Blog: A new kind of computer: Chromebook まずChromebookの特徴は以下の通りです。 ・起動してネットに接続するのに数分も待たなくてよい You
Google ChromeのJavaScriptデバッガの進化がすごい - os0x.blog
Chrome版のFirebugことGoogle Chrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。 圧縮されたコードの整形 まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。 例えば、Google Analyticsのコードは圧縮されていて普通は読めません。 しかし、Chromeのデベロッパーツールなら、 このように整形してくれます。 やり方は簡単で、デベロッパーツールのScript
MacBookAir 11インチを買って導入したソフト ~サーバエンジニア編~ | Glide Note - グライドノート
MacBookAir11インチを買いました!! 夏ぐらいから新MacBookAirの噂が流れていて、待っていたので、発表直後に即購入しました。 購入したモデルは11インチSSD128GBのモデルにメモリを2GB→4GBに増やした構成になります。 システム構成 1.4GHz Intel Core 2 Duo 4GB 1066MHz DDR3 SDRAM 128GBのフラッシュストレージ 巷では導入したソフトを紹介するのが流行っているようなので、私も便乗してサーバエンジニアとして紹介したいと思います。 ソフトを紹介する前に、MacBookAirを数日間利用してみての雑感を パームレストがほとんど熱くならない。負荷をかけてもほんのり暖かいくらいです。アルミMacBookで一番不満な点が解消しています。 ファンのほとんど音がしない（ほぼ無音です） 軽い トラックパッドの感度が悪い（個体差の
Safari拡張の作り方 - os0x.blog
Safari拡張をいくつか作って大体感覚は掴めたので、ざっくりと拡張の作成手順を解説してみます。 なお、Windows版で作業していますが、Macでもほとんど同じだと思います。 Safari拡張とは 最初に、Safari拡張とはなにか、について。Safari拡張はHTML/CSS/JavaScriptをベースに、ブラウザ側が用意したAPIを使ってブラウザを便利にするモジュールです。通常、JavaScriptだけではクロスドメインの問題など、実現できることに制限がありますが、その点を拡張用に用意されたAPIで補います。そのため、APIが用意されていない部分については対応できないという制限があります。しかし、開発のし易さ、ウェブとの親和性の高さからアイディア次第で便利で強力なツールとなるのがSafari拡張・Chrome拡張です。 なお、現状のAPIは暫定的なもので、ここで紹介するのもあくまで
第6回 Firebug要らずなChromeのWeb Inspector | gihyo.jp
こんにちは、太田です。今回はChrome拡張の開発時のノウハウとして、開発ツールの解説をお送りします。Google ChromeにはWebKit由来のWeb Inspectorというデバッグツールが搭載されています。以前にも少しだけ紹介しましたが、今回は具体的な使い方まで掘り下げて解説します。なお、今回のWeb Inspectorの解説はChrome拡張だけでなく、JavaScriptを使ったウェブアプリケーションの開発に一般的に役立つノウハウとなっています。 WebKitのWeb Inspector Chrome拡張の開発の必需品であるWeb Inspectorですが、こちらは元々WebKit（Safari）で開発されたもので、Google Chrome（Chromium）に搭載されているものはさらに機能が追加されています。FirefoxにはFirebugという定番ツールがありますが、そ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Chrome Developer Tools入門 in DevFestX Sapporo
CSSの制作・検証に役立つChromeの機能拡張のまとめ