New React Developer Tools – React Blog
This blog site has been archived. Go to react.dev/blog to see the recent posts. A month ago, we posted a beta of the new React developer tools. Today, we’re releasing the first stable version of the new devtools. We’re calling it version 0.14, but it’s a full rewrite so we think of it more like a 2.0 release. It contains a handful of new features, including: Built entirely with React, making it ea
Github Issueをより楽しくするChromeエクステンション「Looks Tiqav To Misawa」 | mah365
Emojiなどを活用することで楽しくコミュニケーションできるGithub Issueですが、それだけだと少し物足りないですよね。Looks Tiqav To Misawaを入れて日常のコミュニケーションをもう少し彩ってみましょう。 使い方 エクステンションのダウンロード Chromeウェブストアからエクステンションをダウンロード＆インストールします。 Github Issueのコメント欄で使う 元ネタが分からないのですが、随所でよく見る”looks good to me”。!lとコメント欄で入力すると画像の候補が出てくる（１つ）ので、画像を選択するとコメントでその画像を使うことができます。 !t<query>の書式で入力すると、tiqavに登録されている画像から検索して選択することができます。ちくわしか持っていない場合は!tちくわと入力すると以下のように画像の候補が出てきます。 !m<qu
devtools-snippetsでブラウザ上での作業をハッピーに - シアトルコンサルティング サービス開発ブログ
satkakuです。 Webサイト見てて、ちょっとしたデータの集計とかをブラウザ上のコンソールからさくっと取りたい、でもjQueryとか入っていないサイトだとめんどい、みたいな際にちゃちゃっとjQueryを差し込みたい、そんな状況が1年に12回くらい訪れます。 Chromeだと、*.users.js作ってUserScript差し込むのもそこまでめんどくは無いのですが（拡張機能画面につっこむだけ）、それすらもめんどかったので、Snippetを使うことにしました。 調べてみるとこんなのが！ DevTools Snippets GitHub 今回欲しかったやつなんかもあります。 jquerify.js 使い方としては (1) 「Sources」タブから「Snippets」を開く (2) 右クリックで「New」 (3) ソース貼付ける (4) Snippets名を右クリックして「Run」、または「
はてなブックマークのChrome Extensionを外した — どこか遠くでのんびり怠惰に暮らしたい
はてなブックマークのChrome Extensionを外した 以前からGoogleで検索して、検索結果ページを表示→どれかのページへ遷移→戻るボタンクリックとしたときに、 なぜか検索結果一覧ページじゃなくて、さらにもうひとつ前のページに戻ってしまう現象があって、 なんでこんなことになるんだろうとおもってたんだけど、どうもはてブのExtensionのせいだったらしい。 ふと「chrome google 検索 戻れない」で検索したら、 このページ がひっかかって、あ、もしかして、どれかextensionが悪さしているかなとおもって、順番にはずしていったところ、はてブのextensionだった。 たぶん、検索結果全部のURLのはてブ数をだしてるあたりの処理が終わらない間に、リンクをクリックしちゃって次のページに遷移すると、戻れなくなるのではないかという気がしてる。 まあ、そんなこんなでexten
Chrome拡張では、Background pages よりも Event pages を使用したほうが良い - よんちゅBlog
これからChrome拡張を作る方には是非知っておいて欲しい機能、Event pages についての話です。 Event pages は、作成したChrome拡張によっては、必ずしも使用できるわけではありませんが、もし可能なら積極的に使用してほしいと思います。 公式ドキュメントでも、Background pages のページ冒頭には、以下の様な注意書きがなされています。 Caution: Consider using event pages instead. Learn more. via: Background Pages - Google Chrome なぜ Event pages なのか 理由を詳しく説明すると、 Background pages を使用している拡張は、Chrome起動時にプロセスが起動され、以降Chromeが終了するまで生き続けます。 よって、例え Backgroun
WEBページ構成ファイル保存と同時にリロードできるChrome拡張「Tincr」:phpspot開発日誌
Tincr Chrome Extension WEBページ構成ファイル保存と同時にリロードできるChrome拡張「Tincr」。 次のムービーのように外部エディタで編集したら即座にリロードしてくれてスピーディな開発を実現できそう。 他にも同様のソリューションがあったりしますが、導入が面倒。これならChrome拡張インストールだけでOKみたいです Windows, Mac, Linux にも対応 Ctrl+Rを押す回数が保存毎回分減るというのは大きいですね。 関連エントリ ページ内のアイテムのピクセル数をメジャーで測れるChrome拡張「MeasureIt!」 WEB開発者はインストール必須のChrome拡張「Pendule」 サイトに使われている技術が丸裸になるChrome拡張「BuiltWith」
今日のブログPVを自動表示してくれるChrome拡張機能「Stats Checker for Google Analytics」を気に入っている3つの理由
ホーム Webサービス/ツール 今日のブログPVを自動表示してくれるChrome拡張機能「Stats Checker for Google Analytics」を気に入っている3つの理由 愛用しているChrome拡張機能「Stats Checker for Google Analytics」の紹介です。 この拡張機能を使うことにより、↑の画像のように「今日のPV」をChrome拡張機能のアイコンから確認できます。しかも、数値はリアルタイムで更新されていきます。 （↑数値の更新時間はオプションから調整できます） この拡張機能を気に入っている理由は3つあります。 1.PVの変動が常に見えると気が引き締まる ブログPVにおいて意識すべきことは、絶対値ではなく変動だと私は考えています。この拡張機能は数値が変動する様子を簡単に見ることができる点が良いです。 数値の変動から「自分のブログは毎日誰かに読
Chrome拡張でContent ScriptとBackground Pageのメッセージのやり取りをする
を、ようやく実装できました。 Amazon to Rakuten Chrome拡張「Amazon to Rakuten」は当初下記の流れで作っていました。 1. chrome.tabs.getSelectedで今開いてるamazonのページのURLを取得 2. XMLHttpRequestで取得したURLのHTMLを取ってきて、本のタイトルを正規表現で取得 3. 楽天ブックス総合検索APIに取得したタイトルを投げる 4. 検索結果をPopupに表示。表示されたやつをクリックすると無事楽天ブックスの商品詳細ページにジャンプ 1. Content ScriptでDOM解析し、今開いているamazonの詳細ページから商品タイトルを取得 2. 取得したタイトルをMessageでbackground.htmlに送信 3. background.html上で楽天ブックス総合検索APIに、Content
Google Chrome Extensionを作ってみた | DevelopersIO
はじめに Chromeのエクステンションの作り方自体はそれほど難しくありません。簡単なエクステンションを作ってみましょう。 まずエクステンションの説明です。Chromeのエクステンションには3つのタイプがあります。 browser action page action popup[browser action] 自分が作りたいエクステンションによって使い分ける事になります。browser actionとpopupは同様にアドレスバーの隣にアイコンが出てくるのですが、前者はアイコン押下で何か処理が走る、後者は何等かの画面をpupupさせるという違いの様です。 作ります 必要なファイルは次の4つです。 manifest file html file(s) JavaScript file(s) Asset file(s) 最低限というなら、manifest fileとhtmlがあれば良いみたいで
Google Chrome Extensions (拡張機能)の作り方
唐突にGoogle Chromeのエクステンション（拡張機能）が作ってみたくなりました。 作り方を調べたときの過程をメモしておきます。 参考サイト エクステンションの作り方を解説しているサイトはこちら。 http://code.google.com/chrome/extensions/index.html 一番簡単なチュートリアルを写経してみます。 Tutorial: Getting Started (Hello, World!) http://code.google.com/chrome/extensions/getstarted.html ちなみに、試したときのChromeのバージョンは「4.1.249.1064」です。 チュートリアル まず、作成する拡張機能の設定ファイルやhtmlを保存するフォルダを作成します。 今回は、「C:\chrome_extensions\tutorial」
HTMLタグの閉じ忘れをチェックするChrome拡張機能を作ってみた | kzms2 – html,css,javascript
概要 HTMLタグ閉じ忘れチェッカー ＠Chrome拡張機能 早速ですが以下のページで公開しています。 作ったChromeの拡張機能URLはこちら 作った背景とか この拡張機能を作った経緯ですが、単純なタグの開き・閉じ忘れを簡単に防げる方法がないかな。 と思って作成しました。 特にHTMLにそこまで詳しくない方、デバッグが苦手な方は試しに使ってみていただきたいなーと思っています。 もちろんマークアップを行う方は入れてみていただけると嬉しいです！ 簡単な仕様説明 できること 表示しているページにタグの開き・閉じ忘れがないかをチェック タグの開き・閉じ忘れがあった場合、その数を表示 どの箇所にタグの開き・閉じ忘れがあったのかを表示 今後について 確認できているバグ たまに謎のタグエラーが検出される scriptタグ内、コメントタグ内のタグもチェックしてしまう 複数のChromeのウィン
ついに出た！Chrome版「Page Speed」の使い方
2011/3/22に、GoogleがようやくGoogle Chrome版「Page Speed」拡張機能を公開しました。 「Page Speed」は、項目をある程度理解できれば自分や自社のサイトの表示速度の改善にとても役立つツールです。 この記事では、「Page Speed」のインストール方法から各調査項目の見方や改善方法を中心に使い方を解説します。 ぜひ、ご自身のサイトの改善に役立てていただければと思います。 そもそも、なぜサイトの表示速度を速くする必要があるのか？ 例えば、Amazonの調査によると「表示速度が0.1秒遅くなると、売上が1％減少する」といい、Googleの調査によると「表示速度が0.5秒遅くなると、検索数が20％減少する」と言われます。 また、GoogleはWebページの読み込み速度をアルゴリズムに取り入れたことを発表しています。 大手サイトや大規模なECサイトに限らず
Chromeを最強化するオススメ拡張機能11
人気ブラウザー『Google Chrome』。拡張機能は数多くあるけれど、まず最初に入れておきたい11の拡張機能を紹介。すべてフリーで導入することができる。快適かつ最強にパワーアップしたChromeを使いこなそう！ ●関連サイト Google Chrome 『Incredible StartPage』 スタートページをカスタマイズ！ シンプルなクロームのスタートページを、機能的な画面にする拡張機能。ブックマークやウェブアプリ、最近閉じたタブが見やすくなる。 ●関連サイト Incredible StartPage バージョン 1.4.3 作者 www.visibotech.com 『Chrome用TooManyTabs』 大量タブを開くときに絶対必要な拡張機能！ 大量のタブをサムネイルで一覧で表示、目的のタブを簡単に選び出せる。並び替えや検索機能もあり、タブを閉じるのがめんどうな人にオススメ
これはすごい! フォーム最適化に役立つグーグル提案のautocomplete新仕様 | 初代編集長ブログ―安田英久
※2012-04-07 セキュリティ面の問題に関して追記しました。 今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる（可能性を秘めた）、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。 グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。 これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。 どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。 たとえば、この状態から、 名前や住所などの標準的な項目が、一気に自動入力されます。 どうでしょう。こうした機能をサイトに設けられたら、フォームの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リンク切れのチェックもこれで簡単♪「Check My Links」 : Googlechromeをアプリ・拡張機能でまったりと
Extensionizr
Google Adds Notification Center to Chrome Canary for Windows
ChromeのツールバーでGoogle Analyticsのアクセス解析がひと目でわかる「Stats Checker for Google Analytics」 - iTea3.0
blog.tokuda109.jp: Chromeの開発ツールのAuditsについて
Google Chrome Developer Tools入門 in DevFestX Sapporo