5周年目突入!
ノートの落書き感覚で発信する情報ブログ、その名も「デジテクノート2」。 沖縄から不定期で好き勝手更新しています!

degitekunote2

読まなきゃダメダメッ! 〜オススメピックアップ記事6選〜

001_20160726_google-dmca

2016/07/26

【DMCA申し立ては欠陥だらけ】なんでパクリ・・・

色んなメディアが登場し、様々な表現方法が選べる中、未だにパクリサイトが存在する意 …
001-2016.04.14-macbook-kowai

2016/04/14

MacBookシリーズは買うな。特にReti・・・

01_20151229_install-freesoft-2015

2015/12/29

2015年総結!絶対間違いないインスコ必須W・・・

どうも、2015年遂にWindows厨からMacも使う両刀使いになった私(@こふ …
001_20150720_tad22fw

2015/07/21

冷風機は冷えるのか!?TOYOTOMI「TA・・・

 どうも、どう考えても異常気象だろと思う気温が続いています沖縄在住の私 …
001_20150126_harasumento

2015/01/26

あなたは幾つ知ってる?全30種類の○○ハラス・・・

どうも、今レアチーズが無性に食べたい私(@こふす)です。 さてさて皆さん、ハラス …
【日本の世代名まとめ】ゆとり世代、バブル世代、しらけ世代、ポスト団塊の世代…

2014/08/20

【日本の世代名まとめ】ゆとり世代、バブル世代・・・

バリバリのゆとり世代の私(@こふす)です。ゆとりゆとりといわれるのも聞き慣れてき …

【結構簡単】ブラウザアクションボタン発火の自作Chrome拡張機能の作り方&サンプル

, , , , ,

      2016/11/06     216 views(おおよその数です)

Ads by Google

6__20161102__chrome-extension

オムニバー横のブラウザアクションをクリックして発火させる2番目に簡単なChrome 拡張機能(Extension)の作り方の紹介です。

単純にボタン一発で何らかの処理を行ないたい時に使える方法になります。

Chrome拡張機能には幾つかの種類があり、ちなみに1番簡単なChrome 拡張機能はscript.jsに処理内容を書いてページが読み込まれれば即実行するタイプです。実行するページURLも指定できるので、とにかく読み込み後問答無用で実行したい時に使えます。

例えばページを読み込むと「背景色を黒に変更させる」なんていう処理が可能なわけですね。まぁ実際はそんな拡張機能なんて使われないので、Google等の検索結果画面にファビコンを表示させたり、ページのサムネイルを表示させるなんていう拡張機能もあったりします。

ただ今回は全てのページ対象で、任意のタイミング(ここではブラウザアクションボタンを押したタイミング)で実行するタイプです。background.jsにてChrome APIを使うことで可能にしてみましょう。

 

Ads by Google

 

 

Chrome APIは沢山存在し、今回使用するものは

です。特別難しい事はないのでサクサクっといきましょう!

必要なもの

下記ファイルが必要です。空のファイルを用意して下で紹介していく内容をコピペすれば雛形が出来上がります。

  1. manifest.json
  2. script.js
  3. background.js

一応全てまとめてダウンロード出来るようにしたので、コピペ面倒という方はDLしてお使い下さい。

ダウンロード15 downloads

*あくまで雛形なのでそのままでは何も出来ません。最後にサンプルでオリジナルのChrome拡張機能を配布します。そちらは実際に動かすことが出来ます。

 

1.manifest.json

Chrome拡張機能を作る時は必ずmanifest.jsonが必要です。ただ中身は基本的に特別なことは無く普通に記述していけばOK。

手元にあったmanifest.jsを元にしたので長ったらしい記述がありますが、不要箇所を消せばもっとスッキリ書けます。

上記をそのままコピペしても良いですし、スリム化してもOK。

Qiitaで分かりやすくまとめているページがあったので貼っておきます。これ見ると多分全て分かると思います。

Chrome 拡張機能のマニフェストファイルの書き方 – Qiita

 

2.script.js

hogehoge()内に処理したいメインのJSを記述していきます。

読めば簡単ですが、単純にrequestがActionだった時にhogehoge()を実行しますよという内容ですね。

例えばアクションボタンをクリックするとアラートを表示させる処理だけであればこんな感じでOK。

アクションボタンをクリックすると「Hello World」とアラートが表示されるという意味不なChrome拡張機能の出来上がりですね。こんな風に簡単な内容であればこれだけでイケちゃいます。

 

3.background.js

background.jsはChromeが起動している間バックグラウンドで常に実行しているスクリプトです。Chrome APIにアクセスするためにはこのbackground.jsが必須で、複雑な処理をさせたい場合は必ず必要になります。

分かりやすく紹介しているページ貼っておきます。

Chrome機能拡張のバックグラウンドページについて

 

意外とこのbackground.jsで躓く方も多いようなので、概念的な部分から見ておいた方がすんなり理解出来るかと。というわけでQiitaで上手くまとめられていたページも載せておきます。

Chrome拡張の開発方法まとめ その1:概念編 – Qiita

 

ただ今回は単にアクションボタンクリックだけなので非常にシンプル。

たったこれだけでブラウザアクションボタンのクリックからオリジナルの処理を実行させることが出来ます。

流れ

流れとしては、

  1. ユーザーがブラウザアクションボタンをクリック。
  2. background.jsがアクションボタンのクリックを取得し、Message Passingで「Action」をSend。
  3. script.jsで「Action」requestを受け、hogehoge()の処理を行なう。

こんな感じです。

ここではbackground.jsはブラウザアクションボタンがクリックされた事をsendさせる為に必要で、sendされた内容をscript.jsで受け取り、それから任意の処理が開始されるというわけです。Chrome APIにアクセス出来るbackground.jsはブラウザアクションボタン以外にも様々なアクションや状態を間接的にsend出来ます。

 

以上を踏まえて実際に作ってみよう!

何を作ろうか悩みましたが、まずは視覚的に分かりやすい方が楽しいのでHTMLタグ<img>の画像を強制的にグレースケールさせるChrome拡張機能をサンプルで作ってみましょう。*CSSで読み込んでいる画像はグレイスケールされません。

グレースケールはCSSでさせて、each()で画像を取得します。

1.manifest.json

“default_title”: “グレースケールLOVE!”のようにブラウザアクションボタンにタイトルを付けることも出来ます。上記だとホバーさせると「グレースケールLOVE!」と表示されます。

2.script.js

Chrome拡張機能はwebkitエンジンで動作するので、グレースケール部分は-webkit-filterのみでも動きます。

3.background.js

background.jsは雛形通りで何も変えていません。

一式ダウンロード

ファイル一式も用意したので試してみたい方はDLしてお使い下さい。

ダウンロード13 downloads

 

Chrome拡張機能の追加の仕方

ストアにUPすると簡単にインストール出来ますが、お金掛かりますし今回はサンプルなのでローカルから読み込んでみましょう。読み込む方法は至って簡単。

3__20161102__chrome-extension

  1. まずはChromeの拡張機能の設定ページ(chrome://extensions/)を開きます。
  2. ページ右上の「デベロッパーモード」にチェックを入れます。
  3. 「パッケージ化されていない拡張機能を読み込む…」をクリックして、先程ダウンロードしたフォルダを選択します。

以上です。これで新たにChrome拡張機能を読み込むことが出来ます。

読み込むとChrome拡張機能の詳細が表示されます。manifest.jsonで記述した内容がここに表示されているのが分かると思います。アイコン類も表示されるので、実際に自作する際は各サイズ(32px / 48px /128px 等など)のオリジナルアイコンの作成も必要になってきます。今回はサンプルなのでグレイスケールにちなんでグレーの一色で用意してます。

4__20161102__chrome-extension

オムニバー横にブラウザアクションボタンが表示されていますが、早速先程追加した拡張機能が表示されているのが分かりますね!これを押せばscript.jsの内容が実行されるわけです。

5__20161102__chrome-extension

こんな感じ。

2__20161102__chrome-extension

いや~実に簡単ですよね。でもブラウザアクションボタンを押して何かさせる事が出来るようになれば意外とルーチンワークは半自動化出来そうですし、自分だけの便利な拡張機能が作れそうな気がしますよね。

例えばフォントが見づらいサイトで、強制的にメイリオとか游ゴシック等の見やすいフォントに変えちゃうみたいなね。結構色々出来そうですよね〜

ただ今回紹介した内容はChrome拡張機能全体のほんの少し触れただけで、もっと内容の濃い処理をさせることも出来ます。興味がある方は是非色々検索してみて下さいな。

ちなみに私も今年入って3個程自分と職場用で作成して、近々一般公開しようと思っているものが1個あります。公開する時はまた記事にします〜

ではでは

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

                    

Ads by Google

  , , , , ,