![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1519686588/lj4wjscqihu1puetv80z.png)

Tomoji is a chrome extension (this far) created specially for Steemians so they can easily add graphics to a comment in steemit.com.

This far they can have access to normal emojis, ascii emojis and stickers. All the content is creative commons and open source.

---

![](https://i.imgur.com/NzjrHon.jpg)

By installing the extension you can add any of the graphics to a comment with just one click as shown below:

![](https://i.imgur.com/oBEMjjr.gif)

You can switch between 3 styles, normal, ascii and stickers:

![](https://i.imgur.com/t1c60Cm.gif)

---

The extension was made following Chrome's specs to be made. The main code is at tomoji.js

This lines of code add the Tomoji icon at the end of the post:

```
$('.PostFull__reply').append(
  '<span class="showTomoji"><img src="'+ extIcon +'"></span>'
);
```

![](https://i.imgur.com/lXKLrJE.png)

There are 2 functions to add the emojis to the textarea, this is an example:

```
$('.PostFull').on('click', '.tomoji', function() {
    // Do something on an existent or future .dynamicElement

    var $txt = jQuery(".ReplyEditor__body textarea");
    var caretPos = $txt[0].selectionStart;
    var textAreaTxt = $txt.val();
    var thetomoji = $(this).html();

    $txt.val(textAreaTxt.substring(0, caretPos) + thetomoji + textAreaTxt.substring(caretPos) );
});
```

---

This was created having in mind that many Steemians have to create/fav a post to get to normal emojis, other create doc files with their favorites and finally, simply there are not stickers for STEEM. This extension solves those 3 issues.

---

## How to use

### Method 1
You can install the extension via Chrome store here: 
[Install Tomoji](https://chrome.google.com/webstore/detail/tomoji/hogapefkdknpplphinedpeimjmhooiap?hl=es&authuser=2).

### Method 2
You can download the files from the github repository: https://github.com/wearecodexx/tomoji

Then go to your Chrome browser and click on the 3 dots in the upper right corner and select More tools/Extensions.

Then click on developer mode and load unpacked extension.

Browse your files to find the extension folder and click `ACCEPT`.

---

## Roadmap

- Add the emojis and stickers to a post.
- Add separators.
- Ability to search emojis.
- Add an area to a predefined by user text/message for easier access.
- Make the pannel draggable.
- Make it available for firefox and safari.
- Make it available for busy.org and utopian.io

---

## How to contribute

For further and detailed information on how to contribute, please contact @wearecodex' members in our discord server: https://discord.gg/VC3WkqY
    
---

### Merged pull request
[All the files for the extension to work. #1](https://github.com/wearecodexx/tomoji/pull/1).

<sub>Note for mod: The pull requests selector didn't appear, no idea why, I just did this pull request today and was merged today as well. Also all was added in a sinlge pull request because this is a new project.</sub>

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@fabiyamada/tomoji-an-extension-to-easily-add-graphics-to-a-comment-in-steemit-com">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>