使用していたChromeのエクステンションが公開停止されてしまい、同じような拡張機能も見つからなかったので作ってみることにする。
Chromeにextensionとして認識してもらう
Chromeにextensionとして認識してもらうには、最低限manifest.jsonというファイルさえあればいい。
適当なディレクトリを作成して、下記のファイルを配置する。
{
"name": "エクステンション名",
"description": "エクステンションの概要"
"version": "エクステンションのバージョン"
"manifest_version": 2
}
Chromeでchrome://extensions/を開きデベロッパーモードをOnにしたのちに、「パッケージ化されていない拡張機能を読み込む」を選択する、フォルダーの参照が開くので先程作ったディレクトリを指定して「OK」を押すとChromeの拡張機能として読み込まれる。
公式の詳しい情報はManifest File Formatを参照。
やりたいことの整理
とりあえず、拡張機能を作っていけそうな気がしたので何を作るかを整理してみる。
- リンクを右クリックから、保存する
- Chrome本体の右上のextensionボタンから保存したリンクを観覧できる
- ↑で開いた一覧から、リンクをクリックするとそのページを表示し、一覧からリンクが消える
ここまで書いて、冒頭の公開停止されてしまったエクステンションが実は公開停止されていないことに気がついたが、不具合があってたまに再インストールが必要となっていたので最後まで作っていくことにする。
コンテキストメニューに項目を表示してみる
manifest.jsonの編集
コンテキストメニューに項目を表示するためには、バックグラウンドスクリプトでchrome.contextMenus.createをすると表示されるようになる。
"minimum_chrome_version": "27",
"permissions": ["contextMenus"],
"background": {
"scripts": ["/js/background.js"]
}
まずは上記をmanifest.jsonに追記する。
minimum_chrome_versionはサポートするバージョンを定義する。chrome.contextMenus.createがChromeバージョン27から使えるようになったので、最低バージョンを27とする。
permissionsは権限の設定を行う。
コンテキストメニューに項目を追加するためにはcontextMenusが必要となる。
backgroundは実際に動作するスクリプトの宣言を行う。
今回はmanifest.jsonがあるディレクトリにjsというディレクトリを作成して、そこにJavaScriptファイルを置いていく。
background.jsの編集
var contextMenuLinkProp = {
"title": "タイトル",
"contexts": ["link"],
"onclick": function(info, tab)
{
console.log("link selected " + info.linkUrl);
}
}
chrome.contextMenus.create(contextMenuLinkProp, function()
{
if(chrome.extension.lastError)
{
console.log("error creating context menu for link: " + chrome.extension.lastError.message);
}
});
chrome.contextMenus.createを呼ぶことで、コンテキストメニューへ項目を追加できる。
第一引数でメニュー項目の設定ができる。
titleはメニューに表示する文字列の設定。
contextsはどこがクリックされたときに、コンテキストメニューに表示されるかの設定。今回はリンクを右クリックしたときに処理を行いたいのでlinkを指定している。
onclickでクリックされたときの処理を設定できる。
今回はとりあえず、クリックされたリンクのURLをコンソールログに表示する。
動かしてみる
一番上の画像の「詳細」「削除」ボタンの右側にある丸矢印をクリックすると、拡張機能が更新される。
「ビューを検証」のバックグラウンドページをクリックするとDevToolsが起動して、ログの確認などができる。
長くなったので今回はここまでで。