メニューを閉じる

テクノデジタルグループ

メニューを開く

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, nameversionだけです。

manifest_version:
※必須

現在、この値は必ず2にしないといけません。
version:
※必須
拡張機能のバージョンです。クロームストアにアップロードすることになる場合は更新する度にバージョンを必ず上げないといけないので、なるべく低いバージョンにする方がいいと思います。
name:
※必須
拡張機能の名前。
description: 拡張機能についての説明。
browser_action: このキーバリューでブラウザーに拡張ボタンが作られます。画像を入れたい場合はdefault_iconのところにパスを指定し、そのボタンを押すとdefault_popupで指定されたhtmlファイルが表示されます。
permissions: 拡張機能に権限を与える場合はここに指定します。値が配列です。拡張機能がクッキーやセッションなどをアクセスしたり、ブラウザーライブラリーを使用したい場合はここに指定してください。
background: このキーは、Webページと関係なく、ずっと維持する必要のあるjsスクリプトが入ります。
content_scripts: このキーは配列であり、特定なWebページにスクリプトを読み込みたい場合に指定します。配列の中にある各オブジェクトに二つのキーがあります: jsmatchesjsのキーはjsファイルが入った配列で、 matchesのキーはURLパターンが入り、このマッチに当てはまるURLjsファイルが読み込まれます。

上記はよく使われているキーですが、他のキーやライブラリーもいっぱいあり、かなりコンプレクスな拡張機能を作ることができます。

マニフェスト、html、js、css、画像などのファイルが全て準備できてブラウザーで確認したい場合は、その他のツール > 拡張機能をクリックしてデベロッパーモードONにしているかを確認した上でパッケージ化されていない拡張機能を読み込むというボタンを押してください。manifest.jsが入っているフォルダーをそのままOpenすると拡張機能が立ち上がります。

簡単ですね!Chrome拡張機能を作ってみませんか?

That’s all, folks!


【記事への感想募集中!】

記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!
  • こんな記事が読んでみたい、こんなことが知りたい、調べてほしい!という意見も募集中!
  • いただいた感想は今後の記事に活かしたいと思います!

感想フォームはこちら


【テクノデジタルではエンジニア/デザイナーを積極採用中です!】

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

  • 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
  • テストの進捗が見える。開発がスマートに進む。
  • クラウド型テスト管理ツール『Qangaroo(カンガルー)』

【テクノデジタルのインフラサービス】

当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。

https://www.tcdigital.jp/infrastructure/

最近の記事

SNS共有