Skribbl Typo is an extension for various browsers which adds many extra features to skribbl.io.
Details about features & functionality can be found on the Website.
Typo is available for all major browsers in one or another way.
- For chrome and all chromium based browsers, you can get it from the chrome store or use the zip in the releases section.
- For firefox, use the "add typo" link on the website or use the signed xpi file from the releases section.
- For all other browsers (including safari on iOS and iPadOS using the "Stay" userscript manager), you can use the userscript in the repo root with a userscript manager of your choice.
Typo targets chrome/chromium and is not actively tested on any other platforms.
First a disclaimer: This extension emerged from a pretty bad codebase (which i am responsible for), and although it had some minor refactors the architecture and code quality is not that great.
Contributions are welcome! Just fork the repo and create a pull request into develop when you're done. Finished & tested versions will be merged from develop to master.
However, if you want to contribute or have some feedback, it is a good idea to message me fist on discord @tobeh.
If you want to report some bugs, feel free to open an issue.
Typo consists of plain JS files (content scripts) that are run at various DOM lifecycle events. To get an idea what code is run at which point, have a brief look at the manifest.
patcher.js modifies DOM during load, eg replacing the game JS or adding instantly visible elements.
content.js initiates all features procedurally.
Features are located in the features directory and are objects, each object has an init function to initialize the feature.
color.js simplifies color conversions, commands.js toggles features based on commands from the popup.
errors.js provides a way to log js errors and send them via a Discord webhook.
gamePatch.js is the patched game.js from skribbl.
The userscript version is a merge of all files and patches the web-extension API usage with polyfills.
To have a close look at that, head to the userscript-gen.js in the repo root.
Since typo is using advanced features to modify the behavior of skribbl, the original client-code of skribbl is being patched. Typo utilizes the tool patchEx written for specifically this issue.
Instead of manually patching the source code, it allows adding rules and inserting code & templates automatically.
The patch configuration can be found in patch.json in the repo root. Whenever a new skribbl version is published, it is necessary to update the patched game.js.
It may be needed to adjust the patch config since the client-code is minified.
To view all involved repos, click the badge at the top of the readme.
Similar as with this repo, the codebase grew from an absolute beginner-level and is being refactored step by step.
Here is an overview of new & legacy repositories which are in use to some extent.
- typo.rip is the currently active website and user dashboard written in vanilla JS as SPA.
- Tirith (frontend) is an angular application which aims to replace the current website and feature an admin dashboard (which is already in use).
- Orthanc is a collection of PHP scripts which provides API-ish access to some data like available sprites, themes and scraped emojis.
- Tirith (backend) is a NEST application which aims to replace Orthanc in the near future. Used also by the Tirith frontend.
- typo-agent-scraper is a microservice to provide image sources for the image agent.
- Palantir is a discord bot that integrates skribbltypo to discord and lets user manage their account in a social and interactive way.
- Ithil-Rebirth is a node.js/TS socket.io backend server for direct event-based communication with clients of the typo extension.
- typo-compose is a git repository which features a setup of various docker-composes to establish an easy-to-deploy ecosystem. This is currently used on the vps where all containers are hosted.
- typo-static-files is a repository which serves as collection of all static assets (sprites, drops, awards, scenes).
