【Chrome extension】ページ読み込み時に必ずJSを実行できるサンプル

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

Web関連で開発の仕事をしていると、ブラウザについての挙動をコントロールするツールが欲しくなる事もよくあります。
個人的には、世の中にあるブラウザというモノが一つになることを強く望んでいるんですが、何故かフリーソフトという扱いなのに
IE、Firefox、Chrome、Opera、Safari、この5ブラウザは1つにならないようです。
特にIEをは各バージョンによって機能や仕様が大きく違っていることから、「面倒くさいブラウザ」として開発員に嫌われているようです。

主流のブラウザ

http://webrage.jp/mobile/data/pc_browser_share.html

このサイトを見ると、日本がどんだけIEに依存しているというか、Windowsを使いつつ何も考えずに標準ブラウザを使っているローリテラシな人がいかに多いかがよく分かるレポートである。

そうは言っても、主流ブラウザの中で一番後発のはずのChromeブラウザが世界首位ダントツなのは、いまさらながらビックリでアッパレある。
確かに、自宅の環境と会社の環境を同期してくれるChromeブラウザのシステムは、非常に使いやすいし、その昔、開発ブラウザと言われ続けてきたFirefoxも寄せ付けないほどのデバッグツール(今はどのブラウザも同じことはできるのだが・・・)
やはりユーザー使用をとことん考慮されて作られている感が満載なんだねChromeは。

そして、MacでもWindowsでもLinuxでもスマホでも、大体のOSにDLして搭載する事が可能なのも、ポイントが高い一つかもしれない。
IEはwindows、SafariはMac・・・というようにOSに依存しているブラウザなんてもはや古い古い!

もはやChromeを使わない意味が分からないぐらいのポジションじゃないですか?使ってない人に理由聞く理由なんてないでしょ。

便利ツール考案

既存のページに機能を埋め込むSaasツールを開発しているエンジニアも多いと思いますが、いちいちサンプルページを靴ったり、
デバッグコンソールからコマンド叩いたり、わざわざテストサイトを作ったりするのはうんざりしているエンジニアからすると、ページのonloadイベントで固定で自分のJSライブラリを埋め込めるというのは非常に便利かもしれない。

そうすることで、独自のツールをWEBページに対して発火させるのが用意になるし、もしかしたら、公開して他の人が使ってくれると、それなりのログも取れたりして、なかなかのインパクトである。

無い脳みそをこねくり回して、いくつかアイデアを考えてみたのだ。

1. 特定のページで情報を抜き取る簡単ブックマーク作成ツール
2. 色々なページをまたがってキャッシュ情報を出し入れできる機能(お気に入り商品のサイト別比較とか)
3. ページを開いた時に対象ドメイン以外の画像やiframeを排除して、広告をカットする機能

まあ、ここはアイデア次第なので、この記事を見てアイデアを思いついて商品化するパワーのない人は是非とも僕にアイデアを押し付けてくれたまえ。

ソースコード

https://github.com/yugeta/chromeEx_onload

githubにアップしておいたからDLして使ってくれ。
ページを読み込んだら毎回alertを表示するようにしている。

インストール方法

環境はgitがインストールされているmacを前提に記述します。(windowsの人すみません、自分でトランスレートしてください)

1. githubから任意の場所にcloneする。または、githubからzipDLする。

2. chrome拡張機能に登録※windowsの人は制限があるので、ブラウザを再起動すると拡張機能は消えてしまします。

スクリーンショット 2016-08-02 23.49.20

chrome画面の右上のメニューから「拡張機能」にたどり着いてください。

スクリーンショット 2016-08-02 23.49.41 のコピー

「パッケージ化されていない拡張機能を読み込む」ボタンを押す。
先ほどDLしてきたフォルダを選択する。

スクリーンショット 2016-08-02 23.50.43

問題なく追加された事を確認する。

スクリーンショット 2016-08-02 23.50.52

chrome画面の右上にアイコンが追加されたことも確認する。

スクリーンショット 2016-08-02 23.51.02

クリックするとpopup.htmlに記述した内容が表示されることも確認する。

スクリーンショット 2016-08-02 23.52.06

そして、どこか別のページを読み込んでみるとアラートが出ることが確認できるはずです。

さあ、これからどうする?

とりあえず、簡単にセットする事ができたんですが、この後は先程のアイデアを実現する番です。
実はこうした確認ができるとたったの5ドルで、一般公開をすることができるのだ。
是非便利な神ツールを作ってみてはいかがでしょうか???

まあ、この拡張機能、ページ読み込む度にアラートが出てウザいので、ソッコー消しておいてくださいね。
苦情は受け付けませんが、質問は受け付けます。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です