t-kashima/background.html

## background.html
<script>
var searchSong, skipSong;
var entries = null;
var content = {};
chrome.extension.onConnect.addListener(function(port) {
    var api = new XMLHttpRequest();

    port.onMessage.addListener(function(msg) {
        if (msg.status == "start") {
            content.title = msg.title;
        } else {
            console.log("loading");
            sourceGet(port);
        }
    });

    function sourceGet(port) {
        if (api.readyState == 4 && api.status == 200) {
            var response = eval('[' + api.responseText + ']')[0];
            entries = response.feed.entry;
            selectSong(entries);
        } else if (api.readyState == 4) {
            console.log("Error");
        } else {
            port.postMessage({status: "loading"});
        }
    }

    function selectSong(entries) {
        var entry = selectRandom(entries);
        port.postMessage({href: entry.link[0].href, status: "complete"});
        content.next_title = entry.title.$t;
    }

    function selectRandom(list) {
        return list[Math.floor(Math.random() * list.length)];
    }

    searchSong = function(artistName) {
        query = "http://gdata.youtube.com/feeds/api/videos?alt=json&vq=" + encodeURI(artistName);
        api.open("GET", query, true);
        api.onreadystatechange = sourceGet(port);
        api.send(null);
    }

    skipSong = function() {
        selectSong(entries);
    }

    if (entries != null) selectSong(entries);
});
</script>

## icon.png

      
    Raw
  

              icon.png
            
          
## manifest.json
{
    "name": "YouTube Auto Playlist",
    "version": "1",
    "description": "The first extension that I made.",
    "background_page": "background.html",
    "content_scripts": [
        {
            "matches": [
                "http://www.youtube.com/watch*"
            ],
            "js": ["script.js"],
            "run_at": "document_end"
        }
    ],
    "browser_action": {
        "default_icon": "icon.png",
        "popup": "popup.html"
    }
}


## popup.html
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            body {
              min-width: 400px;
            }
            h1 {
              font-size: 12px;
              margin: 0px;
              padding: 0px;
              font-weight: normal;
            }
        </style>
        <script>
            (function() {
                var BG = chrome.extension.getBackgroundPage();
                window.onload = function() {
                    var content = BG.content;
                    document.querySelector("#title").value = content.title;
                    if (content.next_title) {
                        document.querySelector("#next_title").innerHTML = content.next_title;
                    }
                    document.querySelector("#decideBtn").addEventListener("click", searchSong);
                    document.querySelector("#skipBtn").addEventListener("click", skipSong);
                };

                var searchSong = function() {
                    BG.searchSong(document.querySelector("#title").value);
                    close();
                };

                var skipSong = function() {
                    var content = BG.content;
                    if (content.next_title) {
                        BG.skipSong();
                        close();
                    }
                };

            })();
        </script>
    </head>
    <body>
        <h1>Artist name</h1><b>
        <p><input type="text" id="title">
        <input type="button" value="ok" id="decideBtn"></p>
        <p><span id="next_title"></span>
        <input type="button" value="skip" id="skipBtn"></p>
    </body>
</html>

## script.js
(function() {
     function jumpNextSong(url) {
         location.href = url;
     }

     function createHTML5Player(videoElem) {
         return {
			getPlayerState: function(){
				return videoElem.ended? 0 : 1;
			}
         }
     }


     var video = document.querySelector("#movie_player");
     if (!video) {
         var v = document.querySelector("video");
         video = createHTML5Player(v);
     }
     var title = document.querySelector('#eow-title').textContent;
     title.match(/^\s+(.+?)(\u300C|\s\/\s|\s-\s|　\uFF0F\s|\s\uFF0F　|\s"\s|@|\uFF0F|-)/);
     title = RegExp.$1;
     var port = chrome.extension.connect({name: "YouTubeAutoPlay"});
     port.postMessage({title: title, status: "start"});
     port.onMessage.addListener(
         function(msg) {
             if (msg.status == "loading") {
                 port.postMessage({status: "loading"});
             } else if (msg.status == "complete") {
                 if (!video) return;
                 var timer = setInterval(
                     function() {
                         var state = video.getPlayerState();
                         if (state != 0) return;
                         jumpNextSong(msg.href);
                         clearInterval(timer);
                     }, 1000);
             }
         });
})();
	<script>
	var searchSong, skipSong;
	var entries = null;
	var content = {};
	chrome.extension.onConnect.addListener(function(port) {
	var api = new XMLHttpRequest();

	port.onMessage.addListener(function(msg) {
	if (msg.status == "start") {
	content.title = msg.title;
	} else {
	console.log("loading");
	sourceGet(port);
	}
	});

	function sourceGet(port) {
	if (api.readyState == 4 && api.status == 200) {
	var response = eval('[' + api.responseText + ']')[0];
	entries = response.feed.entry;
	selectSong(entries);
	} else if (api.readyState == 4) {
	console.log("Error");
	} else {
	port.postMessage({status: "loading"});
	}
	}

	function selectSong(entries) {
	var entry = selectRandom(entries);
	port.postMessage({href: entry.link[0].href, status: "complete"});
	content.next_title = entry.title.$t;
	}

	function selectRandom(list) {
	return list[Math.floor(Math.random() * list.length)];
	}

	searchSong = function(artistName) {
	query = "http://gdata.youtube.com/feeds/api/videos?alt=json&vq=" + encodeURI(artistName);
	api.open("GET", query, true);
	api.onreadystatechange = sourceGet(port);
	api.send(null);
	}

	skipSong = function() {
	selectSong(entries);
	}

	if (entries != null) selectSong(entries);
	});
	</script>
	{
	"name": "YouTube Auto Playlist",
	"version": "1",
	"description": "The first extension that I made.",
	"background_page": "background.html",
	"content_scripts": [
	{
	"matches": [
	"http://www.youtube.com/watch*"
	],
	"js": ["script.js"],
	"run_at": "document_end"
	}
	],
	"browser_action": {
	"default_icon": "icon.png",
	"popup": "popup.html"
	}
	}
	(function() {
	function jumpNextSong(url) {
	location.href = url;
	}

	function createHTML5Player(videoElem) {
	return {
	getPlayerState: function(){
	return videoElem.ended? 0 : 1;
	}
	}
	}


	var video = document.querySelector("#movie_player");
	if (!video) {
	var v = document.querySelector("video");
	video = createHTML5Player(v);
	}
	var title = document.querySelector('#eow-title').textContent;
	title.match(/^\s+(.+?)(\u300C\|\s\/\s\|\s-\s\|　\uFF0F\s\|\s\uFF0F　\|\s"\s\|@\|\uFF0F\|-)/);
	title = RegExp.$1;
	var port = chrome.extension.connect({name: "YouTubeAutoPlay"});
	port.postMessage({title: title, status: "start"});
	port.onMessage.addListener(
	function(msg) {
	if (msg.status == "loading") {
	port.postMessage({status: "loading"});
	} else if (msg.status == "complete") {
	if (!video) return;
	var timer = setInterval(
	function() {
	var state = video.getPlayerState();
	if (state != 0) return;
	jumpNextSong(msg.href);
	clearInterval(timer);
	}, 1000);
	}
	});
	})();