First of all, this extension shouldn’t have existed, but the retards from deviantart don’t offer you any method to download your data, so I had to scrape it.

The extension has a simple and straightforward purpose, to show some information about the art I’m viewing and give me a way to easily create a Markdown file custom made for my Hugo content folder.

In order to make the extension, I took the example from Max N at Lateral and modified it to my needs.

If you’re in a hurry and you’re here just because you want to make a new Chrome extension and need a simple place to start from, you can download the archive from below. Unpack the archive and drag the folder over a Chrome window that is pointed at: chrome://extensions

Because I didn’t need too much, the code is straightforward and all is dumped into a single Javascript file:

1. Added jQuery. I added version 3.5.0, because I had that on my site and it was the easiest to copy and paste.
2. Added the string_to_slug(str) function, which basically takes the “Title of the Photograph” and turns it into “title-of-the-photograph”, to be used as filename for the Markdown file.
3. Added the variables using classes. These might change as they’re random react (or whatever shit they’re using) classnames, but they should be easy to be identified in their code
4. Created the blobcontent element which is prepended to the page’s HTML and that can be downloaded as a .md file. I also prepended the “Save File” button.
5. Added the getTheFile() function which does the saving of the file by dynamically creating a link towards a blob and saving it on the computer with title-of-the-photograph.md name.
6. The last step was to add some CSS rules in the styles.css file, to make the output box and the button look pretty.

The output of the Markdown file needed looked something like this, but you can edit it to output whatever you need by editing the blobcontent variable.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

---
id: 78336173
title: 'The Photograph Title'
views: '305'
faves: '5'
comments: '7'
cover: '/uploads/gallery/d1an0kt-03001f28b9ab.jpg'
date: '2008-02-24T22:20:47.000Z'
section: 'gallery'
---

Lorem ipsum dolor sit amet long description

<div class'photo-tech'="">[......]</div>

You can see the “Save File” button next to the panel, which is pretty much what we needed in the first place.

Because of deviantart’s anti-scraping policies and shit, I had to manually download each image, but it was fine, as I had only about 100 to get. You can find them with the others in the Photographs section