A browser extension for custom emote support in Element
Demo.mp4
This is a browser extension that adds custom emote support to Element. Available emotes are not managed by the extension itself; instead, it requires an application to serve them according to this API specification.
Note: This extension uses Manifest V3 and might or might not work in Firefox or other browsers that are not based on Chromium. I have no interest in supporting these browsers.
Clone this repository:
user@local:~$ git clone https://github.com/mserajnik/element-emotes.gitIf you are using a different Element instance than https://app.element.io/, adjust this line accordingly.
Finally, load the dist directory as an
unpacked extension to install it.
This application follows semantic versioning and any
breaking changes that require additional attention will be released under a new
major version (e.g., 2.0.0). Minor version updates (e.g., 1.1.0 or 1.2.0)
are therefore always safe to simply install.
When necessary, this section will be expanded with upgrade guides for new major versions.
Before updating, back up any changes you might have made (e.g., if you have
adjusted the Element instance URL in
dist/manifest.json).
Then, simply update via Git:
user@local:~$ cd element-emotes
user@local:element-emotes$ git pullThe extension is configured entirely via its options page. The following options are available:
| Option | Description | Default value |
|---|---|---|
| Emote Server – Emotes URL | This URL has to point to the /emotes path of the emote server. |
|
| Emote Server – Access Key | This can be left blank if the emote server does not require an access key. | |
| Default Emote Size | The default emote size when emotes are mixed with text. Has to be a value compatible with the CSS property font-size. |
2em |
| Large Emote Size | The emote size for standalone emotes (without text in the same message). Has to be a value compatible with the CSS property font-size. |
4em |
| Use Frozen Emotes | If enabled, animated emotes (GIF, APNG) will be frozen when Element is not focused. | false |
| Use Emote Fuzzy Matching | Whether to use fuzzy matching for emote suggestions or not. If disabled, simple case-insensitive string matching will be used instead. | true |
| Emote Suggestion Amount | The number of emote suggestions shown at the same time. | 10 |
| Emote Fuzzy Matching Location | The location factor used for the fuzzy matching relevance score of the emote names. See here and here to learn how to adjust it. | 0 |
| Emote Fuzzy Matching Distance | The distance factor used for the fuzzy matching relevance score of the emote names. See here and here to learn how to adjust it. | 100 |
| Emote Fuzzy Matching Threshold | The threshold factor used for the fuzzy matching relevance score of the emote names. See here and here to learn how to adjust it. | 0.6 |
| Blacklisted Emote Suggestion Strings | If an emote name contains a string from this list (use | to separate the strings) it will be excluded from the emote suggestions. |
For the extension to work properly, Enable Emoji suggestions while typing has to be disabled in the Element preferences; otherwise, the default Emoji picker will still be shown alongside the custom emote picker, leading to conflicts in particular with the arrow/tab navigation.
Custom emotes will then be suggested (using a fuzzy matcher) by typing :
followed by a character. This therefore behaves like and replaces the default
emoji suggestions Element ships with (emoji can still be selected via the emoji
picker next to the message input).
You can find the source code of the extension in src.
The production assets in dist are not excluded from Git to make
installing this extension easier for less tech-savvy people.
To make your own builds, you need to install Node.js (tested with
>=22.0.0 <24.0.0).
user@local:element-emotes$ npm iTo continuously watch for changes and automatically rebuild (useful for development):
user@local:element-emotes$ npm run watchOr, to make a production build:
user@local:element-emotes$ npm run buildYou are welcome to help out!
Open an issue or make a pull request.
AGPLv3 © Michael Serajnik