- Coding Methodology
- 第105回 自作のChromeアドオンで手軽に快適な環境づくり
第105回 自作のChromeアドオンで手軽に快適な環境づくり
Chrome アドオンとは、ブラウザ閲覧を快適にする為に作られた拡張機能（プラグイン）です。QR コード作成ツールや、ページキャプチャ、企業独自のオリジナルの拡張検索ツールなど、様々な機能を持つものがあります。Chrome アドオンはJS、HTML、CSS の知識があれば、便利なツールを手軽に自作することができます。
今回は自作アドオン「search_selector」を例に、作成方法をご紹介いたします。
ファイルの説明
｢search_selector｣
ソースコードを表示しなくても、タグやクラスのセレクターをページ上で検索できるツールです。
視覚的に該当のパーツへスクロール移動し、ハイライトがかかります。Chrome のデフォルトの機能では実装されていません。（下図参照）
使用するファイル
左の枠内のリストは使用するファイルの一覧です。
複数ファイルがありますが、必須ファイルは「manifest.-json」のみとなります。他のファイルは、必要に応じてファイルを作成、用意をしてください。
今回の方法では「manifest.json」の設定ができれば、自作アドオンの作成ができるようになっています。アドオン上のJSでは、jqueryなどライブラリの読み込みも可能です。
ページ内で利用されている環境とは別で実行されている為、変数の上書きなどの干渉が起こらないように設計されています。
必須ファイル「manifest.json」の書き方
各詳細設定を決定するファイルです。オプション、使用するファイルの読み込み設定はこのファイルで行います。（下図のコード1を参照ください）
コード1：manifest.json
インストール方法
ファイルを用意したら、以下手順でインストールを行います。
- １．URL「chrome://extensions/」、またはブラウザ右上のメニューアイコン[その他のツール] 次へ[拡張機能] の順に選択し、管理ページへ移動します。
- ２．右上部「デベロッパーモード」のチェックボックスをクリックし有効化します。
- ３．左上部「パッケージ化されていない拡張機能を読み込む...」をクリック、パッケージを読み込みます。（例では、フォルダ「search_selector」を選択）
- ４．ブラウザを再起動して、ツールバー右上の「
」アイコンをクリックし、ページにポップアップが表示されればインストール完了。
search_selectorの使い方:「」アイコンのクリック、または「cnt + shift + F」で起動し、CSS記法でセレクタを入力してsearchで検索実行します。例えば「div」と入力して検索すると、<div>タグにハイライトがかかります。
アドオンが可能にすること
今回作成したアドオンでは、アドオンの機能面をページ上のJS（function.js）から、マウスやキーボード操作を利用して実現しています。コーディングをしている方 なら手軽に制作でき、導入コストも低く、活用することで目的のパーツへすばやくたどり着けるなど、制作効率を向上させることができます。 発展的にアドオンを開発していく際には、「manifest.json」の「background」「permissions」の実装を理解するとよいでしょう。この設定を理解することで、ブ ラウザ自体の操作を行えるようになります（タブの操作やアイコンのバッチ表示など）。ブラウザ上でこんな事できればばいいのに...と思っている方は、是非チャレン ジしてみてはいかがでしょう。今回ご紹介した「セレクタ検索」パッケージをgithubにて公開しております。下記URLよりダウンロードしてご活用ください。
