[ChromeExtension] WEBページ読み込み前に埋め込みスクリプトを実行

2017年1月11日

Chrome Extension テクノロジー プログラミング

2010年の段階でブラウザランキングはIEの天下でした。 ちなみに、ブラウザラインナップは今とあまり変わっておらず
IE FireFox Safari Opera Chrome
他にも色々あるだろうが、IEエンジンだったりSafariエンジンだったりするので、腫瘍はこの5つと考えていいだろう。 ※ちなみに、スマホは入れずにPCのみとする。 参考:2010年11月度 ブラウザシェア率
1IE58.26%
2Firefox22.75%
3Chrome9.25%
4Safari5.55%
5Opera2.20%

2016年12月度のブラウザランキング

丸6年経って、2016年12月時点のブラウザランキングでは、Chromeが1位におどりでています。 参考:WebブラウザシェアランキングTOP10
1Chrome 54.029.64%
2IE 11.019.58 %
3Firefox 49.07.91%
4Firefox 50.04.66%
5Chrome for Android4.13%
6Edge 143.96%
7Safari 10.02.9%
8Chrome 49.02.72%
9Chrome 51.02.68%
10Safari 9.11.75%
今度はスマホも入ってますが、PCのChromeだけでも、35%オーバーなのがわかります。 余裕の1位ですね。

Chrome優位の原因は何?

IEやSafariはOSにデフォルトでインストールされているのに、何故Chromeが1位なんでしょう? おそらくはGoogleの検索ページに行くとChromeブラウザじゃない場合に、インストールボタンが表示され、いともかんたんにインストールができてしまうことから ユーザーも障壁無くインストールしてしまい、Googleアカウントを持っていれば便利に使えてしまうことに加え、 いっときのFirefoxがそうであったように、開発ツールなどが非常に盛り込まれているため、エンジニアには必須のブラウザツールとなっているんだと思います。 今までデフォルトインストールという理由だけでIEブラウザにかなうブラウザは現れないと思われていたのに、さすがGoogleです。

ChromeExtensionは隠れたいい機能

ここまで利用が拡大されたブラウザの拡張機能を利用しない手はないでしょう。 拡張機能はかつてのFirefoxのオハコであったわけですが、今やどのブラウザも拡張機能を備えるようになっています。 中でも、構築も非常にかんたんなchromeextensionは、自分で便利に構築できれば、業務効率アップできることは間違いないでしょう。 ChromeExtensionの構築の仕方は以前のブログで書いているので構築初心者の方は参考にしてください。 またドットインストールでも、扱われているので、こちらも勉強になるので、見たことがない人は是非オススメします。

ChromeExtensionの起動タイミング

ページ読み込み時にJSを常に実行できると、非常に便利なツールがたくさん作れることが想像できます。 しかし、デフォルトで行うと、ページのonload後にJSが実行されてしまうため、できれば、HEADタグ位置に入れ込みたいと考えた時に、manifest.jsonの設定だけで実現できるので、その対応コードを備忘録として書いておきます。 "content_scripts": [{ "matches":[ "http://*/*", "https://*/*" ], "js":[ "contents/js/wpa.js" ], "run_at":"document_start" }] 上記コードはmanifest.jsonの設定の中のcontent_scriptsの部分なんですが、一番下にある「run_at」というところがミソなようです。 ちなみに、ここのオプションは以下のようになっているらしいので、便利に使ってください。
document_start document_end document_idle(初期値)
必ずしもHEADがいいとも限らないので、オプション設定は適宜切り替えて行うといいでしょう。 こうした、痒いところに手が届く仕様が盛り込まれているという事が、Chromeブラウザが選ばれているポイントの一つなのかもしれませんね。 他にも使えるオプションがあれば共有したいと思います。