2024.10.01
【勉強】ミドルウェア・アプリケーションのEOL・EOSLについて学んでみた
2018.05.30
プログラミングChrome拡張機能を作ってみました!
Canadian Devです。
みなさん、Chrome拡張機能を作ってみたことがありますか?ブラウザーについたスクリーンキャプチャーやアドブロッカーなどということです。
Webページを作ったことがあるならとても簡単に作れると思います。
APIをテストするために、自社サービスのウェブAPIと繋がるChrome拡張機能を作ったことがあります。
Chrome拡張機能に使用されたファイルがこうなりました:
- api_test.js
- background_test.js
- icon.png
- jquery.min.js
- manifest.json
- test.html
このリストの中で、必須のファイルはmanifest.jsonだけです。ただのJSONファイルですが、このファイルがないとChromeがちゃんと拡張機能を読み込むことができません。
拡張機能がまずマニフェストを読み込み、そのファイルに書いた設定で拡張機能を立ち上げます。
manifest.jsonが下記のコードのようになります:
{ "manifest_version": 2, "name": “テストChrome拡張機能", "description": “This extension is a Chrome extension test“, "version": “0.9.1.0”, "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": [ "activeTab”, "cookies", "*://*.qangaroo.jp/*", "http://ajax.googleapis.com/" ], "background": { "scripts": [“background_test.js"] } "content_scripts": [ { "matches": [“*://*.qangaroo.jp/*”], "js": [“api_test.js”] } } }
上記のコード通り、マニフェストに必要なキーバリューがmanifest_version
, name
とversion
だけです。
manifest_version: |
現在、この値は必ず2にしないといけません。 |
version: ※必須 |
拡張機能のバージョンです。クロームストアにアップロードすることになる場合は更新する度にバージョンを必ず上げないといけないので、なるべく低いバージョンにする方がいいと思います。 |
name: ※必須 |
拡張機能の名前。 |
description: | 拡張機能についての説明。 |
browser_action: | このキーバリューでブラウザーに拡張ボタンが作られます。画像を入れたい場合はdefault_iconのところにパスを指定し、そのボタンを押すとdefault_popup で指定されたhtml ファイルが表示されます。 |
permissions: | 拡張機能に権限を与える場合はここに指定します。値が配列です。拡張機能がクッキーやセッションなどをアクセスしたり、ブラウザーライブラリーを使用したい場合はここに指定してください。 |
background: | このキーは、Webページと関係なく、ずっと維持する必要のあるjsスクリプトが入ります。 |
content_scripts: | このキーは配列であり、特定なWebページにスクリプトを読み込みたい場合に指定します。配列の中にある各オブジェクトに二つのキーがあります: jsとmatches。jsのキーはjsファイルが入った配列で、 matchesのキーはURLパターンが入り、このマッチに当てはまるURLにjsファイルが読み込まれます。 |
上記はよく使われているキーですが、他のキーやライブラリーもいっぱいあり、かなりコンプレクスな拡張機能を作ることができます。
マニフェスト、html、js、css、画像などのファイルが全て準備できてブラウザーで確認したい場合は、その他のツール
> 拡張機能
をクリックしてデベロッパーモード
がON
にしているかを確認した上でパッケージ化されていない拡張機能を読み込む
というボタンを押してください。manifest.jsが入っているフォルダーをそのままOpenすると拡張機能が立ち上がります。
簡単ですね!Chrome拡張機能を作ってみませんか?
That’s all, folks!
【記事への感想募集中!】
記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!【テクノデジタルではエンジニア/デザイナーを積極採用中です!】
下記項目に1つでも当てはまる方は是非、詳細ページへ!Qangaroo(カンガルー)
【テクノデジタルのインフラサービス】
当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。
最近の記事
タグ検索