Chrome拡張のサンプル(YouTubeで再生位置をブックマーク)

YouTubeで動画再生中に、この拡張のアイコンを押すと再生位置を含んだURLをブックマークに追加するサンプル。ポイントはexecuteScriptでinject.jsを実行させて、ワンクッション置いている部分。こうしないと動画の再生位置(currentTimeプロパティ)が取得できない。これで、作成したブックマークを開くと動画の続きから視聴できる。

manifest.json{
  "manifest_version": 2,
  "name": "YouTube Bookmark",
  "version": "0.0.1",
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_title": "続きから見るURLをブックマーク"
  },
  "permissions": [
    "tabs",
    "bookmarks",
    "https://www.youtube.com/*"
  ]
}

background.jschrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(
		null, 
		{code: "var options = {url:'" + tab.url  + "', title:'" + tab.title + "'};"}, 
		function() {
    		chrome.tabs.executeScript(null, {file: 'inject.js'}, function(result) {
					chrome.bookmarks.create({'title': tab.title, 'url': result[0]}, function() {
							alert('その他のブックマークに保存しました');
					});
			});
    	}
	);
});

inject.js// こっちではtitleは使ってないけど引数を渡すサンプルとして
//alert(options.title);

var video = document.querySelector('#movie_player.html5-video-player video');
var seconds = Math.floor(video.currentTime);
var hour = Math.floor((seconds / 60) / 60);
var min = Math.floor((seconds / 60) % 60);
var sec = Math.floor(seconds % 60);

var parm = '';
parm += (hour > 0) ? (hour + 'h'):'';
parm += (min > 0) ? (min + 'm'):'';
parm += (sec > 0) ? (sec + 's'):'';

var element = document.createElement('a');
element.href = options.url;
var baseUrl = element.protocol + '//' + element.hostname + element.pathname + element.search;
element.remove();
var url = (parm != '') ? (baseUrl + '#t=' + parm):baseUrl;

// Callback result
url