https://github.com/humanbydefinition/textmode-browser-extension
Turn <canvas> and <video> elements into live ASCII art.
https://github.com/humanbydefinition/textmode-browser-extension
ascii browser-extension browser-extensions chrome-extension chrome-extensions edge-extension edge-extensions firefox-addon firefox-extension firefox-extensions opera-addon opera-extension opera-extensions overlay safari-extension safari-extensions textmode wxt
Last synced: about 11 hours ago
JSON representation
Turn <canvas> and <video> elements into live ASCII art.
- Host: GitHub
- URL: https://github.com/humanbydefinition/textmode-browser-extension
- Owner: humanbydefinition
- License: mit
- Created: 2026-06-15T20:08:31.000Z (15 days ago)
- Default Branch: main
- Last Pushed: 2026-06-25T22:30:36.000Z (4 days ago)
- Last Synced: 2026-06-26T00:07:50.908Z (4 days ago)
- Topics: ascii, browser-extension, browser-extensions, chrome-extension, chrome-extensions, edge-extension, edge-extensions, firefox-addon, firefox-extension, firefox-extensions, opera-addon, opera-extension, opera-extensions, overlay, safari-extension, safari-extensions, textmode, wxt
- Language: TypeScript
- Homepage: https://code.textmode.art
- Size: 3.13 MB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Textmode Overlay ⊂(◉‿◉)つ
`Textmode Overlay` is a free and open-source browser extension utilizing [textmode.js](https://github.com/humanbydefinition/textmode.js) to render live ASCII/textmode overlays on visible `` and `` elements. It provides an in-page control panel for adjusting overlay settings and exporting the result as TXT, SVG, PNG, or JPG.
## Features
- Live textmode overlays on visible `` and `` elements.
- In-page control panel for adjusting overlay settings.
- Export overlays as TXT, SVG, PNG, or JPG.
## Browser Support
| Browser | Build | Output | Store |
| ----------------------------------------------------- | ----------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------- |
| [Chrome](https://www.google.com/chrome/) | `npm run build:chrome` | `.output/chrome-mv3` | [Chrome Web Store](https://chromewebstore.google.com/detail/textmode-overlay/nmepplnokndndgeldlhbffhkipimmaia) |
| [Opera](https://www.opera.com/download) | `npm run build:chrome` | `.output/chrome-mv3` | [Opera Add-ons](https://addons.opera.com/en/extensions/details/textmode-overlay/) |
| [Edge](https://www.microsoft.com/en-us/edge) | `npm run build:edge` | `.output/edge-mv3` | Reviewing |
| [Firefox](https://www.mozilla.org/en-US/firefox/new/) | `npm run build:firefox` | `.output/firefox-mv3` | [Reviewing](https://addons.mozilla.org/en-US/firefox/addon/textmode-overlay/) |
| [Safari](https://www.apple.com/safari/) | `npm run build:safari` | `.output/safari-mv2` | — |
## Quick Start
Requirements:
- [Node.js](https://nodejs.org/en/download) 20.8.1 or newer
- npm
- [Chrome](https://www.google.com/chrome/) or another [Chromium](https://www.chromium.org/getting-involved/download-chromium/) browser for local MV3 testing
Install dependencies:
```sh
npm install
```
Run the full verification pipeline:
```sh
npm run check
```
Build the unpacked Chrome extension:
```sh
npm run build:chrome
```
Load the extension in Chrome:
1. Open `chrome://extensions`.
2. Enable Developer mode.
3. Click **Load unpacked**.
4. Select `.output/chrome-mv3`.
## Usage
1. Open a [page](https://www.youtube.com/watch?v=dQw4w9WgXcQ) with a visible canvas or video element.
2. Click the textmode overlay extension action.
3. Click **select media**.
4. Click the target media element on the page.
5. Adjust the overlay from the in-page panel.
6. Export the result when you want a static artifact.
Some media cannot be sampled. Cross-origin, tainted, DRM-protected, or otherwise restricted media may fail
when the browser blocks WebGL or canvas pixel access. The extension should report those failures without
breaking the page.
## Development
Development workflow, testing, architecture, and contribution guidelines live in
[CONTRIBUTING.md](CONTRIBUTING.md).
## License
`Textmode Overlay` is licensed under the [MIT License](LICENSE).