Inject .js file in your NFT document page, then call extractAs function.
There are two options for extraction method:
TXT as argument: returns a document with downloadable .txt files, including data:plain/txt;base64 encoded dataPNG as argument: returns a document with downloadable .png files, including data:image/png;base64 encoded data| table { | |
| border: 1px solid #ccc; | |
| border-collapse: collapse; | |
| margin: 0; | |
| padding: 0; | |
| width: 50%; | |
| table-layout: fixed; | |
| counter-reset: rowNumber; | |
| } | |
| table caption { | |
| font-size: 1.5em; | |
| margin: .5em 0 .75em; | |
| } | |
| table tr { | |
| background-color: #f8f8f8; | |
| border: 1px solid #ddd; | |
| padding: .35em; | |
| } | |
| table th, | |
| table td { | |
| padding: .625em; | |
| text-align: center; | |
| } | |
| table th { | |
| font-size: .85em; | |
| letter-spacing: .1em; | |
| text-transform: uppercase; | |
| } | |
| @media screen and (max-width: 600px) { | |
| table { | |
| border: 0; | |
| } | |
| table caption { | |
| font-size: 1.3em; | |
| } | |
| table thead { | |
| border: none; | |
| clip: rect(0 0 0 0); | |
| height: 1px; | |
| margin: -1px; | |
| overflow: hidden; | |
| padding: 0; | |
| position: absolute; | |
| width: 1px; | |
| } | |
| table tr { | |
| border-bottom: 3px solid #ddd; | |
| display: block; | |
| margin-bottom: .625em; | |
| } | |
| table td { | |
| border-bottom: 1px solid #ddd; | |
| display: block; | |
| font-size: .8em; | |
| text-align: right; | |
| } | |
| table td::before { | |
| /* | |
| * aria-label has no advantage, it won't be read inside a table | |
| content: attr(aria-label); | |
| */ | |
| content: attr(data-label); | |
| float: left; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| } | |
| table td:last-child { | |
| border-bottom: 0; | |
| } | |
| } | |
| /* general styling */ | |
| body { | |
| font-family: "Open Sans", sans-serif; | |
| line-height: 1.25; | |
| } |
| function cyrb53(str, seed = 0) { | |
| let h1 = 0xdeadbeef ^ seed, h2 = 0x41c6ce57 ^ seed; | |
| for (let i = 0, ch; i < str.length; i++) { | |
| ch = str.charCodeAt(i); | |
| h1 = Math.imul(h1 ^ ch, 2654435761); | |
| h2 = Math.imul(h2 ^ ch, 1597334677); | |
| } | |
| h1 = Math.imul(h1 ^ (h1>>>16), 2246822507) ^ Math.imul(h2 ^ (h2>>>13), 3266489909); | |
| h2 = Math.imul(h2 ^ (h2>>>16), 2246822507) ^ Math.imul(h1 ^ (h1>>>13), 3266489909); | |
| return 4294967296 * (2097151 & h2) + (h1>>>0); | |
| } | |
| function capitalize(string) { | |
| return string.charAt(0).toUpperCase() + string.slice(1); | |
| } | |
| function extractAs(type) { | |
| var base, encoded, attr, uniqueID, tempLink, row; | |
| var attributes = document.querySelectorAll('g'); | |
| var attrLength = attributes.length; | |
| var counter = 1; | |
| var title = '<title>Result: ' + attrLength + ' attributes</title>' | |
| var rawCSS = 'https://gistcdn.githack.com/eferbarn/' | |
| rawCSS += '600c8f1ea755f0941397cc514584b636/raw/' | |
| rawCSS += '94e96c982ad2e4dae3cbebc44275804f1907c599/style.css' | |
| var style = '<link rel="stylesheet" href="' + rawCSS + '">' | |
| var table = ` | |
| <table style="margin-left: 25%; width: 50% !important;"> | |
| <caption>Result</caption> | |
| <thead> | |
| <tr> | |
| <th scope="col" width='10%'>Row</th> | |
| <th scope="col" width='20%'>Attribute</th> | |
| <th scope="col">Link</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| `; | |
| var result = window.open(); | |
| result.document.open(); | |
| result.document.write('<head>' + title + style + '</head>'); | |
| result.document.write(table); | |
| for (let attribute of attributes) { | |
| base = attribute.querySelector('image').href.baseVal; | |
| if (type == 'TXT') { | |
| encoded = 'data:plain/txt;base64,' + window.btoa(base); | |
| extension = '.txt' | |
| } else { | |
| encoded = base; | |
| extension = '.png' | |
| } | |
| attr = attribute.id; | |
| uniqueID = cyrb53(base); | |
| tempLink = '<a download="' + attr + '-' + uniqueID + extension + '" '; | |
| tempLink += 'href="' + encoded + '">'; | |
| tempLink += attr + '-' + uniqueID + extension + '</a>'; | |
| row = '<tr><td>' + counter + '</td>'; | |
| row += '<td>' + capitalize(attr) + '</td>'; | |
| row += '<td>' + tempLink + '</td></tr>'; | |
| result.document.write(row); | |
| counter += 1; | |
| } | |
| result.document.write('</tbody></table>') | |
| result.document.close(); | |
| } | |
| document.onkeyup = function(e){ | |
| if (e.keyCode == 68) { | |
| extractAs('PNG'); | |
| } else if (e.keyCode == 69) { | |
| extractAs('TXT'); | |
| } else { | |
| {} | |
| } | |
| } |