本記事は ディップ with 全部俺 AdventCalendar 10日目の記事です。
少し前から気になっていたChrome Extensionについて少し調べたのでまとめておきたいと思います。
上記を参考にしながらブラウザにボタンを追加して、HelloExtensionをポップアップさせるまでをやってみました。
サンプルは下記をご参照ください。
用意するのは2つのファイルです。
1つはManifest Fileです。 これはこの拡張機能は「こういうものですよ」という情報を書き込むためのjsonフォーマットのファイルです。
{ "name": "Hello Extension", "description": "Hello Extension", "version": "0.0.1", "manifest_version": 2, "browser_action": { "default_popup": "popup.html" } }
もう一つが今回やってみたかった、拡張機能のボタンをクリックするとポップアップを作るためのpopup用のhtmlファイルです。
今回は入門ですので、 Hello Extension と表示されるだけのhtmlを用意します。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> Hello Extension </body> </html>
両方のファイルが出来たらChromeの拡張機能画面からデベロッパーモードをONにして同画面にフォルダごとドラックアンドドロップします。
すると、アドレスバーの右側にExtensionボタンが表示されるのでクリックしてみましょう。
クリックすると Hello Extension と表示されます。
今回は入門ということでこの辺までしかやりませんでしたが、意外と簡単に作成することができそうな事がわかりました。
頭の中にあるものがある程度形になってきたら本格的に利用することにしてみたいと思います。
