D3strukt0r / emoji-helper

A small cross-browser emoji cheatsheet extension :+1:

Emoji Helper

An Emoji cheat sheet extension for Chromium and Firefox based browsers. Built because I like spamming my coworkers with 🍄 🐷 🚀 🐌 but fortunately have more important things to keep in mind than the name for 🗿

Install from the Firefox addon page or the Chrome addon page

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

What things you need to install the software and how to install them

• Git - Run brew install git (Only for macOS)
• Node.js 14.18.0+ (because of Vite.js) - Run brew install node (Only for macOS)
• pnpm - Run npm install -g pnpm
• Brave or any browser that supports Manifest V3 (Chrome 88+, Firefox 109+ (101+ as Dev Preview)) - Run brew install --cask brave-browser (Only for macOS)

Installing

Clone the project

git clone [e-mail]:D3strukt0r/emoji-helper.git
cd emoji-helper

Install dependencies

pnpm install

Run the setup scripts to prepare the emojis and icons

pnpm setup
# or separately
pnpm setup:fetch-images
pnpm setup:sprite
pnpm setup:build-icons

Our Emoji list is taken from the gemoji project (https://api.github.com/emojis). Whenever GitHub updates their list of Emoji, you can run

pnpm setup:fetch-images
pnpm setup:sprite

to download the updated images and generate a new sprite.

Development

To watch for changes and rebuild the extension on change, run

pnpm dev

The generated files are located in the ./dist/ folder. To load the build folder into the browser, follow the instructions below.

Building

To create a production ready build, run

pnpm build

The generated files are located in the ./dist/ folder. To load the build folder into the browser, follow the instructions below.

Loading into Browsers

Chromium based browsers (e.g. Chrome, Brave, Edge)

Follow this guide https://developer.chrome.com/extensions/getstarted#unpacked and select the ./dist/ folder. Or following is the TLDR:

1. Navigate to chrome://extensions/.
2. Turn on developer mode using the 'Developer mode' switch in the upper right hand corner of the page.
3. Click 'Load Unpacked' and select the ./dist/ directory.

Firefox

Unsigned addons can't be install in firefox permanently but addons can be installed temporarily.

You can follow this guide to install a WebExtension temporarily: https://developer.mozilla.org/Add-ons/WebExtensions/Temporary_Installation_in_Firefox. Or following is the TLDR:

1. Navigate to about:debugging.
2. Click "Load Temporary Add-on" and choose the generated zip file.

Release

To create a zipped release package of the extension that can be uploaded to one of the stores, run

pnpm release

This should build the codebase and output a zip file under web-ext-artifacts.

Built With

• Vite.js
• CRXJS Vite Plugin

Contributing

Please read CODE_OF_CONDUCT.md for details on our code of conduct, and CONTRIBUTING.md for the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

All the authors can be seen in the AUTHORS.md file.

Contributors can be seen in the CONTRIBUTORS.md file.

See also the full list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.txt file for details

Acknowledgments

A list of used libraries and code with their licenses can be seen in the ACKNOWLEDGMENTS.md file.