Update deps for the test server

Add send chat message function
Tweaks

.gitignore

@@ -1,2 +1,3 @@
 .DS_Store
 node_modules
+.env

extension/panel/broadcaster.js

@@ -0,0 +1,35 @@
+sendchat.addEventListener('submit', (e) => {
+    e.preventDefault();
+
+    sendChat();
+});
+
+async function sendChat() {
+    master_log('Sending Chat Message');
+
+    let req = await fetch(
+        'https://api.twitch.tv/helix/extensions/chat',
+        {
+            method: 'POST',
+            headers: {
+                ...gojwt,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                broadcaster_id: channelId,
+                text: 'Test message',
+                extension_id: gojwt['Client-ID'],
+                extension_version: extensionVersion
+            })
+        }
+    );
+
+    //master_log(`Sent Chat Message: ${req.status}`);
+    if (req.status == 204) {
+        master_log('Send Chat Message OK');
+        return;
+    }
+    master_log(`Failed to send chat message: ${req.status}`);
+    let data = await req.json();
+    master_log(`Response: ${data.message}`);
+}

extension/panel/index.html

@@ -23,6 +23,7 @@
             <option value="helix_page">Helix Page</option>
             <option value="config_page">Config Page</option>
             <option value="bits_page">Bits Page</option>
+            <option value="broadcaster_page">Broadcaster Page</option>
         </select>
         <div id="pages">
             <div id="main_page" class="page active">
@@ -144,6 +145,19 @@ <h4>A Receipt</h4>
                 <div id="bits_products_count"></div>
                 <div id="bits_products"></div>
             </div>
+
+            <div id="broadcaster_page" class="page">
+                <form id="sendchat">
+                    <div>
+                        <label>Message</label>
+                        <input type="text" name="chatmessage">
+                    </div>
+                    <div>
+                        <input type="submit" />
+                    </div>
+                    <div id="sendchatresponse"></div>
+                </form>
+            </div>
         </div>
     </div>
 
@@ -155,6 +169,8 @@ <h4>A Receipt</h4>
     <script src="helix.js"></script>
     <script src="bits.js"></script>
 
+    <script src="broadcaster.js"></script>
+
     <script src="config_service.js"></script>
 </body>
 </html>

extension/panel/script.js

@@ -25,6 +25,12 @@ iterateObject(document.getElementById('query_params'), p);
 master_log('Read query_params');
 
 let helix = false;
+let gojwt = false;
+let channelId = false;
+// this has to be hardcoded
+// it's hardcoded for my test build/test
+let extensionVersion = '0.0.3';
+
 window.Twitch.ext.onAuthorized((auth) => {
     master_log('Read onAuthorized');
     document.getElementById('onAuthorized').textContent = new Date();
@@ -37,6 +43,11 @@ window.Twitch.ext.onAuthorized((auth) => {
             'Authorization': 'Extension ' + auth.helixToken
         }
     }
+    gojwt = {
+        'Client-ID': auth.clientId,
+        'Authorization': 'Bearer ' + auth.token
+    }
+    channelId = auth.channelId;
 
     if (window.Twitch.ext.viewer.isLinked) {
         document.getElementById('isLinked').textContent = 'Shared';

extension/panel/style.css

@@ -12,7 +12,7 @@ body {
     background: #EEEEEE;
     color: #111111;
 
-    font-size: 18px;
+    font-size: 14px;
     font-family: Verdana;
 }
 body.twitch_dark {
@@ -32,7 +32,7 @@ body.twitch_dark {
     width: 100%;
 }
 
-#pagecontrol {
+select, input, label {
     width: 100%;
     display: block;
 }