Chromeユーザーの場合、1つ以上の拡張機能を使用している可能性があります。 広告をブロックすることでも機能を追加することでも、拡張機能はブラウザに多くのユーティリティを追加します。 独自のChrome拡張機能を構築できたらクールではないでしょうか？ それがまさにここであなたに見せることです。
記事「最高のタッチスクリーンChromebook」もご覧ください
クライアント用のWebサイトを管理しているとき、ページの読み込みに関して各サイトがどのように機能するかを知りたいです。 Googleは現在、SEOの計算に読み込み時間を使用しているため、サイトの最適化を行う際には、ページの読み込み速度を知ることが重要な指標です。 これは、モバイル向けにWebサイトを最適化する場合にさらに当てはまります。 Google内で高得点を獲得するには、軽くて速く、エラーのない負荷でなければなりません。
それに加えて、SitePointの進取の気性に富んだ人も、ページ速度をチェックするために私と同じウェブサイトGTmetrixを使用し、それをチェックするためのChrome拡張機能を開発しました。
Chrome拡張機能
Chrome拡張機能は、コアブラウザに機能を追加するミニプログラムです。 これらは、作成するものと同じくらい簡単なものでも、安全なパスワードマネージャーやスクリプトエミュレーターと同じくらい複雑なものでもかまいません。 HTML、CSS、JavaScriptなどの互換性のある言語で書かれており、ブラウザと一緒に置かれる自己完結型のファイルです。
必然的に、ほとんどの拡張機能は、特定のアクションを実行するシンプルなアイコンクリックの実行です。 そのアクションは、文字通り、Chromeで実行したいことです。
独自のChrome拡張機能を作成する
少し調査するだけで、拡張機能を微調整して好きなことを実行できますが、1ボタンの速度チェックのアイデアが気に入っているので、それを続けています。
通常、サイトの速度を確認するときは、現在のページのURLをGTmetrix、Pingdom、またはどこにでも貼り付けて、Analyzeを押します。 数秒しかかかりませんが、ブラウザでアイコンを選択し、それをあなたに代わってもらうことができたらいいと思いませんか？ このチュートリアルを終えると、まさにそれが可能になります。
すべてを保持するには、コンピューターにフォルダーを作成する必要があります。manifest.json、popup.html、popup.jsの3つの空のファイルを作成します。 新しいフォルダ内を右クリックして、[新規およびテキストファイル]を選択します。 選択したテキストエディタで3つのファイルをそれぞれ開きます。 popup.htmlがHTMLファイルとして保存され、popup.jsがJavaScriptファイルとして保存されていることを確認してください。 このチュートリアルの目的のためだけに、Googleからこのサンプルアイコンもダウンロードしてください。
manifest.jsonを選択し、以下を貼り付けます：
{"manifest_version"：2、 "name"： "GTmetrix Page Speed Analyzer"、 "description"： "GTmetrixを使用してWebサイトのページ読み込み速度を分析する"、 "version"： "1.0"、 "browser_action"：{"default_icon" ： "icon.png"、 "default_popup"： "popup.html"}、 "permissions"：}
ご覧のとおり、タイトルと基本的な説明を付けています。 また、ブラウザバーとpopup.htmlに表示されるGoogleからダウンロードしたアイコンを含むブラウザアクションも呼び出しました。 Popup.htmlは、ブラウザで拡張機能アイコンを選択すると呼び出されます。
popup.htmlを開き、次の内容を貼り付けます。
GTMetrixを使用したPagespeed Analyzer
Popup.htmlは、ブラウザで拡張機能アイコンを選択すると呼び出されます。 名前を付け、ポップアップにラベルを付け、ボタンを追加しました。 ボタンを選択すると、次に完了するファイルであるpopup.jsが呼び出されます。
popup.jsを開き、次を貼り付けます。
document.addEventListener（ 'DOMContentLoaded'、function（）{var checkPageButton = document.getElementById（ 'checkPage'）; checkPageButton.addEventListener（ 'click'、function（）{chrome.tabs.getSelected（null、function（tab）{d = document; var f = d.createElement（ 'form'）; f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement（ 'input'）; i.type = 'hidden'; i.name = 'url'; i.value = tab.url; f.appendChild（i）; d.body.appendChild（f）; f.submit（） ;}）;}、false）;}、false）;
JavaScriptを知っているふりをするつもりはないので、SitePointが既にファイルを所定の場所に置いていると便利でした。 私が知っているのは、現在のChromeタブのページを分析するようにGTmetrixに指示することだけです。 「chrome.tabs.getSelected」と表示されている場合、拡張機能はアクティブなタブからURLを取得し、Webフォームに入力します。 それは私ができる限りです。
Chrome拡張機能をテストする
これで基本的なフレームワークが準備できました。どのように機能するかをテストする必要があります。
- Chromeを開き、[その他のツールと拡張機能]を選択します。
- 有効にするには、開発者モードの横にあるチェックボックスをオンにします。
- [アンパックされた拡張機能を読み込む]を選択し、この拡張機能用に作成したファイルに移動します。
- [OK]を選択して拡張機能をロードすると、拡張機能リストに表示されます。
- リストの[有効]の横にあるチェックボックスをオンにすると、ブラウザにアイコンが表示されます。
- ブラウザでアイコンを選択して、ポップアップを表示します。
- ボタンを選択し、今すぐこのページをチェックしてください！
チェックされているページとGTmetrixからのパフォーマンスレポートが表示されます。 メイン画像で自分のサイトからわかるように、新しいデザインを高速化するために少しやることがあります！
拡張機能を前進させる
独自のChrome拡張機能の作成は、見た目ほど難しくありません。 少しのコードを知ることで確実に有利なスタートを切ることができましたが、それを示すオンラインのリソースが何百もあります。 さらに、Googleには、役立つ情報、チュートリアル、およびチュートリアルの膨大なリポジトリがあります。 この拡張機能を手伝うために、Google Developerサイトのこのページを使用しました。 このページでは、拡張機能を作成するすべての部分を順を追って説明し、先ほど使用したアイコンを提供します。
十分な調査を行うことで、ブラウザでできることのほとんどすべてを実行する拡張機能を作成できます。 Chromeストアの最高の拡張機能の一部は、企業ではなく個人のものであり、実際に独自の拡張機能を作成できることを証明しています。
元のガイドについては、SitePointのJohn Sonmezに謝意を表します。 彼は大変な仕事をしました。私はそれを少し再編成し、わずかに更新しました。
独自のChrome拡張機能を作成しましたか？ 宣伝または共有したいですか？ もしそうなら、以下にお知らせください！
