Better CodePen browser extension

manifest.json

{
	"name": "Better-CodePen",
	"permissions" : ["http://*.codepen.io/*", "https://*.codepen.io/*"],
	"version": "1.0",
	"content_scripts": [{
		"matches": ["http://*.codepen.io/*", "https://*.codepen.io/*"],
		"js": ["script.js"],
		"all_frames": true,
		"run_at": "document_start"
	}],
	"manifest_version": 2,
	"author": "Sven Neumann <[email protected]>"
}

script.js

/*

ToDo:
	1. Workspace save/restore
	2. Global code folding

*/

(function() {
	//console.info('Loading better-CodePen');
	var observerTimeout = 5000;
	var buttonSwapDone = false;
	var styleDone = false;

	var yqlBaseUrl = 'https://query.yahooapis.com/v1/public/yql?format=json&q=';
	// Collections only
	var collectionsQuery = 'select guid, title from xml where (url = "http://codepen.io/collection/nMWEOK/feed") AND itemPath = "//item"';
	// All pens, pages 1-10
	var allPensQuery = 'select guid,title from xml where ('+
		[1,2,3,4,5,6,7,8,9,10]
		.map(function(page) { return 'url = "http://codepen.io/killroy/public/feed?page='+page+'"'; })
		.join(' OR ')+
		') AND itemPath = "//item"';
	var queryUrl = yqlBaseUrl+encodeURIComponent(allPensQuery);


	var penFeed;
	function fetchRssFeed() {
		if(penFeed) return penFeed;
		penFeed = fetch(queryUrl, {mode: 'cors'})
		.then(function(res) {
			return res.json();
		})
		.then(function(json) {
			var guidToTitle = {};
			json.query.results.item.forEach(function(item) {
				guidToTitle[item.guid.replace(/^https?:\/\//, '\/\/')] = item.title;
			});
			return guidToTitle;
		});
		return penFeed;
	}
	function updateJsExternalResourceTitle(inputElem) {
		fetchRssFeed().then(function(guidToTitle) {
			var title = guidToTitle[inputElem.value.replace(/^https?:\/\//, '\/\/')];
			if(title) inputElem.title = title;
		});
	}

	var startupUpdates = [
		function(mutation) { // Avoid white flashing
			if(mutation.target.tagName === 'HEAD') {
				var style = document.createElement('style');
				style.id = 'test';
				style.textContent = 'iframe[name=CodePen] { background: #1D1F20; }';
				mutation.target.insertBefore(style, mutation.target.firstChild);
				return true;
			}
		}, 
		function(mutation) { // Move fork button to safer location
			if(mutation.target.id === 'fork' || mutation.target.id === 'edit-settings') {
				var btnFork = document.getElementById('fork');
				var btnSettings = document.getElementById('edit-settings');
				if(btnFork !== null && btnSettings !== null) {
					btnFork.parentNode.insertBefore(btnSettings, btnFork);
					return true;
				}
			}
		},
		function(mutation) { // Add tooltips to external JS links
			if(mutation.target.id === 'js-external-resources') {
				var observer = new MutationObserver(function(mutations) {
					mutations.forEach(function(mutation) {
						var addedNodes = Array.prototype.slice.call(mutation.addedNodes, 0);
						addedNodes.forEach(function(node) {
							if(node.tagName === 'INPUT' && node.classList.contains('tt-input')) {
								updateJsExternalResourceTitle(node);
								node.addEventListener('change', function(e) { updateJsExternalResourceTitle(node); });
							}
						});
					});
				});
				observer.observe(mutation.target, {
					childList: true,
					subtree: true,
					characterData: true
				});
				return true;
			}
		},
	];

	var startupObserver = new MutationObserver(function(mutations) {
		var i = startupUpdates.length; while(i--) {
			var update = startupUpdates[i];
			var ii = mutations.length; while(ii--) {
				if(update(mutations[ii])) {
					startupUpdates.splice(i, 1);
					break;
				}
			}
		}
		if(startupUpdates.length === 0) {
			startupObserver.disconnect();
			clearTimeout(startupObserverTimeout);
		}
	});
	startupObserver.observe(document, {childList: true, subtree: true});
	var startupObserverTimeout = setTimeout(function() { startupObserver.disconnect(); }, observerTimeout);

})();