「Q Accelerator」のmanifest.jsonを参考にしてChrome拡張機能の理解を深める
はじめに
Chrome拡張機能について「Q Accelerator」のmanifest.jsonを参考にしながら理解を深める記事です。
Q Acceleratorとは
Q Accelerator はQiita上で行番号を表示したり、コピーアイコンを表示したりするChrome拡張機能です。
Qiitaをより便利にするChrome拡張機能をつくりました - Qiita
- [qiita]
- [app]
- [chrome]
- [extension]
- [bundle]
あーこれほしかったやつだ!って便利機能がだいたい実装されてすごい。
2017/01/25 10:24
Qiitaをより便利にするChrome拡張機能をつくりました - Qiita最高に便利
2017/01/10 12:36
Qiitaをより便利にするChrome拡張機能をつくりました - Qiitaここまでの情熱があるならQiita社入れてもらえば
2017/01/10 11:13
Qiitaをより便利にするChrome拡張機能をつくりました - Qiitaincrements 入れよ・・・・
2017/01/10 17:13
などの賞賛コメントがついております。
技術的には
Babel, Webpack, Karma, Mocha, Chai, Sinon.JS, Vue.JS, Material Design Lite
を使っています。
Manifest Fileの概要
さて、Manifest Fileを早速みていきましょう。
これがないと拡張機能は動きません。
manifest_versionとかnameとかversionとかは必須項目です。
このあたりの部分はさっと読み飛ばしていきます。
manifest.jsonの詳細は以下のページが参考になりました。
q-acceleratorのmanifest.jsonをみてみましょう。
みていく項目はcontent_scripts、background、browser_action、content_security_policy、permissions、options_ui、web_accessible_resources です。
content_scripts
実行するスクリプトをベージごとに指定できます。
JSだけでなくCSSも指定できます。
"content_scripts": [ { "matches": [ "http://qiita.com/", "https://qiita.com/" , "http://qiita.com/items", "https://qiita.com/items", "http://qiita.com/stock", "https://qiita.com/stock", "http://qiita.com/mine", "https://qiita.com/mine" ], "js": ["content_scripts/article-list-stream-content.js"] }, { "matches": [ "http://qiita.com/tags/*", "https://qiita.com/tags/*" ], "js": ["content_scripts/article-list-tags-content.js"] }, { "matches": [ "http://qiita.com/*/items/*", "https://qiita.com/*/items/*", "http://qiita.com/*/private/*", "https://qiita.com/*/private/*" ], "js": ["content_scripts/article-content.js"] }, { "matches": [ "http://qiita.com/popular-items", "https://qiita.com/popular-items" ], "js": ["content_scripts/popular-items-content.js"] }, { "matches": [ "http://qiita.com/drafts/new", "https://qiita.com/drafts/new" ], "js": ["content_scripts/drafts-new-content.js"] } ],
Content Script の制約
こちらがわかりやすいです。
Content Scriptには以下のような制約があります。
● chrome.*APIが一部のものしか用いることが出来ない(公式ドキュメントを参照)
● ページ内で定義されている変数や関数にアクセスができない(DOMにはアクセスできる)
background
バックグラウンドで動作するスクリプトを記述します。
ただし、バックグラウンドページの使用は推奨されていません。
代わりにイベントページを推奨しています。
Background Pages - Google Chrome
"background": { "persistent": false, "page": "background/background.html" },
browser_action
メニューバーにある拡張機能のボタンがクリックされたときに表示するHTMLを記述します。
"browser_action": { "default_popup": "assets/popup.html" },
content_security_policy
コンテンツセキュリティポリシー(CSP)。
クロスサイトスクリプティング (XSS) などを防ぐための設定。
ここではsetTimeout(), setInterval(), new Function() を使用するために以下の記述をしている。
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
permissions
Declare Permissions - Google Chrome
ここではhtml5のストレージ(SessionStorageまたはLocalStorage)を使用するために以下の記述をしている。
"permissions": [ "unlimitedStorage", "storage" ],
options_ui
拡張機能のオプションを設定するHTMLを指定します。
"options_ui": { "page": "assets/settings.html", "open_in_tab": true },
web_accessible_resources
外部ページ(ここではQiita)で読み込ませたいリソースのパスを指定します。
"web_accessible_resources": [ "assets/images/*" ]
まとめ
Manifest Fileを読むとなんとなくその拡張機能が何をやっているのかがわかります。
ソースコードを読む前にmanifest.json を読むとコードリーディングがはかどりますね。
- 作者: ウェド・アルコーン,クリスチャン・フライコット,ミシェル・オーラ
- 出版社/メーカー: 翔泳社
- 発売日: 2016/03/15
- メディア: Kindle版
- この商品を含むブログを見る