I’ve discussed briefly in the last post that my extension for the final project is going to modify Steam website by adding game meme animations on it.
Basically, the extension does two things: adding wonderful animations and change some contents of the web pages.
Three major steps of making this extension are:
- Making animations in After Effects and turn them into CSS or js animations. Alon taught us how to use Lottie to export animations to the web.
- Break down the HTML file of Steam and look for spots to add animations.
- Build the structure of the extension and integrate the animations into it
Step three is the most difficult, step two second, step one least. With the help of Lottie, turning animations into CSS or js codes is easy. The real problem is to fully understand Steam’s structure so that I can find the right codes to modify. It is important because of two reason: first, Steam may have its own security system, HTML structure and tag names (for example, on Wikipedia, the tag for images are different from most websites); second, unless you find which lines codes to modify, the extension wouldn’t know where to add the animations.
APIs, Permission and etc.
There is an extension called “Enhanced Steam”, which is a must-have tool for Steam users. The reason I mention this extension is that what “Enhanced Steam” does is similar to the extension I’d like to make: change and add elements to the Steam website.
So I checked its manifest.json file, and figured out its behaviors. I also added here a few extra permissions I would need: “storage” and “tabs”, or maybe “contextMenus”.
I would be needing background and content scripts primarily because most of the interactions are done on the page. Browser actions can be useful if I want to add a switch to turn the extension on and off.
Well, the situation always changes faster than plans. When I experiement with injecting animations into the web pages, I found that there were so many limitation to what css or js animation can do. I had to change my plan but I also learned an important lesson.
Game on the Web
Instead of injecting animations, I injected a brick breaker game in the Steam web page, see here: