degitekunote2ノートの落書き感覚で発信する情報ブログ、その名も「デジテクノート2」。ScRfixeder」公開しますWeb制作・ものづくりCSS3のFlexboxで作ってみる2016年に流行ったスマホカラムレイアウトWeb制作・ものづくりAltを可視化するChrome拡張機能作りました「見え〜るAlt」Web制作・ものづくり【結構簡単】ブラウザアクションボタン発火の自作Chrome拡張機能の作り方&サンプルWeb制作・ものづくりWeb制作・ものづくりの記事一覧へ今年2022年(買って|体験して)良かったモノ・悪かったモノ・微妙だったモノコラム&ライフログ今年2021年買って良かった、使って良かったモノランキングコラム&ライフログ2020年、今年買ってよかったモノ・サブスクBEST10コラム&ライフログ今年2019年買ってよかったものコラム&ライフログ24歳ってヤング時代(18歳〜)の最後なんだってよ。【結果DP-X1A最高!】AK70と迷いに迷って買ったDP-X1Aはやはり最高でした。拡張機能(Extension)の作り方の紹介です。単純にボタン一発で何らかの処理を行ないたい時に使える方法になります。拡張機能はscript.jsに処理内容を書いてページが読み込まれれば即実行するタイプです。実行するページURLも指定できるので、とにかく読み込み後問答無用で実行したい時に使えます。ページを読み込むと「背景色を黒に変更させる」なんていう処理が可能なわけですね。実際はそんな拡張機能なんて使われないので、Google等の検索結果画面にファビコンを表示させたり、ページのサムネイルを表示させるなんていう拡張機能もあったりします。今回は全てのページ対象で、任意のタイミング(ここではブラウザアクションボタンを押したタイミング)で実行するタイプです。APIを使うことで可能にしてみましょう。APIは沢山存在し、今回使用するものはchrome.extension.onMessage.addListenerです。特別難しい事はないのでサクサクっといきましょう!必要なもの下記ファイルが必要です。空のファイルを用意して下で紹介していく内容をコピペすれば雛形が出来上がります。manifest.jsonscript.jsbackground.js一応全てまとめてダウンロード出来るようにしたので、コピペ面倒という方はDLしてお使い下さい。id=6]*あくまで雛形なのでそのままでは何も出来ません。最後にサンプルでオリジナルのChrome拡張機能を配布します。そちらは実際に動かすことが出来ます。1.manifest.jsonChrome拡張機能を作る時は必ずmanifest.jsonが必要です。中身は基本的に特別なことは無く普通に記述していけばOK。["tabs","background","http://*/*","https://*/*"]}手元にあったmanifest.jsを元にしたので長ったらしい記述がありますが、不要箇所を消せばもっとスッキリ書けます。上記をそのままコピペしても良いですし、スリム化してもOK。Qiitaで分かりやすくまとめているページがあったので貼っておきます。これ見ると多分全て分かると思います。Qiita2.script.jshogehoge()内に処理したいメインのJSを記述していきます。{//ここに何らかの処理}読めば簡単ですが、単純にrequestがActionだった時にhogehoge()を実行しますよという内容ですね。アクションボタンをクリックするとアラートを表示させる処理だけであればこんな感じでOK。World」とアラートが表示されるという意味不なChrome拡張機能の出来上がりですね。こんな風に簡単な内容であればこれだけでイケちゃいます。3.background.jsbackground.jsはChromeが起動している間バックグラウンドで常に実行しているスクリプトです。APIにアクセスするためにはこのbackground.jsが必須で、複雑な処理をさせたい場合は必ず必要になります。分かりやすく紹介しているページ貼っておきます。Chrome機能拡張のバックグラウンドページについて意外とこのbackground.jsで躓く方も多いようなので、概念的な部分から見ておいた方がすんなり理解出来るかと。いうわけでQiitaで上手くまとめられていたページも載せておきます。Qiitaただ今回は単にアクションボタンクリックだけなので非常にシンプル。"Action");});たったこれだけでブラウザアクションボタンのクリックからオリジナルの処理を実行させることが出来ます。流れ流れとしては、ユーザーがブラウザアクションボタンをクリック。Passingで「Action」をSend。script.jsで「Action」requestを受け、hogehoge()の処理を行なう。ここではbackground.jsはブラウザアクションボタンがクリックされた事をsendさせる為に必要で、sendされた内容をscript.jsで受け取り、それから任意の処理が開始されるというわけです。APIにアクセス出来るbackground.jsはブラウザアクションボタン以外にも様々なアクションや状態を間接的にsend出来ます。以上を踏まえて実際に作ってみよう!何を作ろうか悩みましたが、まずは視覚的に分かりやすい方が楽しいのでHTMLタグ<img>の画像を強制的にグレースケールさせるChrome拡張機能をサンプルで作ってみましょう。*CSSで読み込んでいる画像はグレイスケールされません。グレースケールはCSSでさせて、each()で画像を取得します。“グレースケールLOVE!”のようにブラウザアクションボタンにタイトルを付けることも出来ます。上記だとホバーさせると「グレースケールLOVE!」と表示されます。{$(this).css("-webkit-filter","grayscale(100%)");});}Chrome拡張機能はwebkitエンジンで動作するので、グレースケール部分は-webkit-filterのみでも動きます。"Action");});background.jsは雛形通りで何も変えていません。一式ダウンロードファイル一式も用意したので試してみたい方はDLしてお使い下さい。id=5]Chrome拡張機能の追加の仕方ストアにUPすると簡単にインストール出来ますが、お金掛かりますし今回はサンプルなのでローカルから読み込んでみましょう。読み込む方法は至って簡単。Chromeの拡張機能の設定ページ(chrome://extensions/)を開きます。ページ右上の「デベロッパーモード」にチェックを入れます。「パッケージ化されていない拡張機能を読み込む...」をクリックして、先程ダウンロードしたフォルダを選択します。これで新たにChrome拡張機能を読み込むことが出来ます。読み込むとChrome拡張機能の詳細が表示されます。manifest.jsonで記述した内容がここに表示されているのが分かると思います。等など)のオリジナルアイコンの作成も必要になってきます。今回はサンプルなのでグレイスケールにちなんでグレーの一色で用意してます。オムニバー横にブラウザアクションボタンが表示されていますが、早速先程追加した拡張機能が表示されているのが分かりますね!これを押せばscript.jsの内容が実行されるわけです。いや~実に簡単ですよね。ブラウザアクションボタンを押して何かさせる事が出来るようになれば意外とルーチンワークは半自動化出来そうですし、自分だけの便利な拡張機能が作れそうな気がしますよね。フォントが見づらいサイトで、強制的にメイリオとか游ゴシック等の見やすいフォントに変えちゃうみたいなね。出来そうですよね〜ただ今回紹介した内容はChrome拡張機能全体のほんの少し触れただけで、もっと内容の濃い処理をさせることも出来ます。興味がある方は是非色々検索してみて下さいな。ちなみに私も今年入って3個程自分と職場用で作成して、近々一般公開しようと思っているものが1個あります。