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

A long time coming, but since I'm laid up in bed sick and can't get up to much, I figured I'd continue this series as well.  If you recall from the last entry (https://www.patreon.com/posts/coding-mugen-1-29224528 ), we're making a web extension, specifically for Chrome/Opera, that will randomly pick a character entry from the Mugen Archive website.  Today I'll be focusing on the content script, i.e. the script that gets run when we navigate to certain pages of the site.

Last time we mentioned that we only want to run this code on download.php pages, which is the base url that all Mugen Archive file download pages have.  Those URLs all look something like this:

https://mugenarchive.com/forums/downloads.php?do=file&id=94967

So the plugin basically randomizes that last number at the end there, and navigates to the new URL.  Once it does, it checks to see if it's a valid character page or not based on a number of criteria.  If it is, great!  If not, we store the number as an invalid page.

The content script consists of exactly two functions: sendMessage and init. Init does the lion's share of the work, validating that it's an appropriate character page we've landed on, and sendMessage sends data to the background script for storage (of course).

The sendMessage function is very easy using Chrome runtime APIs:

We can pass any sort of data we want, an Object, String, whatever.  The type tells the background script what to do with the data.

The init function is more complex, so I've broken it into parts.  Honestly it could be multiple functions, and probably should be for testing purposes, but this was something fast and quick for a friend so I didn't adhere to all the best standards, haha.

First off, we want to get the id from the URL (that number at the end of the above URL), and this bit of code handles that easily:

A few clarifications: 

- window.location.search is the part of the URL after the question mark

- URLSearchParams basically parses the URL string you give it, and makes it so we can retrieve sections of it without having to parse strings and all that.

- If there's no id, we return immediately as it's not a valid page, or an error happened (there's multiple error checks throughout this)

- If there is an id, we remove any extra info Mugen Archive attached to the id (such as the downloadable character's name and such) by splitting on any dashes and returning the first element returned from that

Now that we have the id stored, we move on to the next part, checking for more errors!

During my testing, I found that occassionally someone had deleted a character entry, and that page just throws an error page instead of the rest of the information I wanted.  So we check for the standard error message ont he page.  If it's there, we send a message to the background script to blacklist this page; it's gone and we no longer want it to show up in our searches from now on.  Once that's done, we return from the function and do not execute any more code.

Assuming it's not an error page, we move on to the next section, which covers another error I ran into:

This code makes sure the page centers on the content of the page and not on the header section, which serves the dual purpose of making it easier to download the Mugen character, while also ensuring the character is downloadable; if there's no content section, there's nothing to download, which means that the page either: 1) rendered improperly, or 2) is in a weird CloudFlare "verify" state, where it tries to make sure you're not a bot trying to access the page.  In both of those pages, just wait by returning.  The code will rerun once the page renders properly.

If we pass all of those error checks, now we move on to the actual meat of the code: Retrieving the id of the latest character uploaded to the Mugen Archive, and one last check to make sure the character is actually playable!

On every Mugen character page, there's a side column that shows the latest uploaded files/characters, as seen here:

We use the top entry there as the highest number to search between for the randomizer, to ensure we never return a page that just doesn't exist yet.  So, for example, if that top file had an id of 10, I'd search between 1 and 10 to find a random character page.  Makes sense?  Here's the code to retrieve that:

There's some more complicated Javascript in there, but basically, we're taking the topEntry in the list, getting it's href (the URL), and parsing it again with URLSearchParams in order to get the id!  Once we have it, we send a message to the background script to store that number as the "topPage", which means the highest page to include in the randomization search.  Simple enough!

The very very last check is to ensure the mugen character is playable, meaning that it actually has AI to let the Mugen game actually run things.  Without AI, the character just stands there and never moves or attacks, which is less than ideal.  So one of the requirements for this randomizer is that it check that functionality.

Again, a little more complicated, but not too bad.  There's a section for metadata on the page, which includes a section that says if the AI is included or not.  We just query that section for the value of the AI, yes or no:

We find that section, get the yes or no value, and if it's not yes (!yes), we say it's a badPage and tell the background script.  If the AI section doesn't exist at all, we also say it's a badPage and do the same.  And that's it for the content script!

I've included the full content-script.js file below!  Let me know if you have any questions!

Next Time: How this all ties into the background script, and actually setting up the randomizer part!