• コーディング ファクトリーHOME
  • Coding Methodology
  • 第105回 自作のChromeアドオンで手軽に快適な環境づくり

コーディングメソドロジー

第105回 自作のChromeアドオンで手軽に快適な環境づくり

Chrome アドオンとは、ブラウザ閲覧を快適にする為に作られた拡張機能(プラグイン)です。QR コード作成ツールや、ページキャプチャ、企業独自のオリジナルの拡張検索ツールなど、様々な機能を持つものがあります。Chrome アドオンはJS、HTML、CSS の知識があれば、便利なツールを手軽に自作することができます。
今回は自作アドオン「search_selector」を例に、作成方法をご紹介いたします。

ファイルの説明

「search_selector」

ソースコードを表示しなくても、タグやクラスのセレクターをページ上で検索できるツールです。
視覚的に該当のパーツへスクロール移動し、ハイライトがかかります。Chrome のデフォルトの機能では実装されていません。(下図参照)

「search_selector」

使用するファイル

使用するファイル

左の枠内のリストは使用するファイルの一覧です。
複数ファイルがありますが、必須ファイルは「manifest.-json」のみとなります。他のファイルは、必要に応じてファイルを作成、用意をしてください。
今回の方法では「manifest.json」の設定ができれば、自作アドオンの作成ができるようになっています。アドオン上のJSでは、jqueryなどライブラリの読み込みも可能です。
ページ内で利用されている環境とは別で実行されている為、変数の上書きなどの干渉が起こらないように設計されています。

必須ファイル「manifest.json」の書き方

各詳細設定を決定するファイルです。オプション、使用するファイルの読み込み設定はこのファイルで行います。(下図のコード1を参照ください)

必須ファイル「manifest.json」の書き方

コード1:manifest.json

コード1:manifest.json

インストール方法

ファイルを用意したら、以下手順でインストールを行います。

  • 1.URL「chrome://extensions/」、またはブラウザ右上のメニューアイコン[その他のツール] 次へ[拡張機能] の順に選択し、管理ページへ移動します。
  • 2.右上部「デベロッパーモード」のチェックボックスをクリックし有効化します。
  • 3.左上部「パッケージ化されていない拡張機能を読み込む...」をクリック、パッケージを読み込みます。(例では、フォルダ「search_selector」を選択)
  • 4.ブラウザを再起動して、ツールバー右上の「」アイコンをクリックし、ページにポップアップが表示されればインストール完了。

search_selectorの使い方:「」アイコンのクリック、または「cnt + shift + F」で起動し、CSS記法でセレクタを入力してsearchで検索実行します。例えば「div」と入力して検索すると、<div>タグにハイライトがかかります。

アドオンが可能にすること

今回作成したアドオンでは、アドオンの機能面をページ上のJS(function.js)から、マウスやキーボード操作を利用して実現しています。コーディングをしている方 なら手軽に制作でき、導入コストも低く、活用することで目的のパーツへすばやくたどり着けるなど、制作効率を向上させることができます。 発展的にアドオンを開発していく際には、「manifest.json」の「background」「permissions」の実装を理解するとよいでしょう。この設定を理解することで、ブ ラウザ自体の操作を行えるようになります(タブの操作やアイコンのバッチ表示など)。ブラウザ上でこんな事できればばいいのに...と思っている方は、是非チャレン ジしてみてはいかがでしょう。今回ご紹介した「セレクタ検索」パッケージをgithubにて公開しております。下記URLよりダウンロードしてご活用ください。

https://github.com/monosus/chrome-addon_search-selector.git

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム