Added the ability to change the keybind.

_locales/en/messages.json

@@ -246,5 +246,17 @@
     "noticeUpdate": {
         "message": "The notice has been upgraded! If you still don't like it, hit the never show button.",
         "description": "The message displayed after the notice was upgraded."
+    },
+    "setStartSponsorShortcut": {
+        "message": "Set key for start sponsor keybind"
+    },
+    "setSubmitKeybind": {
+        "message": "Set key for submission keybind"
+    },
+    "keybindDescription": {
+        "message": "Select a key by typing it"
+    },
+    "keybindDescriptionComplete": {
+        "message": "The keybind has been set to: "
     }
 }

content.js

@@ -204,18 +204,32 @@ function messageListener(request, sender, sendResponse) {
 }
 
 //check for hotkey pressed
-document.onkeydown = function(e){
+document.onkeydown = async function(e){
     e = e || window.event;
     var key = e.key;
 
     let video = document.getElementById("movie_player");
 
+    let startSponsorKey = await new Promise((resolve, reject) => {
+        chrome.storage.sync.get(["startSponsorKeybind"], (result) => resolve(result));
+    });
+    let submitKey = await new Promise((resolve, reject) => {
+        chrome.storage.sync.get(["submitKeybind"], (result) => resolve(result));
+    });
+
+    if (startSponsorKey.startSponsorKeybind === undefined) {
+        startSponsorKey.startSponsorKeybind = ";"
+    }
+    if (submitKey.submitKeybind === undefined) {
+        submitKey.submitKeybind = "'"
+    }
+
     //is the video in focus, otherwise they could be typing a comment
     if (document.activeElement === video) {
-        if(key == ';'){
+        if(key == startSponsorKey.startSponsorKeybind){
             //semicolon
             startSponsorClicked();
-        } else if (key == "'") {
+        } else if (key == submitKey.submitKeybind) {
             //single quote
             submitSponsorTimes();
         }

popup.html

@@ -172,6 +172,19 @@
                 <br/>
 
                 <h3>__MSG_Options__</h3>
+
+                <span id="keybindButtons">
+                  <button id="setStartSponsorKeybind" class="warningButton popupElement">__MSG_setStartSponsorShortcut__</button>
+                  <br/>
+                  <br/>
+                  <button id="setSubmitKeybind" class="warningButton popupElement">__MSG_setSubmitKeybind__</button>
+                  <br/>
+                </span>
+                
+                <h2 id="keybindDescription" style="display: none" class="popupElement">__MSG_keybindDescription__</h2>
+
+                <br/>
+                <br/>
       
                 <button id="hideVideoPlayerControls" class="warningButton popupElement">__MSG_hideButtons__</button>
                 <button id="showVideoPlayerControls" style="display: none" class="warningButton popupElement">__MSG_showButtons__</button>

popup.js

@@ -70,6 +70,10 @@ function runThePopup() {
     "videoFound",
     "sponsorMessageTimes",
     "downloadedSponsorMessageTimes",
+    // Keybinds
+    "setStartSponsorKeybind",
+    "setSubmitKeybind",
+    "keybindDescription"
     ].forEach(id => SB[id] = document.getElementById(id));
 
     //setup click listeners
@@ -79,6 +83,8 @@ function runThePopup() {
     SB.clearTimes.addEventListener("click", clearTimes);
     SB.submitTimes.addEventListener("click", submitTimes);
     SB.showNoticeAgain.addEventListener("click", showNoticeAgain);
+    SB.setStartSponsorKeybind.addEventListener("click", () => setKeybind(true));
+    SB.setSubmitKeybind.addEventListener("click", () => setKeybind(false));
     SB.hideVideoPlayerControls.addEventListener("click", hideVideoPlayerControls);
     SB.showVideoPlayerControls.addEventListener("click", showVideoPlayerControls);
     SB.hideInfoButtonPlayerControls.addEventListener("click", hideInfoButtonPlayerControls);
@@ -104,6 +110,9 @@ function runThePopup() {
   
     //is this a YouTube tab?
     let isYouTubeTab = false;
+
+    // Is the start sponsor keybind currently being set
+    let setStartSponsorKeybind = false;
   
     //see if discord link can be shown
     chrome.storage.sync.get(["hideDiscordLink"], function(result) {
@@ -1236,7 +1245,35 @@ function runThePopup() {
             );
         });
     }
-  
+
+    function setKeybind(startSponsorKeybind) {
+        document.getElementById("keybindButtons").style.display = "none";
+
+        document.getElementById("keybindDescription").style.display = "initial";
+        document.getElementById("keybindDescription").innerText = chrome.i18n.getMessage("keybindDescription");
+
+        setStartSponsorKeybind = startSponsorKeybind;
+
+        document.addEventListener("keydown", onKeybindSet)
+    }
+
+    function onKeybindSet(e) {
+        e = e || window.event;
+        var key = e.key;
+
+        if (setStartSponsorKeybind) {
+            chrome.storage.sync.set({"startSponsorKeybind": key});
+        } else {
+            chrome.storage.sync.set({"submitKeybind": key});
+        }
+
+        document.removeEventListener("keydown", onKeybindSet);
+
+        document.getElementById("keybindDescription").innerText = chrome.i18n.getMessage("keybindDescriptionComplete") + " " + key;
+
+        document.getElementById("keybindButtons").style.display = "unset";
+    }
+
     //converts time in seconds to minutes
     function getTimeInMinutes(seconds) {
         let minutes = Math.floor(seconds / 60);