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

２０１０年の段階でブラウザランキングはIEの天下でした。 ちなみに、ブラウザラインナップは今とあまり変わっておらず

IE FireFox Safari Opera Chrome

他にも色々あるだろうが、IEエンジンだったりSafariエンジンだったりするので、腫瘍はこの５つと考えていいだろう。 ※ちなみに、スマホは入れずにPCのみとする。 参考：2010年11月度 ブラウザシェア率

1	IE	58.26%
2	Firefox	22.75%
3	Chrome	9.25%
4	Safari	5.55%
5	Opera	2.20%

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

丸６年経って、２０１６年１２月時点のブラウザランキングでは、Chromeが１位におどりでています。 参考：WebブラウザシェアランキングTOP10

1	Chrome 54.0	29.64%
2	IE 11.0	19.58 %
3	Firefox 49.0	7.91%
4	Firefox 50.0	4.66%
5	Chrome for Android	4.13%
6	Edge 14	3.96%
7	Safari 10.0	2.9%
8	Chrome 49.0	2.72%
9	Chrome 51.0	2.68%
10	Safari 9.1	1.75%

今度はスマホも入ってますが、PCのChromeだけでも、３５％オーバーなのがわかります。 余裕の１位ですね。

Chrome優位の原因は何？

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

ChromeExtensionは隠れたいい機能

ここまで利用が拡大されたブラウザの拡張機能を利用しない手はないでしょう。 拡張機能はかつてのFirefoxのオハコであったわけですが、今やどのブラウザも拡張機能を備えるようになっています。 中でも、構築も非常にかんたんなchromeｅｘｔｅｎｓｉｏｎは、自分で便利に構築できれば、業務効率アップできることは間違いないでしょう。 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ブラウザが選ばれているポイントの一つなのかもしれませんね。 他にも使えるオプションがあれば共有したいと思います。