List Scripts and Styles

list_scripts_and_styles.user.js

// ==UserScript==
// @name           List Scripts and Styles
// @namespace      https://github.com/tily
// @description    list scripts and styles of page at top-right of window
// @include        http://*
// @include        https://*
// ==/UserScript==
// TODO: use window.jQuery if exists
(function() {
	function addJQuery(callback) {
		var script = document.createElement("script")
		script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js")
		script.setAttribute("class", "userscript")
		script.addEventListener('load', function() {
			var script = document.createElement("script")
			script.setAttribute("class", "userscript")
			script.textContent = "(" + callback.toString() + ")($)"
			document.body.appendChild(script)
		}, false)
		document.body.appendChild(script)
	}
	function main($) {
		var ul = $("<ul id='unmeta'>").css({
			textAlign      : "left",
			listStyleType  : "none",
			padding        : "10px",
			fontSize       : "10pt",
			backgroundColor: "black",
			opacity        : "0.7",
			zIndex         : "10000",
			position       : "absolute",
			top            : "0px",
			right          : "0px"
		}).click(function(e) {
			ul.css("display", "none")
		})
		$("script,link[rel='stylesheet'],style").each(function() {
			var that = this
			var url = $(this).attr("src") || $(this).attr("href")
			var ext = $(this).attr("tagName") == "SCRIPT" ? "js" : "css"
			var lnk = $("<a>").css("color", "white")
			if($(this).attr("class") == "userscript") return
			if(url) {
				var txt = url.match(/([^\/]+\.)(js|css)(\?.+)?$/)
				txt = txt ? txt[1] + txt[2] : url.substr(0, 10) + "[...]." + ext
				lnk.attr({href: url, target: "_blank"}).text(txt)
				lnk.click(function(e) { e.stopPropagation() })
			} else {
				lnk.attr("href", "javascript:void(0)").text("[EMBED]." + ext)
				lnk.click(function() { alert($(that).html()); return false })
			}
			ul.append($("<li>").append(lnk))
		})
		$("body").append(ul)
	}
	addJQuery(main)
})()