Extension - Add button to dashboard

Help / Off-topic
2

On chrome you can inspect elements by right clicking, that will take you to the elements HTML and CSS, among other things. Pick a containing element where you want to it to be injected. Say I right click left to the [Chat] button. This takes me to a div with the class

chat-buttons-container

Twitch mainly uses single instances of classes instead of id’s, so I would have to select it with either:

document.getElementsByClassName(‘class-name’) in regular javascript or
$(‘class-name’) in jQuery

To make sure I only select only one div I might use 'chat.interface > chat-buttons-container' or '.chat.interface > .chat-buttons-container' for jQuery, since chat.interface is the class of the parent div of the one I want to select. To read more about selectors, read this introduction.

When I have the element I want to inject into, I inject your button programmatically (without jQuery):

var button = document.createElement('button');
button.type = 'button';
button.className = 'btn btn-info btn-lg';
button.id = 'bcbtn';
button.dataset.toggle = 'modal';
button.dataset.target = '#bcmodal';

var containers = document.getElementsByClassName('chat-buttons-container');
containers[0].appendChild(button);

if you want inject it in between any of the existing children within the container, you could use insertBefore. You can change individual style properties of the container with containers[0].style.property or change its classes with containers[0].className.

1 Like