Extension - Add button to dashboard

[sargasm_gaming]

Hey all,
I’m trying to create an extension for twitch and have the main portion of my javascript created. My next part is to intigrate it into twitch, which is where im encountering my problem. As ive never made an extension before im not sure how to inject a button into the webpage’s DOM.

My manifest file:

{
"manifest_version": 2,
"name": "Twitch Community Networker",
"version": "1.0",
 "content_scripts": [ {
    "all_frames": true,
    "js": [ "main.js" ],
"matches": [ "*://*.twitch.tv/*/dashboard" ]
 }],
 "web_accessible_resources": ["main.js"]  
}

and the button i want to inject that will run my script is:

<button type="button" class="btn btn-info btn-lg" id="bcbtn" data-toggle="modal" data-target="#bcmodal"></button>

I’m really not sure where to go from here and everything i’ve reseached in the last week and a half has not helped in any way. Any help that could point me in the right direction would be greatly appreciated.

Thank you,
-sargasm

[livewhiletrue]

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.