inthisfucking.world

💩🌎

自分のChrome Extensionを作ろう

この記事は下書きです
続きを希望される場合は、コメントを残してください。著者のやる気が出ます。

ウェブブラウザでサイトを見ていて、こういう機能があれば良いのにな、と思ったことはないでしょうか。私はあります。

YouTubeで動画を見ている時、特定の部分を何度も見返すことがあり、見返す部分を覚えておければなと思っていました。ギターの練習をする際に、これを経験したことがある方は多いのではないでしょうか。

もしChromeを使っている場合は、サイトが提供していない機能をChrome Extensionを使って実現することができます。しかも、比較的簡単です。ある程度JavaScriptとHTMLを知っていれば問題ありません。

ここでは、自分でChrome Extensionを作成することで、サイトが提供していない、ただ自分が欲しい機能を実現する方法を記載します。

manifest.json

Chrome Extensionを作成するにあたって、最低限必要なものがmanifest.jsonです。このファイルに、自分が作成するChrome Extensionに関する情報を記載します。

{
  "name": "that moment",
  "version": "0.1.0",
  "description": "A Chrome extension that remembers specific moments of YouTube videos you keep coming back to.",
  "manifest_version": 2,
  "permissions": [
    "activeTab",
    "declarativeContent",
    "storage"
  ]
}

名前や概要、バージョンは見たそのままのものです。manifest_versionは、manifest.jsonそのもののバージョンで、現時点では2が最新の値です。

Chrome Extensionは、そのChrome Extensionをインストールして利用しているChromeに対して色々なことができます。どのURLにアクセスしているのかを取得したり、表示されているサイトに追加でボタンを表示させたりできます。インストールするユーザは、それが何をするChrome Extensionなのか分からないと怖いので、ユーザから必要とする許可をmanifest.jsonに明記する必要があります。

それが、permissionsの部分です。Chrome Extensionで使用できるAPIは、どの許可を必要とするかが決まっています。Chrome Extensionは、permissionsに記載のない許可が必要なAPIは使用できません。

Chrome Exntensionでできることの種類

Chrome Extensionは、私が思っていたよりも色々なことができます。私が使えそうだと思ったものを羅列します。

Browser Actions及びPage Actions

Background Scripts

その他にもできることの全てを含んだ一覧は、Developer Guideを参照ください。