An Emoji cheat sheet extension for Chrome, Firefox and Safari. Also a Bookmarklet. Built because I like spamming my coworkers with 🍄 🐷 🚀 🐌 but fortunately have more important things to keep in mind than the name for 🗿
Visit http://johannhof.github.io/emoji-helper for download links from the official stores.
Since nowadays most browsers allow plugins to be written in HTML/CSS/JS, it is very easy to build a cross-browser extension, especially when you're not interested in low-level browser functionality.
The build process is done through Gulp. Each submodule (chrome, safari, firefox, bookmarklet) has its own Gulpfile which takes care of building the corresponding extension build, e.g. copying required shared resources from the shared folder.
The generated files are located in the build folders. To load the build folder into the browser, do the following:
$ cd chrome
$ gulp buildFollow this guide https://developer.chrome.com/extensions/getstarted#unpacked and select the build folder.
A good introduction to the Mozilla Add-on SDK is https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_started
$ cd firefox
$ gulp build
$ cd build
$ cfx run$ cd safari
$ gulp buildThe build folder now contains emoji.safariextension, which can be loaded using the Extension Builder (https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/UsingExtensionBuilder/UsingExtensionBuilder.html)
$ cd bookmarklet
$ gulp dev
$ open test.htmlgulp dev will start a server to deliver the bookmarklet. You can test/debug the bookmarklet using test.html.
Since the extension is mostly about the shared frontend, we're using CasperJS for headless browser testing. CasperJS launches a series of tests on the development page of the bookmarklet.
Check out http://docs.casperjs.org/en/latest/installation.html for instructions on how to install CasperJS.
To run the tests, start up the bookmarklet dev task
$ cd bookmarklet
$ gulp devNow run the test task with npm
$ npm test