始めに
私が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は多種多様な機能ありますので、ぜひ一度チェックしてみてください！