Coding Experiment (Mugen Character Randomizer) - Part 1/3 (Patreon)

I figured it might be fun to post code updates on Fridays.  Friday Fun Coding Experiments?  I dunno, lol.  If/when I ever work on a vore game, this would be where code specific updates for that would live I'd think, but we'll see how that goes, lol.

In any case!  Outside of drawing cute/vore artwork, my day job is actually as a web developer, a front end one to be exact. As such, I dabble in all of those web technologies that enable the most popular sites out there to run, but I mainly focus on HTML and Javascript (in all it's forms).   You'd be surprised what you can create with JS, anything from fully fledged desktop apps (Discord, anyone?), to full games put up on Steam and other sites.  It's probably my current favorite programming language, since there's so much you can do with it!

Now, as fun as all those JS tools and libraries can be, sometimes it's fun just to go back to basics and try to figure out what one can make.  That's just what I did this time around!

A friend of mind asked about making something that could pull up pages of random Mugen characters, so they could download them and use it in some sort of tournament they had set up.  Kind of like SaltyBet, which is a lot of goofy fun.  In any case, after some back and forth, I decided the easiest way to implement this would be as a Chrome Browser Extension, allowing an easy, clickable browser button to bring up the random page on mugenarchive.com.  With that plan in mind, I got to work!

All Chrome Extensions are made of at least three base files: 

Manifest.json defines the basic info about the Extension: who made it, what it's name is, what APIs it has permission to access, and, most importantly, what pages to run the Extension on.  This means the browser runs the content-script.js file on whatever pages match the pages you define in the manifest file.  Here's the manifest file I used for my extension:

Some clarification: icon is the image that shows up in the browser toolbar for this extension. It's clickable, and you can even manage the extension from it!  For permissions, I needed storage to store invalid pages so they don't come up in random search, and tabs, because I'm going to be opening the URL to the random page in a tab of course.

The background scripts run constantly for an extension, and allow you to access storage and tabs and other Chrome Extension APIs.  There's a whole communication pipeline from content to background scripts that allow this; they listen to each other and can pass information when messages are sent between the two. 

Note: You can only access Chrome APIs from a background script, not content scripts!

The matches section defines the pages this code runs on, and I wanted it to be on any download page for Mugen Archive, where it will pull in information on what's on the page and decide if it's a valid, downloadable character or not.  I developed a series of checks to determine if a page was valid or not, which I'll get into when I go over the content-script.js file next time.  It's helpful to have a flowchart to keep track of how you want things to go, haha.

Next time: Content scripts and creating a data scraper!