-
Notifications
You must be signed in to change notification settings - Fork 370
/
snippets.json
84 lines (84 loc) · 36 KB
/
snippets.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
{
"snippets": [
{
"name": "allcolors",
"content": "// allcolors.js\n// https://github.com/bgrins/devtools-snippets\n// Print out CSS colors used in elements on the page.\n\n(function () {\n // Should include colors from elements that have a border color but have a zero width?\n var includeBorderColorsWithZeroWidth = false;\n\n var allColors = {};\n var props = [\"background-color\", \"color\", \"border-top-color\", \"border-right-color\", \"border-bottom-color\", \"border-left-color\"];\n var skipColors = {\n \"rgb(0, 0, 0)\": 1,\n \"rgba(0, 0, 0, 0)\": 1,\n \"rgb(255, 255, 255)\": 1\n };\n\n [].forEach.call(document.querySelectorAll(\"*\"), function (node) {\n var nodeColors = {};\n props.forEach(function (prop) {\n var color = window.getComputedStyle(node, null).getPropertyValue(prop),\n thisIsABorderProperty = (prop.indexOf(\"border\") != -1),\n notBorderZero = thisIsABorderProperty ? window.getComputedStyle(node, null).getPropertyValue(prop.replace(\"color\", \"width\")) !== \"0px\" : true,\n colorConditionsMet;\n\n if (includeBorderColorsWithZeroWidth) {\n colorConditionsMet = color && !skipColors[color];\n } else {\n colorConditionsMet = color && !skipColors[color] && notBorderZero;\n }\n\n if (colorConditionsMet) {\n if (!allColors[color]) {\n allColors[color] = {\n count: 0,\n nodes: []\n };\n }\n\n if (!nodeColors[color]) {\n allColors[color].count++;\n allColors[color].nodes.push(node);\n }\n\n nodeColors[color] = true;\n }\n });\n });\n\n function rgbTextToRgbArray(rgbText) {\n return rgbText.replace(/\\s/g, \"\").match(/\\d+,\\d+,\\d+/)[0].split(\",\").map(function(num) {\n return parseInt(num, 10);\n });\n }\n\n function componentToHex(c) {\n var hex = c.toString(16);\n return hex.length == 1 ? \"0\" + hex : hex;\n }\n\n function rgbToHex(rgbArray) {\n var r = rgbArray[0],\n g = rgbArray[1],\n b = rgbArray[2];\n return \"#\" + componentToHex(r) + componentToHex(g) + componentToHex(b);\n }\n\n var allColorsSorted = [];\n for (var i in allColors) {\n var rgbArray = rgbTextToRgbArray(i);\n var hexValue = rgbToHex(rgbArray);\n\n allColorsSorted.push({\n key: i,\n value: allColors[i],\n hexValue: hexValue\n });\n }\n\n allColorsSorted = allColorsSorted.sort(function (a, b) {\n return b.value.count - a.value.count;\n });\n\n var nameStyle = \"font-weight:normal;\";\n var countStyle = \"font-weight:bold;\";\n function colorStyle(color) {\n return \"background:\" + color + \";color:\" + color + \";border:1px solid #333;\";\n };\n\n console.group(\"Total colors used in elements on the page: \" + window.location.href + \" are \" + allColorsSorted.length);\n allColorsSorted.forEach(function (c) {\n console.groupCollapsed(\"%c %c \" + c.key + \" \" + c.hexValue + \" %c(\" + c.value.count + \" times)\",\n colorStyle(c.key), nameStyle, countStyle);\n c.value.nodes.forEach(function (node) {\n console.log(node);\n });\n console.groupEnd();\n });\n console.groupEnd(\"All colors used in elements on the page\");\n\n})();\n"
},
{
"name": "cachebuster",
"content": "//Cache Buster\n(function (){\n var rep = /.*\\?.*/,\n links = document.getElementsByTagName('link'),\n scripts = document.getElementsByTagName('script'),\n process_scripts = false;\n for (var i=0;i<links.length;i++){\n var link = links[i],\n href = link.href;\n if(rep.test(href)){\n link.href = href+'&'+Date.now();\n }\n else{\n link.href = href+'?'+Date.now();\n }\n\n }\n if(process_scripts){\n for (var i=0;i<scripts.length;i++){\n var script = scripts[i],\n src = script.src;\n if(rep.test(src)){\n script.src = src+'&'+Date.now();\n }\n else{\n script.src = src+'?'+Date.now();\n }\n\n }\n }\n})();"
},
{
"name": "console-save",
"content": "(function(console){\n\n console.save = function(data, filename){\n\n if(!data) {\n console.error('Console.save: No data')\n return;\n }\n\n if(!filename) filename = 'console.json'\n\n if(typeof data === \"object\"){\n data = JSON.stringify(data, undefined, 4)\n }\n\n var blob = new Blob([data], {type: 'text/json'}),\n e = document.createEvent('MouseEvents'),\n a = document.createElement('a')\n\n a.download = filename\n a.href = window.URL.createObjectURL(blob)\n a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')\n e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)\n a.dispatchEvent(e)\n }\n})(console)\n"
},
{
"name": "cssprettifier",
"content": "// cssprettifier.js\n// https://github.com/bgrins/devtools-snippets\n// Unminify and prettify a CSS file.\n\n/*\n * cssprettifier-bookmarklet\n * Copyright (c) 2013 Addy Osmani, Sindre Sorhus\n * CSSBeautify (c) Sencha, Ariya Hidayat\n * Prism (c) Lea Verou\n * Licensed under the MIT license.\n */\n /*globals document:true*/\n(function () {\n 'use strict';\n\n if (document.body.childNodes.length !== 1) {\n console.log(\"CSS Prettify: This page doesn't appear to be a stylesheet. Make sure you run this on a css file\");\n return;\n }\n\n // cssbeautify\n (function(){\"use strict\";function a(a,b){function s(a){return\" \"===a||\"\\n\"===a||\" \"===a||\"\\r\"===a||\"\\f\"===a}function t(a){return\"'\"===a||'\"'===a}function u(a){return h>=\"a\"&&\"z\">=h||h>=\"A\"&&\"Z\">=h||h>=\"0\"&&\"9\">=h||\"-_*.:#\".indexOf(a)>=0}function v(){var a;for(a=m;a>0;a-=1)g+=c.indent}function w(){g=r(g),p?g+=\" {\":(g+=\"\\n\",v(),g+=\"{\"),\"\\n\"!==i&&(g+=\"\\n\"),m+=1}function x(){var a;m-=1,g=r(g),q&&(a=g.charAt(g.length-1),\";\"!==a&&\"{\"!==a&&(g+=\";\")),g+=\"\\n\",v(),g+=\"}\",f.push(g),g=\"\"}var c,f,h,i,j,k,l,m,n,o,r,d=0,e=a.length,g=\"\",p=!0,q=!1;for(c=arguments.length>1?b:{},c.indent===void 0&&(c.indent=\" \"),\"string\"==typeof c.openbrace&&(p=\"end-of-line\"===c.openbrace),\"boolean\"==typeof c.autosemicolon&&(q=c.autosemicolon),r=String.prototype.trimRight?function(a){return a.trimRight()}:function(a){return a.replace(/\\s+$/,\"\")},l={Start:0,AtRule:1,Block:2,Selector:3,Ruleset:4,Property:5,Separator:6,Expression:7,URL:8},m=0,k=l.Start,o=!1,f=[],a=a.replace(/\\r\\n/g,\"\\n\");e>d;)if(h=a.charAt(d),i=a.charAt(d+1),d+=1,t(n))g+=h,h===n&&(n=null),\"\\\\\"===h&&i===n&&(g+=i,d+=1);else if(t(h))g+=h,n=h;else if(o)g+=h,\"*\"===h&&\"/\"===i&&(o=!1,g+=i,d+=1);else if(\"/\"!==h||\"*\"!==i){if(k===l.Start){if(0===f.length&&s(h)&&0===g.length)continue;if(\" \">=h||h.charCodeAt(0)>=128){k=l.Start,g+=h;continue}if(u(h)||\"[\"===h||\"@\"===h){if(j=r(g),0===j.length)f.length>0&&(g=\"\\n\\n\");else if(\"}\"===j.charAt(j.length-1)||\";\"===j.charAt(j.length-1))g=j+\"\\n\\n\";else for(;;){if(i=g.charAt(g.length-1),\" \"!==i&&9!==i.charCodeAt(0))break;g=g.substr(0,g.length-1)}g+=h,k=\"@\"===h?l.AtRule:l.Selector;continue}}if(k!==l.AtRule)if(k!==l.Block)if(k!==l.Selector)if(k!==l.Ruleset)if(k!==l.Property)if(k!==l.Separator)if(k!==l.Expression)k===l.URL&&\")\"===h&&g.charAt(\"\\\\\"!==g.length-1)?(g+=h,k=l.Expression):g+=h;else{if(\"}\"===h){x(),k=l.Start,m>0&&(k=l.Block);continue}if(\";\"===h){g=r(g),g+=\";\\n\",k=l.Ruleset;continue}if(g+=h,\"(\"===h&&\"l\"===g.charAt(g.length-2)&&\"r\"===g.charAt(g.length-3)&&\"u\"===g.charAt(g.length-4)){k=l.URL;continue}}else{if(!s(h)){g+=h,k=l.Expression;continue}t(i)&&(k=l.Expression)}else{if(\":\"===h){g=r(g),g+=\": \",k=l.Expression,s(i)&&(k=l.Separator);continue}if(\"}\"===h){x(),k=l.Start,m>0&&(k=l.Block);continue}g+=h}else{if(\"}\"===h){x(),k=l.Start,m>0&&(k=l.Block);continue}if(\"\\n\"===h){g=r(g),g+=\"\\n\";continue}if(!s(h)){g=r(g),g+=\"\\n\",v(),g+=h,k=l.Property;continue}g+=h}else{if(\"{\"===h){w(),k=l.Ruleset;continue}if(\"}\"===h){x(),k=l.Start;continue}g+=h}else{if(u(h)){if(j=r(g),0===j.length)f.length>0&&(g=\"\\n\\n\");else if(\"}\"===j.charAt(j.length-1))g=j+\"\\n\\n\";else for(;;){if(i=g.charAt(g.length-1),\" \"!==i&&9!==i.charCodeAt(0))break;g=g.substr(0,g.length-1)}v(),g+=h,k=l.Selector;continue}if(\"}\"===h){x(),k=l.Start;continue}g+=h}else{if(\";\"===h){g+=h,k=l.Start;continue}if(\"{\"===h){j=r(g),w(),k=\"@font-face\"===j?l.Ruleset:l.Block;continue}g+=h}}else o=!0,g+=h,g+=i,d+=1;return g=f.join(\"\")+g}\"undefined\"!=typeof exports?module.exports=exports=a:\"object\"==typeof window&&(window.cssbeautify=a)})();\n // prism\n (function(){var e=/\\blang(?:uage)?-(?!\\*)(\\w+)\\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\\[object (\\w+)\\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case\"Object\":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case\"Array\":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)===\"Object\"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*=\"language-\"], [class*=\"language-\"] code, code[class*=\"lang-\"], [class*=\"lang-\"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,\"\"])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,\"\").replace(/\\s+/g,\" \")+\" language-\"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,\"\").replace(/\\s+/g,\" \")+\" language-\"+o);var f=r.textContent;if(!f)return;f=f.replace(/&/g,\"&\").replace(/</g,\"<\").replace(/>/g,\">\").replace(/\\u00a0/g,\" \");var l={element:r,language:o,grammar:u,code:f};t.hooks.run(\"before-highlight\",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data));l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run(\"after-highlight\",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run(\"after-highlight\",l)}},highlight:function(e,r){return n.stringify(t.tokenize(e,r))},tokenize:function(e,n){var r=t.Token,i=[e],s=n.rest;if(s){for(var o in s)n[o]=s[o];delete n.rest}e:for(var o in n){if(!n.hasOwnProperty(o)||!n[o])continue;var u=n[o],a=u.inside,f=!!u.lookbehind||0;u=u.pattern||u;for(var l=0;l<i.length;l++){var c=i[l];if(i.length>e.length)break e;if(c instanceof r)continue;u.lastIndex=0;var h=u.exec(c);if(h){f&&(f=h[1].length);var p=h.index-1+f,h=h[0].slice(f),d=h.length,v=p+d,m=c.slice(0,p+1),g=c.slice(v+1),y=[l,1];m&&y.push(m);var b=new r(o,a?t.tokenize(h,a):h);y.push(b);g&&y.push(g);Array.prototype.splice.apply(i,y)}}}return i},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e){if(typeof e==\"string\")return e;if(Object.prototype.toString.call(e)==\"[object Array]\")return e.map(n.stringify).join(\"\");var r={type:e.type,content:n.stringify(e.content),tag:\"span\",classes:[\"token\",e.type],attributes:{}};r.type==\"comment\"&&(r.attributes.spellcheck=\"true\");t.hooks.run(\"wrap\",r);var i=\"\";for(var s in r.attributes)i+=s+'=\"'+(r.attributes[s]||\"\")+'\"';return\"<\"+r.tag+' class=\"'+r.classes.join(\" \")+'\" '+i+\">\"+r.content+\"</\"+r.tag+\">\"};if(!self.document){self.addEventListener(\"message\",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return}var r=document.getElementsByTagName(\"script\");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute(\"data-manual\")&&document.addEventListener(\"DOMContentLoaded\",t.highlightAll)}})();;\n Prism.languages.css={comment:/\\/\\*[\\w\\W]*?\\*\\//g,atrule:/@[\\w-]+?(\\s+[^;{]+)?(?=\\s*{|\\s*;)/gi,url:/url\\(([\"']?).*?\\1\\)/gi,selector:/[^\\{\\}\\s][^\\{\\}]*(?=\\s*\\{)/g,property:/(\\b|\\B)[a-z-]+(?=\\s*:)/ig,string:/(\"|')(\\\\?.)*?\\1/g,important:/\\B!important\\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\\{\\};:]/g};Prism.languages.markup&&Prism.languages.insertBefore(\"markup\",\"tag\",{style:{pattern:/(<|<)style[\\w\\W]*?(>|>)[\\w\\W]*?(<|<)\\/style(>|>)/ig,inside:{tag:{pattern:/(<|<)style[\\w\\W]*?(>|>)|(<|<)\\/style(>|>)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});\n\n var prismStyle = document.createElement('style');\n var beautified = cssbeautify(document.body.textContent, {autosemicolon: true});\n var highlighted = Prism.highlight(beautified, Prism.languages.css);\n\n prismStyle.textContent = 'code[class*=\"language-\"],pre[class*=\"language-\"]{color:black;text-shadow:0 1px white;font-family:Consolas,Monaco,\\'Andale Mono\\',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}@media print{code[class*=\"language-\"],pre[class*=\"language-\"]{text-shadow:none;}}pre[class*=\"language-\"]{padding:1em;margin:.5em 0;overflow:auto;}:not(pre) > code[class*=\"language-\"],pre[class*=\"language-\"]{background:#f5f2f0;}:not(pre) > code[class*=\"language-\"]{padding:.1em;border-radius:.3em;}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray;}.token.punctuation{color:#999;}.namespace{opacity:.7;}.token.property,.token.tag,.token.boolean,.token.number{color:#905;}.token.selector,.token.attr-name,.token.string{color:#690;}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#a67f59;background:hsla(0,0%,100%,.5);}.token.atrule,.token.attr-value,.token.keyword{color:#07a;}.token.regex,.token.important{color:#e90;}.token.important{font-weight:bold;}.token.entity{cursor:help;}';\n\n document.head.innerHTML = '';\n document.head.appendChild(prismStyle);\n document.body.innerHTML = '<code><pre>' + highlighted + '</pre></code>';\n\n})();\n"
},
{
"name": "cssreload",
"content": "// cssreload.js\n// https://github.com/bgrins/devtools-snippets\n// Removes then reloads all the CSS files in the current page\n\n(function () {\n\n function insertAfter(newElement, targetElement) {\n var parent = targetElement.parentNode;\n if (parent.lastChild == targetElement) {\n parent.appendChild(newElement);\n } else {\n parent.insertBefore(newElement, targetElement.nextSibling);\n }\n }\n\n function reloadStyleSheet(stylesheet) {\n var element = stylesheet.ownerNode;\n var clone = element.cloneNode(false);\n clone.href = addRandomToUrl(clone.href);\n clone.addEventListener(\"load\", function() {\n if (element.parentNode) {\n element.parentNode.removeChild(element);\n }\n });\n insertAfter(clone, element);\n }\n\n function addRandomToUrl(input) {\n // prevent CSS caching\n var hasRnd = /([?&])_=[^&]*/,\n hasQueryString = /\\?/,\n hasHash = /(.+)#(.+)/,\n hash = null,\n rnd = Math.random();\n\n var hashMatches = input.match(hasHash);\n if (hashMatches) {\n input = hashMatches[1];\n hash = hashMatches[2];\n }\n url = hasRnd.test(input) ?\n input.replace(hasRnd, \"$1_=\" + rnd) :\n input + (hasQueryString.test(input) ? \"&\" : \"?\") + \"_=\" + rnd;\n if (hash) url += '#' + hash;\n return url;\n }\n\n [].forEach.call(document.styleSheets, function(styleSheet) {\n if (!styleSheet.href) return;\n console.log('reload ' + styleSheet.href);\n reloadStyleSheet(styleSheet);\n });\n\n})();\n"
},
{
"name": "dataurl",
"content": "// dataurl.js\n// https://github.com/bgrins/devtools-snippets\n// Print out data URLs for all images / canvases on the page.\n\n(function() {\n\n console.group(\"Data URLs\");\n\n [].forEach.call(document.querySelectorAll(\"img\"), function(i) {\n var c = document.createElement(\"canvas\");\n var ctx = c.getContext(\"2d\");\n c.width = i.width;\n c.height = i.height;\n\n try {\n ctx.drawImage(i, 0, 0);\n console.log(i, c.toDataURL());\n }\n catch(e) {\n console.log(i, \"No Permission - try opening this image in a new tab and running the snippet again?\", i.src);\n }\n });\n\n [].forEach.call(document.querySelectorAll(\"canvas\"), function(c) {\n try {\n console.log(c, c.toDataURL());\n }\n catch(e) {\n console.log(c, \"No Permission\");\n }\n });\n\n console.groupEnd(\"Data URLs\");\n\n})();\n"
},
{
"name": "formcontrols",
"content": "// formcontrols.js\n// https://github.com/bgrins/devtools-snippets\n// Print out forms and their controls\n\n(function() {\n\n var forms = document.querySelectorAll(\"form\");\n\n for (var i = 0, len = forms.length; i < len; i++) {\n var tab = [ ];\n\n console.group(\"HTMLForm \\\"\" + forms[i].name + \"\\\": \" + forms[i].action);\n console.log(\"Element:\", forms[i], \"\\nName: \"+forms[i].name+\"\\nMethod: \"+forms[i].method.toUpperCase()+\"\\nAction: \"+forms[i].action || \"null\");\n\n [\"input\", \"textarea\", \"select\"].forEach(function (control) {\n [].forEach.call(forms[i].querySelectorAll(control), function (node) {\n tab.push({\n \"Element\": node,\n \"Type\": node.type,\n \"Name\": node.name,\n \"Value\": node.value,\n \"Pretty Value\": (isNaN(node.value) || node.value === \"\" ? node.value : parseFloat(node.value))\n });\n });\n });\n\n console.table(tab);\n console.groupEnd();\n }\n})();\n"
},
{
"name": "hashlink",
"content": "// hashlink.js\n// https://github.com/bgrins/devtools-snippets\n// Click on an element to print out the closest hash link.\n\n(function() {\n\n function logHashlink(e) {\n\n document.removeEventListener('mousedown', logHashlink, true);\n\n var node = e.target;\n var id = null;\n while (node != null) {\n\n if (node.tagName === \"A\" && node.name) {\n id = node.name;\n break;\n }\n\n if (node.id) {\n id = node.id;\n break;\n }\n\n node = node.parentNode;\n }\n\n e.preventDefault();\n e.stopPropagation();\n\n var URL = window.location.origin + window.location.pathname + window.location.search;\n\n console.group(\"Hashlink\");\n console.log(\"Clicked on \", e.target);\n if (id === null) {\n console.log(\"No ID Found - closest anchor: \" + URL);\n }\n else {\n console.log(\"Closest linkable element: \", node);\n console.log(URL + \"#\" + id);\n }\n console.groupEnd(\"Hashlink\");\n }\n\n function stopClickEvent(e) {\n e.preventDefault();\n e.stopPropagation();\n\n document.removeEventListener('click', stopClickEvent, true);\n }\n\n document.addEventListener('mousedown', logHashlink, true);\n document.addEventListener('click', stopClickEvent, true);\n\n return \"hashlink: Click on an element to log it's closest hash link\";\n\n})();\n"
},
{
"name": "html_i18n_content",
"content": "// html_i18n_content.js\n// https://github.com/anaran/devtools-snippets\n// Generate downloadable chrome.i18n messages file for location.href.\n// See http://developer.chrome.com/extensions/i18n.html\n// Messages are based on innerText or value attribute, keyed by class attribute.\n// $Placeholders$ are added to messages.json as well.\n// Generate downloadable HTML file with corresponding i18n-content attributes.\n// Generate downloadable script to initialize localized messages on load.\ntry {\n console.log(location.href);\n var hsh = {};\n var replacer = [];\n replacer.push('message', 'description', 'placeholders', 'content', 'example');\n var addKeyValuePlaceHolders = function(messages, key, value) {\n messages[key] = {\n 'message': value,\n 'description': value\n };\n var placeHolders = value.match(/\\$([^$]+)\\$/g);\n if (placeHolders) {\n messages[key]['placeholders'] = {};\n for (j = 0, jlen = placeHolders.length; j < jlen; j++) {\n var placeHolderName = placeHolders[j].replace(/\\$/g, '').toLowerCase();\n messages[key]['placeholders'][placeHolderName] = {\n 'content': '$' + (j + 1),\n 'example': value\n };\n if (!replacer.some(function(value) {\n return value === placeHolderName;\n })) {\n replacer.push(placeHolderName);\n }\n }\n }\n return messages;\n };\n var i18nForValueAttribute = function(select, messages) {\n var nds = document.querySelectorAll(select);\n for (i = 0, len = nds.length; i < len; i++) {\n var value = nds[i].getAttribute('value');\n if (value) {\n var key = nds[i].className;\n if (key && value) {\n nds[i].setAttribute('i18n-content', key);\n // Better keep value for round-tripping.\n // nds[i].setAttribute('value', '');\n messages = addKeyValuePlaceHolders(messages, key, value);\n }\n }\n }\n };\n var i18nForInnerText = function(select, messages) {\n var nds = document.querySelectorAll(select);\n for (i = 0, len = nds.length; i < len; i++) {\n // TODO Please note we use .innerText because it preserves newline characters in Chrome, while .textContent loses them.\n var value = nds[i].innerText;\n if (nds[i].childElementCount === 0 && value) {\n var key = nds[i].className;\n var value = value.replace(/\\s+/g, ' ').trim();\n if (key && value) {\n nds[i].setAttribute('i18n-content', key);\n // Better keep value for round-tripping.\n // nds[i].innerText = '';\n messages = addKeyValuePlaceHolders(messages, key, value);\n }\n }\n }\n var i18nNodes = document.querySelectorAll(select + '[i18n-content]');\n for (i = 0, len = i18nNodes.length; i < len; i++) {\n if (i18nNodes[i].hasAttribute('i18n-content') && i18nNodes[i].childElementCount > 0) {\n console.warn('HTML elements have been added to\\n%O\\nPlease only use text and named character references (%o)!',\n i18nNodes[i], 'https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction#Named_character_references');\n }\n }\n };\n i18nForInnerText('*', hsh);\n i18nForValueAttribute('input[value]', hsh);\n Object.getOwnPropertyNames(hsh).sort().forEach(function(value) {\n replacer.push(value);\n });\n var messagesString = JSON.stringify(hsh, replacer, 4);\n var htmlFileText = '<!DOCTYPE ' + document.doctype.name + '>\\n' + document.documentElement.outerHTML;\n var htmlFileName = location.pathname.split('/').pop();\n var makeDownloadLink = function(data, filename, style) {\n var blob = new window.Blob([data], {\n 'type': 'text/utf-8'\n });\n var a = document.createElement('a');\n a.innerText = 'Download ' + filename;\n a.href = URL.createObjectURL(blob);\n a.download = filename;\n document.body.appendChild(a);\n a.setAttribute('style', style);\n a.onclick = function() {\n setTimeout(function() {\n document.body.removeChild(a);\n }, 500);\n };\n }\n var applyChromeI18nMessages = function() {\n // This generated function body is wrapped in (...)(); to execute on load.\n // This will only install the onreadystatechange event handler\n // to be run when the document load is complete.\n // Load this file into the associated HTML file by including\n // <script src=\"applyChromeI18nMessages.js\"></script>\n // in its head element.\n try {\n document.addEventListener('readystatechange', function(event) {\n if (event.target.readyState !== 'complete') {\n return;\n }\n if (!chrome.i18n) {\n console.warn('chrome.i18n is undefined.\\n%s\\nis %cnot%c viewed as part of a chrome extension.', document.URL, 'font-weight: bold', '');\n return;\n }\n (function() {\n var nds = document.querySelectorAll('[i18n-content]');\n for (i = 0, len = nds.length; i < len; i++) {\n var value = nds[i].getAttribute('value');\n var key = nds[i].getAttribute('i18n-content');\n if (value === null) {\n // TODO Please note we use .innerText because it preserves newline characters in Chrome, while .textContent loses them.\n nds[i].innerText = chrome.i18n.getMessage(key);\n } else {\n nds[i].setAttribute('value', chrome.i18n.getMessage(key));\n }\n }\n })();\n }, false);\n } catch (exception) {\n window.alert('exception.stack: ' + exception.stack);\n console.log((new Date()).toJSON(), 'exception.stack:', exception.stack);\n }\n };\n makeDownloadLink(messagesString, 'messages.json', 'position:fixed;top:2em;left:50%;opacity:0.5');\n makeDownloadLink(htmlFileText, htmlFileName, 'position:fixed;top:4em;left:50%;opacity:0.5');\n makeDownloadLink('(' + applyChromeI18nMessages + ')();', 'applyChromeI18nMessages.js', 'position:fixed;top:6em;left:50%;opacity:0.5');\n} catch (exception) {\n console.log(exception.stack);\n}\n"
},
{
"name": "insert-css",
"content": "// insert-css.js\n// https://github.com/bgrins/devtools-snippets\n// Injects a snippet of CSS into the current page.\n\nfunction insertCss(code) {\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (style.styleSheet) { // IE\n style.styleSheet.cssText = code;\n } else { // Other browsers\n style.innerHTML = code;\n }\n document.getElementsByTagName(\"head\")[0].appendChild( style );\n}\n\n// Feel free to extend this snippet with your favorite CSS snippets.\n// Here's an example which makes the current page high contrast.\n// Notice the trailing backslashes, used to define multiline strings.\nfunction insertCssHighContrast() {\n var css = '\\\n * { background: white ! important; color: black !important } \\\n :link, :link * { color: #0000EE !important } \\\n :visited, :visited * { color: #551A8B !important } \\\n ';\n insertCss(css);\n}\n"
},
{
"name": "jquerify",
"content": "// jquerify.js\n// https://github.com/bgrins/devtools-snippets\n// Add jQuery to any page that does not have it already.\n\n(function () {\n\n if ( !window.jQuery ) {\n var dollarInUse = !!window.$;\n var s = document.createElement('script');\n s.setAttribute('src', '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js');\n s.addEventListener('load', function(){\n console.log('jQuery loaded!');\n\n if(dollarInUse) {\n jQuery.noConflict();\n console.log('`$` already in use; use `jQuery`');\n }\n });\n\n document.body.appendChild(s);\n }\n\n})();\n"
},
{
"name": "log",
"content": "// log.js\n// https://github.com/bgrins/devtools-snippets\n// Adds a `log` function to window object.\n// http://www.briangrinstead.com/blog/console-log-helper-function\n\n(function() {\n\n window.log = Function.prototype.bind.call(console.log, console);\n\n})();\n"
},
{
"name": "log-globals",
"content": "/*\n\tlog-globals\n\tby Sindre Sorhus\n\thttps://github.com/sindresorhus/log-globals\n\tMIT License\n*/\n(function () {\n\t'use strict';\n\n\tfunction getIframe() {\n\t\tvar el = document.createElement('iframe');\n\t\tel.style.display = 'none';\n\t\tdocument.body.appendChild(el);\n\t\tvar win = el.contentWindow;\n\t\tdocument.body.removeChild(el);\n\t\treturn win;\n\t}\n\n\tfunction detectGlobals() {\n\t\tvar iframe = getIframe();\n\t\tvar ret = Object.create(null);\n\n\t\tfor (var prop in window) {\n\t\t\tif (!(prop in iframe)) {\n\t\t\t\tret[prop] = window[prop];\n\t\t\t}\n\t\t}\n\n\t\treturn ret;\n\t}\n\n\tconsole.log(detectGlobals());\n})();\n"
},
{
"name": "overlay",
"content": "var storageKey = 'overlay-default';\nvar overlayDefault = localStorage.getItem(storageKey) || '';\nvar url = prompt('paste overlay url', overlayDefault);\nif (url) {\n localStorage.setItem(storageKey, url);\n var overlay = document.createElement('div');\n overlay.style.position = 'absolute';\n overlay.style.left = 0;\n overlay.style.top = 0;\n overlay.style.width = '100%';\n overlay.style.height='100%';\n overlay.style.backgroundImage = 'url(' + url + ')';\n overlay.style.backgroundSize = 'cover';\n overlay.style.zIndex=10000;\n overlay.style.opacity = 0.5;\n document.body.appendChild(overlay);\n}\n"
},
{
"name": "performance",
"content": "// performance.js\n// https://github.com/bgrins/devtools-snippets\n// Print out window.performance information.\n// https://developer.mozilla.org/en-US/docs/Navigation_timing\n\n(function () {\n\n var t = window.performance.timing;\n var lt = window.chrome && window.chrome.loadTimes && window.chrome.loadTimes();\n var timings = [];\n\n timings.push({\n label: \"Time Until Page Loaded\",\n time: t.loadEventEnd - t.navigationStart + \"ms\"\n });\n timings.push({\n label: \"Time Until DOMContentLoaded\",\n time: t.domContentLoadedEventEnd - t.navigationStart + \"ms\"\n });\n timings.push({\n label: \"Total Response Time\",\n time: t.responseEnd - t.requestStart + \"ms\"\n });\n timings.push({\n label: \"Connection\",\n time: t.connectEnd - t.connectStart + \"ms\"\n });\n timings.push({\n label: \"Response\",\n time: t.responseEnd - t.responseStart + \"ms\"\n });\n timings.push({\n label: \"Domain Lookup\",\n time: t.domainLookupEnd - t.domainLookupStart + \"ms\"\n });\n timings.push({\n label: \"Load Event\",\n time: t.loadEventEnd - t.loadEventStart + \"ms\"\n });\n timings.push({\n label: \"Unload Event\",\n time: t.unloadEventEnd - t.unloadEventStart + \"ms\"\n });\n timings.push({\n label: \"DOMContentLoaded Event\",\n time: t.domContentLoadedEventEnd - t.domContentLoadedEventStart + \"ms\"\n });\n if(lt) {\n if(lt.wasNpnNegotiated) {\n timings.push({\n label: \"NPN negotiation protocol\",\n time: lt.npnNegotiatedProtocol\n });\n }\n timings.push({\n label: \"Connection Info\",\n time: lt.connectionInfo\n });\n timings.push({\n label: \"First paint after Document load\",\n time: Math.ceil(lt.firstPaintTime - lt.finishDocumentLoadTime) + \"ms\"\n });\n }\n\n var navigation = window.performance.navigation;\n var navigationTypes = { };\n navigationTypes[navigation.TYPE_NAVIGATENEXT || 0] = \"Navigation started by clicking on a link, or entering the URL in the user agent's address bar, or form submission.\",\n navigationTypes[navigation.TYPE_RELOAD] = \"Navigation through the reload operation or the location.reload() method.\",\n navigationTypes[navigation.TYPE_BACK_FORWARD] = \"Navigation through a history traversal operation.\",\n navigationTypes[navigation.TYPE_UNDEFINED] = \"Navigation type is undefined.\",\n\n console.group(\"window.performance\");\n\n console.log(window.performance);\n\n console.group(\"Navigation Information\");\n console.log(navigationTypes[navigation.type]);\n console.log(\"Number of redirects that have taken place: \", navigation.redirectCount)\n console.groupEnd(\"Navigation Information\");\n\n console.group(\"Timing\");\n console.log(window.performance.timing);\n console.table(timings, [\"label\", \"time\"]);\n console.groupEnd(\"Timing\");\n\n console.groupEnd(\"window.performance\");\n\n})();\n"
},
{
"name": "plainforms",
"content": "// plainforms.js\n// https://github.com/bgrins/devtools-snippets\n// Remove HTML5 form features (validations and special input types).\n\n(function () {\n\n ['maxlength', 'required', 'min', 'max', 'pattern', 'step' ].forEach(function (attr) {\n [].forEach.call(document.querySelectorAll(\"[\" + attr + \"]\"), function (node) {\n node.removeAttribute(attr);\n });\n });\n\n ['tel', 'url', 'email', 'datetime', 'date', 'month', 'week', 'time', 'datetime-local', 'number', 'range', 'color'].forEach(function (type) {\n [].forEach.call(document.querySelectorAll(\"input[type=\" + type + \"]\"), function (node) {\n node.setAttribute('type', 'text');\n });\n });\n\n console.info(\"All HTML5 form validations have been removed.\");\n})();\n"
},
{
"name": "querystringvalues",
"content": "// querystringvalues.js\n// https://github.com/bgrins/devtools-snippets\n// Print out key/value pairs from querystring.\n\n(function() {\n\n var url = location;\n var querystring = location.search.slice(1);\n var tab = querystring.split(\"&\").map(function(qs) {\n return { \"Key\": qs.split(\"=\")[0], \"Value\": qs.split(\"=\")[1], \"Pretty Value\": decodeURIComponent(qs.split(\"=\")[1]).replace(/\\+/g,\" \") }\n });\n\n console.group(\"Querystring Values\");\n console.log(\"URL: \"+url+\"\\nQS: \"+querystring);\n console.table(tab);\n console.groupEnd(\"Querystring Values\");\n\n})();\n"
},
{
"name": "showheaders",
"content": "// showheaders.js\n// https://github.com/bgrins/devtools-snippets\n// Print out response headers for current URL.\n\n(function() {\n\n var request=new XMLHttpRequest();\n request.open('HEAD',window.location,true);\n \n request.onload = request.onerror = function () {\n var headers = request.getAllResponseHeaders();\n var tab = headers.split(\"\\n\").map(function(h) {\n return { \"Key\": h.split(\": \")[0], \"Value\": h.split(\": \")[1] }\n }).filter(function(h) { return h.Value !== undefined; });\n\n console.group(\"Request Headers\");\n console.log(headers);\n console.table(tab);\n console.groupEnd(\"Request Headers\");\n };\n \n request.send(null);\n\n})();\n"
},
{
"name": "viewcookies",
"content": "// viewcookies.js\n// https://github.com/bgrins/devtools-snippets\n// Shows all cookies stored in document.cookies in a console.table\n\n(function() {\n 'use strict';\n\n window.viewCookies = function() {\n if (document.cookie) {\n const cookies = document.cookie\n .split(/; ?/)\n .map(s => {\n const [ , key, value ] = s.match(/^(.*?)=(.*)$/);\n return {\n key,\n value: decodeURIComponent(value)\n };\n });\n\n console.table(cookies);\n }\n else {\n console.warn('document.cookie is empty!');\n }\n };\n})();\n\nwindow.viewCookies();\n"
},
{
"name": "wrapelement",
"content": "// wrapelement.js\n// https://github.com/bgrins/devtools-snippets\n// Wrap a given element in a given type of element\n// wrapElement('.foo', 'h1');\n// wrapElement(document.querySelector('#bar'), 'div');\n//\n// LICENSE: [MIT](http://gkatsev.mit-license.org)\n\n(function() {\n window.wrapElement = function(el, whatToWrapIn) {\n var newParent = document.createElement(whatToWrapIn),\n oldParent,\n nextSibling;\n\n if (typeof el === 'string') {\n el = document.querySelector(el);\n }\n\n oldParent = el.parentNode;\n nextSibling = el.nextSibling;\n newParent.appendChild(el);\n if (nextSibling) {\n oldParent.insertBefore(newParent, nextSibling);\n } else {\n oldParent.appendChild(newParent);\n }\n }\n\n})();\n"
}
]
}