2017月07月14日

Chrome Extension development

始めに

私がChrome拡張機能作りたいと思ったのは、Chrome拡張機能のネイティブAPIを使えばHttpOnly属性付きのクッキー取得等ができる等、色々なメリットがあるからでした。Chrome拡張機能はHTMLとCSSとJavascriptで作られているので、Webサイトの開発経験があれば、開発は簡単です。

Manifest File

拡張機能の開発でまず最初に必要なのはmainfest.jsonを作成です。Manifest Fileとはその拡張機能に関する情報を書くものです、例えば、拡張機能の作者や名前、アイコン、必要な権限などのメタ情報などです。

{
  "background": {
     "scripts": ["background.js"],
     "persistent": false
  },
  "content_scripts": [ {
     "js": ["js/cookie.js" ],
     "matches": [ "https://qiandao.today/*" ]
  } ],
   "default_locale": "en",
   "description": "an extension for get HTTP ONLY cookies",
   "icons": {
      "32": "images/logo32.png",
      "16": "images/logo16.png",
      "48": "images/logo48.png",
      "128": "images/logo128.png"
   },
   "manifest_version": 2,
   "permissions": [ "cookies", "tabs", "http://*/*", "https://*/*"],
   "name": "Get HTTP ONLY cookies",
   "version": "0.0.6"
}

mainfest.jsonの内容についてちょっと説明します。

background

常にバックグラウンドで動いてるスクリプトです。拡張機能をタスクや状態を管理する目的で使います、API利用制限はありません。
persistent属性をfalseにすると、必要になったら動き、不必要になったらアイドル状態になり、メモリが開放されます。

content_scripts

Webページの中に挿入するCSSとJavaScriptのことを「Content Scripts」と呼びます。matches属性は実際実行するのURLです。
セキュリティ上の理由で、このJavaScriptは独自の実行環境にあり、挿入先のWebページのDOMにはアクセスでますが、そのページで定義した変数や関数にアクセスすることはできません。

Content-Scriptsは下記のAPI利用できない制限があります。

  • extension ( getURL , inIncognitoContext , lastError , onRequest , sendRequest )
  • i18n
  • runtime ( connect , getManifest , getURL , id , onConnect , onMessage , sendMessage )
  • storage

permissions

特定のAPIを使うためにはその権限を宣言する必要があります。どんな権限が必要になるかは、各APIのドキュメントを見ればわかります。

manifest_version

これはマニフェストファイルのバージョンを示しているメタデータです。この記事の執筆時点での最新版は2となっています。特別な理由がない限り、常に最新版を利用しましょう。

Content-Script と Background の相互通信

Content-ScriptとBackgroundはメッセージのやり取りで互いにコミュニケーションを取ることができます。

// background listen message
chrome.runtime.onMessage.addListener(function (message) {
  console.log(message);
});

// Content-Script send message
chrome.runtime.sendMessage('Hello World!');

これで、Content-Script側では使えないAPIをBackgroundに委託して、間接的に色んなAPIが使えるようになります!

Exmaple

私は簡単な拡張機能アプリを作りました。GetCookies
この拡張機能を使うと、HttpOnly属性付きのクッキーが取得できます。

まとめ

以上、簡単にChrome拡張機能を作る上での基本的なところをご紹介しました。いろんなAPIを使って面白いアプリ作成するのきっかけになれば嬉しいです!

APIは多種多様な機能ありますので、ぜひ一度チェックしてみてください!

RELATED POSTS