Chrome extensionを作ってみる2

前回、リンクを右クリックしてコンテキストメニューから処理を行うところまで実装した。
今回は、ちょっと本筋からそれて多言語化を行い、リンク先のページタイトルを取得するところまで作ってみる。

多言語化を行う

manifest.jsonの編集

多言語化を行った場合、manifest.jsonにデフォルトロケールを設定しなければならない。下記の一行を追記する。

	"default_locale": "en",

今回は、デフォルトとして英語が表示されるように設定した。

翻訳ファイルの追加

翻訳ファイルはエクステンションのトップディレクトリ配下に_localesというディレクトリを作り、_localesの中に各言語のディレクトリを作成する。
ディレクトリ名はISO-639-1で指定されている言語コードとする。
今回は英語と、日本語に対応するので_localesの下にenとjaというディレクトリを作りそれぞれのディレクトリ配下にmessages.jsonファイルを作成した。

翻訳ファイルの編集

先程作成したmessages.jsonが翻訳ファイルとなり、内容は下記のようになる。

{
	"contextMenuTitle": {
		"message": "Save link to TD",
		"description": "context menu title"
	}
}

contextMenuTitleが辞書のキーとなりmessageの値が実際に表示される。
descriptionはそのメッセージの説明なのであまり気にしなくても良さそうだ。

翻訳された文言の取得

JavaScriptファイルでは

chrome.i18n.getMessage("contextMenuTitle")

のように、辞書キーを指定してgetMessageを呼び出すと各言語に翻訳された文字列が取得できる。

JsonとCSSファイルでは__MSG_contextMenuTitle__と文字列として指定しておくと翻訳された言語になるようだが、こちらは実際にはまだ試していない。

リンク先のタイトルを取得する

manifest.jsonの編集

Cross-Originの対処のため下記のようにpermissionを変更する。

	"permissions": ["contextMenus", "http://*/", "https://*/" ],

詳しくは、ここを参照。

background.jsの編集

	"onclick": function(info, tab)
	{
		var req = new XMLHttpRequest();

		req.onreadystatechange = function()
		{
			if(req.readyState === req.DONE && req.status === 200)
			{
				var parser = new DOMParser();
				var doc = parser.parseFromString(req.responseText, "text/html");
				var title = doc.title;
				console.log(title);
			}
		}

		req.open('GET', info.linkUrl);
		req.send();
	}

contextMenuLinkPropのonclickを上記のように変更し、リンクのURLへアクセスしHTMLを取得。
取得したHTMLをhtmldocumentへパースしてタイトルを取得する。

今回はここまで。