読者です 読者をやめる 読者になる 読者になる

「Q Accelerator」のmanifest.jsonを参考にしてChrome拡張機能の理解を深める

はじめに

Chrome拡張機能について「Q Accelerator」のmanifest.jsonを参考にしながら理解を深める記事です。

Q Acceleratorとは

Q Accelerator はQiita上で行番号を表示したり、コピーアイコンを表示したりするChrome拡張機能です。

Qiitaをより便利にするChrome拡張機能をつくりました - Qiita

あーこれほしかったやつだ!って便利機能がだいたい実装されてすごい。

2017/01/25 10:24

Qiitaをより便利にするChrome拡張機能をつくりました - Qiita

最高に便利

2017/01/10 12:36

Qiitaをより便利にするChrome拡張機能をつくりました - Qiita

ここまでの情熱があるならQiita社入れてもらえば

2017/01/10 11:13

Qiitaをより便利にするChrome拡張機能をつくりました - Qiita

increments 入れよ・・・・

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を記述します。

https://qiita-image-store.s3.amazonaws.com/0/97014/2823c978-eb44-a5cb-bde1-a42323e98780.png

https://qiita-image-store.s3.amazonaws.com/0/35595/f90d918d-7349-b580-1550-a55863a408d6.png

  "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 を読むとコードリーディングがはかどりますね。

ブラウザハック

ブラウザハック