![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpeuXp0sJxGUL1rZtHCRk5iUk6FMpajCKlzwOzkF7mYE9ZJA8FN_YgLbczvdnOlXgYWcVfG-JzsMio53YVAuooagiuas7kHVp--UTXE6WrLqLP4dFlVLdvgFZtMuJPRVZolvkEmx5nYvPfxNjomBvb9SEo_rJoYPei3dwH1IXfnzqaEIB_bvvLQ0dz/s1600-rw/apple-606761_1280.jpg)
ChromeブラウザがPCにおいて、世界中でどこでもIEを抜いて一番使われいているブラウザという事が、色々な会社から発表されている。
そもそもIEを使っているのって、誰なんだい?と考えてみると、
「会社でルールになっているから」
「PCスキルが無いので、windowsのデフォルトの状態で使っている」
こうした事から、個人で、初心者出ない場合は確実にchromeブラウザを使っているという事がわかる。
ChromeExtensionを作る
何を作るかというアイデアも必要だが、その前に技術的な事をマスターしておこう。
必要言語と環境
プログラム言語 : Javascript
OSとブラウザ : WindowsかMacのChromeブラウザ
Chromeブラウザはデバッグコンソールなどを理解していると、JSを動かすだけの機能じゃなくても、トリッキーなツールを作る時にデバッグなどで役にたちます。
デフォルトセット
ChromeExtensionを構築するのは、基本的にjavascriptを書いて、manifest.jsonで簡単にセットするだけなのが、
デフォルトテンプレートを用意しておくと、非常に短期間で構築が行えると思い、今回は僕が使っているデフォルトテンプレートをダウンロードできるようにしておきました。
お好きにDLして、勝手にどんどん使ってくださいませ。
※ソースコードなどは入っていないので、改変などはご自由にどうぞ。
設定サンプル
chrome_extension_default.20170326.zip
基本事項だけなので、全ての拡張機能のセットがこのmanifest.jsonの設定で行えるというわけではないのですが、
もう少しデフォルトを変えたほうがいいと気がついたことなどあれば、コメントやメールなどで教えてください。
構成図
Chrome拡張機能の基本構成を理解しておきましょう。
ツール作成の時にこの構成が頭に入っていると設計などに役立ちますよ。
拡張機能の登録
Chromeブラウザの「機能拡張」ページの一番下に、下記図のようなリンクがあります。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl0GmGZVBtEwLXni7CZLxm3pptngramPYg7a1LA3JaYwNRvv6D8ooTEpagE6UlnMpZwQV_krqa1dibMU3E3LjoKtTGtxYbYPzwXO_Nt1lL3yMKh4dTYu5XP_rAwRZudGULj8KsUxuriu2-ojtnlqwULeeS8MwFiqXzGn76Gk653h0XuBXjxrBAN5f_/s1600-rw/1-2-02a9bd4484df35eb0e8747e49c61f96c.png)
クリックするとChromeウェブストアに遷移します。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhysN8WpAFEtJG8jLCElvHCHGwz3PQmWgrdA4kOUjXnYRaZb0T2pvqPgW6hm-280uVHWjva3aGO6j-P8pMpu-T3lFKgN-6CxNlKSweudS5Y4laozMU3FJRtkFFte8WM0cS_i7QVXNQEru7NxsFgiyS1yGagO9pBCuhPEc1DKg_yBd5SBvOuR9gVxAjN/s1600-rw/1-3-4f4eb807e2306cb29fbf246b111267bd-1024x494.png)
画面右上のギアマークをクリックして、「ディベロッパーダッシュボード」を選択
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRGqPfq1aiCI7MbzbkBvNmn_aKGD1uxCkJ-wK9X9VVbtp_Z_ml_jMXqjsTodc3e--hMbqhhasXVyPawSL_8XwTHks1Q0zIUxMrFxFYobiVxvo2OhHZaYd4y3GMqirSpIr4D7eW_o8RuViSgTTdpGeqGhcq4QBQruvDK5jENUyAlb1sPiN6JlFHnD3v/s1600-rw/1-4-d41d005fa8fb9ce2f28e0f130c4b3f66.png)
新しいアイテムを追加するボタンをクリック
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNIIgpVfEtfXZGQAGO65DG7qWS5cx28RGTvDFmYleZpudP6_9WKY5nkdl_5HsFxGA68xeh4CHwatfsbNrsSexdcs7JOfsI1ugFz4bygq_nqJHRj-bHzo51TPFWcMXDNpASu9yZpgB9QTho2ttREcoAZ5S5oupCIIepafn2-I9wNPRlNS7opE0ddCCy/s1600-rw/1-5-81a9324d44f0e029a0427aa8128fe5fb.png)
事前に機能拡張のプログラミングしたフォルダをzip圧縮しておきます。
zipファイルを選択してアップロードします。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9_cE3DA5shdfgoQEq-IsnUe43amleFbmf-5V82IFBeBNbg4XrJ9Ag7SUVl7JvuJZxMOzQqXAtGVxXu6uB26fy4KdHA2jdpAbo8m3V04J-EYOzfIPbYVbtJUr4KbYzqIgAgRW1wa4ejgCLR1B-GJdVsbJqMdZDvEeo1SmeYRKEOlKA2GhopIp6c5e2/s1600-rw/1-6-93fcfa153e4d46c0170cc4490905b2c7.png)
アイテム編集画面に遷移して、必要項目を入力。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYktw7TQ_7SZvn8OJE9DQ8q60fsSmfYx3FYjFsw1FoMuRstkOV0CCA4qeKGW0gYE2P3pjzOVrb8_H3fQgO7_xockl2f92K4MRBXJZYFGg8mVD_iLSlIL30Znyy-U1uopnQsXW5zXrtIKLaDUiuBFkb_qyee3ucoVSAVZdj0Z28nQhfh1KEVciHRG00/s1600-rw/1-7-861b2054a262550250b082cc669f5573-1024x381.png)
ここでは、スクリーンショットや、Chromeウェブストアで表示された時の表示アイコンだったり、必要な素材をアップロードできます。
※サイズは表示されています。
そして最後に、「公開」ボタンを押すと、無事にアップロード完了になります。
何度かエラーが出てやり直すことになりますが、めげずにTRYしてください。
$5払うメリット
Chrome拡張機能を一般公開する場合、5ドルをGoogleに対して支払わなければいけない。
ただし、公開しなくても、拡張機能のインストールページのURLは発行され、そのURLを知っている人は、インストールすることはできる。
さらにGoogleAppsを使っている場合は、同じドメインに対してであれば、無償公開をすることもできる。
いわゆる企業用の拡張機能をそのドメインのみで公開できるのだ。なんてセキュアなんだ・・・
そしてこの5ドルだが、高いのか安いのかというと、1つの拡張機能で5ドルではなく、Gmailの1アカウントに対して、20個までの拡張機能がアップロードできるとのこと(2017年3月時点)
拡張機能を沢山作る予定があるのと1つしか作る予定がないのとでは、価値観が違うと思うが、僕は個人的には支払っておいて損はないと思うんだが・・・いかがだろうか?
参考サイト
- 作業効率がアップ!オススメのChrome拡張機能20選
- jQuery を使って 30 分で Chrome 拡張を作ってみた
- Chromeのオリジナル拡張機能を開発しよう(ソースコードあり)
- エクステンション
0 件のコメント:
コメントを投稿