Skip to content

Instantly share code, notes, and snippets.

@eferbarn
Last active October 28, 2023 13:56
Show Gist options
  • Save eferbarn/600c8f1ea755f0941397cc514584b636 to your computer and use it in GitHub Desktop.
Save eferbarn/600c8f1ea755f0941397cc514584b636 to your computer and use it in GitHub Desktop.
NFT attributes extractor (SVG based NFTs)

NFT attributes extractor

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 data
  • PNG 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 {
{}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment