# Chrome Extension - custom emote picker

**URL:** <https://staging-discuss.dev.twitch.com/t/chrome-extension-custom-emote-picker/15242>\
**Category:** Chat and IRC\
**Created:** [April 10, 2018, 8:14pm UTC](https://staging-discuss.dev.twitch.com/t/chrome-extension-custom-emote-picker/15242 "2018-04-10T20:14:44Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![oban\_internet](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/oban_internet/32/4392_2.png) [@oban\_internet](https://staging-discuss.dev.twitch.com/u/oban_internet)\
**Post date:** [April 10, 2018, 8:14pm UTC](https://staging-discuss.dev.twitch.com/t/chrome-extension-custom-emote-picker/15242/1 "2018-04-10T20:14:44Z")

</div>

I am working on a Chrome extension that adds custom emotes to the chat.

I added emote-menu and it successfully adds img’s alt value into the text area but clicking on “Chat” button does not send the message into the chat unless i manually add at least one character of my own inside text area.

Is there an event that i should trigger to make it work like a spacebar keypress?  
I tried both .value and .innerHTML

Here is what i use.

```
var chatInput = document.querySelector('textarea[data-a-target="chat-input"]'); // Text area
var chatSend = document.querySelector('button[data-a-target="chat-send-button"]'); // "Chat" button

emoteList.addEventListener('click', function(e){
    if(e.target.nodeName == 'IMG'){
        chatInput.value += e.target.alt + ' ';
        chatSend.click(); //Clicks the button to instantly send text inside text area
    }
})
```

---

<div class="post-metadata">

**Author:** ![matchbook](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@matchbook](https://staging-discuss.dev.twitch.com/u/matchbook)\
**Post date:** [May 6, 2018, 8:38am UTC](https://staging-discuss.dev.twitch.com/t/chrome-extension-custom-emote-picker/15242/2 "2018-05-06T08:38:51Z")

</div>

I’m developing a chrome extension that sends a message every a specific period of time  
and I’m using nearly the same code and I’ve got the same problem I hope you found out how to solve it if you did please share it with me

---

<div class="post-metadata">

**Author:** ![Samiff](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/samiff/32/3004_2.png) [@Samiff](https://staging-discuss.dev.twitch.com/u/Samiff)\
**Post date:** [May 12, 2018, 9:04am UTC](https://staging-discuss.dev.twitch.com/t/chrome-extension-custom-emote-picker/15242/3 "2018-05-12T09:04:22Z")

</div>

I’m also working on a Chrome extension and having issues with setting the value of the chat input `<textarea>` programatically. With the below approach, I can briefly see a value change, but then it disappears (likely a controlled component). I’ve tried sending some `KeyboardEvent` after changing the value, but haven’t had any luck. Any ideas?

```auto
let chatInput = document.querySelector('.chat-input .tw-textarea');
chatInput.value = chatInput.value + ' testing...';

```

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://staging-discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [May 12, 2018, 9:38am UTC](https://staging-discuss.dev.twitch.com/t/chrome-extension-custom-emote-picker/15242/4 "2018-05-12T09:38:23Z")

</div>

Matchbook necroed this thread and started their own here

> [@Chrome extension that sends a message every a specific period of time](https://staging-discuss.dev.twitch.com/t/chrome-extension-that-sends-a-message-every-a-specific-period-of-time/15642):
>
> I’m developing a chrome extension that sends a message every a specific period of time by changing value into the text area but clicking on “Chat” button does not send the message into the chat unless i manually add at least one character of my own inside text area. is that because the chrome extension I am developing not flagged as known bot or verified bot? I’m new to twitch TV community so titles like “verified\_bot” , “white\_list” and “known\_bot” are new to me and I have no enough knowledge…

---

<div class="post-metadata">

**Author:** ![Dist](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/dist/32/7192_2.png) [@Dist](https://staging-discuss.dev.twitch.com/u/Dist)\
**Post date:** [May 12, 2018, 11:02am UTC](https://staging-discuss.dev.twitch.com/t/chrome-extension-custom-emote-picker/15242/5 "2018-05-12T11:02:46Z")

</div>

Everyone seems to be creating new duplicate threads. To try and explain the issue some of you are having, it’s because you are changing the value of an input by just manipulating it in the DOM which doesn’t change the state of the component, or Redux store for the component using that. So if you want to do it properly you should read up on React.

---

<div class="post-metadata">

**Author:** ![system](https://d2spem0quai2ol.cloudfront.net/original/2X/0/05909729875cce3b53e59d5561c4d23bb14948fc.png) [@system](https://staging-discuss.dev.twitch.com/u/system)\
**Post date:** [June 11, 2018, 11:03am UTC](https://staging-discuss.dev.twitch.com/t/chrome-extension-custom-emote-picker/15242/6 "2018-06-11T11:03:01Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.