Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/toobeeh/skribbltypo
The most advanced extension for skribbl.io
https://github.com/toobeeh/skribbltypo
discord extension-chrome skribbl skribbl-typo userscript
Last synced: 3 months ago
JSON representation
The most advanced extension for skribbl.io
- Host: GitHub
- URL: https://github.com/toobeeh/skribbltypo
- Owner: toobeeh
- Created: 2020-05-27T17:45:25.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-10-27T21:37:38.000Z (3 months ago)
- Last Synced: 2024-10-28T00:12:53.183Z (3 months ago)
- Topics: discord, extension-chrome, skribbl, skribbl-typo, userscript
- Language: JavaScript
- Homepage: https://www.typo.rip
- Size: 3.97 MB
- Stars: 11
- Watchers: 1
- Forks: 3
- Open Issues: 13
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Skribbl-Typo
[](https://github.com/topics/skribbl-typo)
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](https://chrome.google.com/webstore/detail/bpcilmjlpebjklinlbdjhfkkgmmfghfj).
## 🌍 Browser availability
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.**
## 🔀 Contribution & Code Quality
> 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.
## 🧩 Architecture
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.
## 🎚️ Patching the game.js
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](https://github.com/toobeeh/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.
## 🧿 Involved repos
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.
### Frontend
- *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).
### Backend / API
- *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.
### Deployment
- *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).