前回に引き続きChrome拡張の記事を書いていきます。
前回の記事はこちら
今回はアイコンボタンを利用したChrome拡張になります。
今回作ったもの
Amazonの商品ページを表示している時に、Chrome拡張のボタンを押すと、一瞬でアフィリエイトタグを付けてリンクを作り直すChrome拡張になります。
Amazonアソシエイトに登録されているとページ上に表示されているツールバーでリンクを作ることが出来ますが、もしもアフィリエイトなど外部のASPサイトを利用している人も増えているので好きなアフィリエイトタグを登録できるようにしました。
思ったより便利だったので公開しています。よろしければご利用ください。
作り方
今回のコードはGitHubで公開しています。
という人はコードを読んでください。
manifest.jsonを作る
Chrome拡張の最初はmanifest.jsonを作ります
今回のポイントは
- permissions
- browser_action
- options_page
です。ポイントを抑えつつ解説していきます。
アイコンを押した時の処理を書く
アイコンが押されると manifest.json の browser_action が呼ばれて popup.html が立ち上がります。
popup.html は<script>タグを含めると、通常のページのようにページが開かれたタイミングでJavaScriptを動かすことが出来ます。
今回は popup.js を読み込み、処理を実行しています。
Chrome拡張のpermissionを設定しよう
先程、manifest.json の permission に tabs という値が入っていましたが、ここで permissionについて簡単に解説します。
https://developer.chrome.com/extensions/tabs
Chromeではブラウザの情報を取り扱うための様々なAPIが用意されています。
例えば↑のtabsというグループのAPIでは、タブが固定されているか、何番目のタブか、などの情報を提供されます。
chrome.tabs.getSelected(null, function(tab) {
︙
}今回利用した chrome.tabs.getSelected では『chromeで現在選択されているタブを取得したら、指定した関数のtabにタブ情報を渡して実行します』という処理となります。
色々な情報を管理していますが自由に取り出されては困るので「私はこの情報しか取り扱いませんよ」という宣言を permission という配列に定義しているわけですね！
ちなみに permission に定義していないAPIを使おうとするとエラーとなってしまうので注意してください。
オプション設定画面を作る
今回はユーザー毎の設定を入れるためにオプション画面を作ります。
manifest.jsonで
"options_page": "options.html"
と書くと、アイコンを右クリックした時に『オプション』を選択できるようになります。
コードは以下の通り。
内容はシンプルでinputタグに文字列を記入して『保存』を押すと、ブラウザ自身に搭載されているLocalStorageという領域にデータを保存して、いつでも呼び出せるようにします。
このデータを利用してリンクを変換する時に入力した値を差し込むことでアフィリエイトタグが付いたリンクを作ることが出来ます。
LocalStorageについて過去に記事を書いたことがあるので参考にどうぞ。
今回のポイント
今回はブラウザに表示されたURLを取り扱うChrome拡張を作りました。
この拡張を通して今後別のChrome拡張を作っていく上で覚えていくべきポイントをまとめます。
permissionを使ってChromeが持っている情報を取り扱うことが出来る
ブラウザのデータを取り扱う場合はAPIで行えます。
具体的にどのような事が出来るかは
https://developer.chrome.com/extensions/tabs
などで確認できます。
permission で権限を付与して、色々試してみましょう。
アイコンを押した時の処理はpopup.htmlで
アイコンを押した挙動は browser_action となり、popup.html を表示した時にスクリプトを実行します。
追記
今回はAmazonじゃない場合、表示があるので popup を使ったのですが、browserActionの chrome.browserAction.onClicked.addListener(function callback) を使うのがスマートかもしれません。詳しくは↓ページにて。
https://developer.chrome.com/extensions/browserAction
ずっと持たせたいデータは LocalStorage を使おう
LocalStorageはブラウザが常に持つパラメータになります。
使い方は 過去記事 にて。
プログラミング初心者こそChrome拡張でどんどん便利なツールを作っていこう
今回はpopupとChromeのAPIを使ったChrome拡張の作り方を紹介しました。
紹介したコードを見て頂けたら分かりますが、Chrome拡張はコード量が少なくとも効果的なツールを作ることが出来ます。
サーバーも不要なのでランニングコストも要りません。
プログラミング初心者で何をしたら良いか分からない人など、こういったところで成果物を積み重ねていくのも勉強としては良いかと思っています。
自分で作ったChrome拡張の公開方法も紹介しているのでぜひご覧ください。
ここまで読んで頂きありがとうございました！
コメント