Chrome Extensions を作ってみよう#1(下準備編)

Chrome Extensions を作ってみよう#1(下準備編)

Webエンジニアにとって、Webブラウザは仕事道具です。
ただし、Webブラウザが全て「友好的なブラウザ」と答えるエンジニアはおそらく皆無だと思われます。

それは、Internet Explorer(以下:IE)という、強敵が存在するからですね。

IEの存在意義

かつては「Netscape Navigator」というブラウザと二分され、メーラ機能を持っているNetscape Navigatorに軍配が上がろうとしていました。しかしInternet Explorerは Microsoft Windowsの標準としてバンドルされ、強気の普及戦略により、世の中のブラウザの頂点に君臨するようになりました。

言わば王者ですね。

ただ、王者として君臨していたのは、数年前までの話で、ここ最近は、Google Chromeブラウザ(以下 Chrome)に乗り換えられようとしています。

何故、IEほどの王者が衰退してしまったのでしょう?
OSにデフォルトで入っていて、だれでも気軽に扱えるのに・・・

確実に言えるのは、新たなデバイス「スマートフォン」の普及によりWebkit(GoogleとAppleが標準としていたブラウザのオープンソースプロジェクト)とHTML5への移行が急速に進んだからでしょう。Windowsは王者で無くなった=IEも王者で無くなったのだと思います。

また、開発員でデフォルトブラウザをIEに設定している人は少数派ですし、MacもiOSの開発機として売れていることも原因でしょう。

何故、開発員がIEを嫌っているのか・・・

僕の実体験で言えば、IEというブラウザの個別仕様が、W3Cに準拠しておらず、とにかく不具合ともとれるような仕様のオンパレードだという事実と、ただでさえ、IEのバージョン毎に仕様が変わっているのに、いくつものOSをまたいで、バージョンが入り乱れているという事が原因でしょう。

ajax(非同期通信)の普及の足を引っ張っていたのもIEです。多くの場面で開発員はIEの仕様に苦しみ、セキュリティ攻撃に苦しみ、結果としてIEを選択しなくなったのだと思います。

とにかく、IEは、扱いづらいブラウザなんです。

ブラウザ使用ランキング

2015年3月(国内)調べ
https://webrage.jp/mobile/data/pc_browser_share.html

1位 IE11
2位 Chrome 41
3位 Chrome40
4位 Firefox36
5位 IE9

確かにIE11がトップをとってますが、基本的には、低リテラシの一般ユーザーの方だと思われます。
注目すべきはChromeが2位と3位にいることですね。
合わせると、かなり大きなシェアだということがわかると思います。

注目すべきは、上記サイトの「世界調べ」の箇所ですが、ここではChromeがIEを大きく引き離し上位を占めています。

開発員以外でも、みんなChromeが好きな証拠ですね。

Chromeを改造しよう

ChromeにはExtensions(拡張機能)があり、ユーザーが好みに合わせて機能を追加することができます。
Chrome ウェブストアには、すでにたくさんのフリーの拡張機能があるので使っている人も多いと思います。

ただ、開発員でかつ、Webエンジニアであるならば、Chrome Extensionsをもっと便利にしたいと思うはずです。

ということで、まずは、Chrome Extensionsを使い倒して、便利な環境を手に入れたいと思います。

準備ファイル一覧

Extensions(拡張機能)は概ね以下のファイルで作成できます。

sample/
index.html
manifest.json
css/
css.css
js/
js.js

基本テンプレートとして、4ファイルあれば、色々なことができます。

ソースコード

index.html

manifest.json

css.css

js.js

拡張機能として読み込んでみよう

1.ブラウザの設定ボタンを押す

image11

2.設定を選択

image07

3.「拡張機能」を選択して、「パッケージ化されていな拡張機能を読み込む」ボタンを押す。

image09

4.先ほど作成したファイルが入ったフォルダを選んで「選択」ボタンを押す

image12

5.機能拡張に追加された事を確認

image08

6.拡張機能のアイコンが増えたことを確認

image10

7.アイコンをクリックして「index.html」が登録されることを確認

image13

簡単説明

一番重要なファイルは「manifest.json」です。

ここに、拡張機能の色々な情報を書き込み、ボタンが押された時に、「index.html」を表示する事が書かれています。
下記ページでリファレンスが確認できます。
https://developer.chrome.com/extensions/tut_migration_to_manifest_v2

あとは、index.htmlを書き換えて、色々な機能が作れることが想像できると思います。

どんな事ができるか考えてみた

1.ページ読み込み時に、特定のJSを実行させる。
 ※ページにJSタグを貼らなくても実行できるようにできます。(確かそんなプラグインがありましたね)

2.検証ツールと連動して、WEB-APIのツールを自動検証させる。

3.会社の共通リンク集を作る。(総務人事資料や、各種管理ツール、社内WEBツールのリンク集など)

想像力が増しますね。

JSを実行する処理や、ブラウザキャッシュを利用する方法など、色々な技がありますので、
次回から、色々な便利ツールを作ってみたいと思います。

コメント