Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps. Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps. When auditing a page, Lighthouse runs a barrage of tests against the page, and then generates a report on how well the page did. From here you can use the failing

Chromeの拡張機能とは？ Chromeの拡張機能は実質的にはただの圧縮したフォルダです。そして、そのフォルダの中身もただのHTMLやCSS、JSファイルです。 つまり、拡張機能の作り方はWebページのそれとは大差ないということですね。 拡張機能にしか提供されていない豊富なChromeのネイティブのAPI群（Chrome.* API）を利用できるところが拡張の魅力です！ 一般公開目的ではなく、普段の業務効率化目的でも十分な利用価値があると思うので、まだの方はぜひ一度触ってみてください。 拡張機能の種類 拡張機能の種類は大きく分けて3つあります。 Browser actions Page actions Override Pages 1つずつ見ていきましょう。 Browser actions ツールバーの右側に小さなアイコンを表示させるタイプの拡張機能です。一番頻繁に見かけるのがこのタイプ

やりたいこと：Google Chromeの拡張機能開発でのHello World的なものを体験して開発の手掛かりにしたい やってみたこと：今回の成果（サンプルコード） とりあえず検索 例によって「Google Chrome 拡張機能 開発」のような感じで検索してみます。結果はこちらをどうぞ→ 2016/01/04 時点での表示結果： 2つめにQiitaの記事があるので、折角ですからこちらを選びます。 Chrome拡張の開発方法まとめ　その1：概念編 概念等を解説して下さっているものでしたので、いまはまだよいですが後々参考にしたいため、いいねをしてストックします。 では、一番最初にヒットしている記事を確認してみます。 Chromeのオリジナル拡張機能を開発しよう（ソースコードあり） | 株式会社LIG ざっくり読んで、ソースコードも公開してくれているので、早速ダウンロードして、見よう見まねに

概要 Chrome extension を使って、Popup 部から HTML の DOM を操作してみる。 とりあえず背景色を変化させてみる。 ( 将来的には、コレをベースに色々操作できるように―― ) メモ Chrome extension についてググってみたところ、 extension から DOM 操作することは可能。 DOM 操作のためのサンプルについてググってみたところ、 content script から DOM 操作するサンプルは発見。 ブラウザアクションボタンから発火させて DOM を操作するサンプルもあった。 Popupで出したページから色々DOM操作するようなサンプルは見つからず。。⇒今回コレ！！ 作成サンプル概要 Popup として Color Picker を出して、表示されているページの背景色を変更してみる。 フォルダ構成 : extension_sample

はじめに ローカル環境で動作するchrome extensionを作った際に利用した、 chrome内のデータストレージである chrome storage についてのご紹介。 入力された文字データを残していく記録用途で使いました。 chrome.storageとは？ 箇条書きになりますが... - chromeにkey-value形式でデータを保存することができる - オプションから"単体運用(local)" or "chromeアカウントと同期(sync)"が選択可能 - 保存データ量は、基本的に5Mib。ただし"単体運用(local)"を選択時のみ、無限にするオプション有り。 - developer.chromeのAPIとサンプルを見る限り、chrome-extension上で動作させることをベースとしている? - -> 特に"chromeアカウントと同期(sync)"を利用する場合

chrome.storage の API を使う localStorage を使うとこれはこれで動くのですが、もう少し扱いやすい方法がないか調べたところ、chrome.storage という localStorage に似た方法を見つけました。 chrome.storage – Google Chrome localStorage の場合、background.js を通して Message Passing でデータのやり取りを行う必要がある。 これに対し chrome.storage では background.js なしで、ダイレクトに content_scripts 等から chrome.storage のデータにアクセスできます。また、chrome.storage.onChanged.addListener の API で、データ変更に対するコールバックを簡単に登録できて便利。 以