Merge pull request #55 from ajayyy/experimental

Fixed save button being in the wrong place and made submit button hidden on editing

LICENSE

@@ -1,3 +1,7 @@
+SponsorBlock Copyright (C) 2019  Ajay Ramachandran and other SponsorBlock contributors.
+
+Please refer to the license below.
+                   
                      GNU GENERAL PUBLIC LICENSE
                        Version 3, 29 June 2007
 
@@ -653,6 +657,7 @@ Also add information on how to contact you by electronic and paper mail.
 notice like this when it starts in an interactive mode:
  
     <program>  Copyright (C) <year>  <name of author>
+    
     This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
     This is free software, and you are welcome to redistribute it
     under certain conditions; type `show c' for details.

README.md

@@ -7,7 +7,7 @@ SponsorBlock is an extension that will skip over sponsored segments of YouTube v
 
 # Available for Chrome and Firefox
 
-Chrome: https://chrome.google.com/webstore/detail/mnjggcdmjocbbbhaepdhchncahnbgone/
+Chrome: https://chrome.google.com/webstore/detail/ajjollijmimolcncegpgkbilohbhjnhi
 
 Firefox: https://addons.mozilla.org/addon/sponsorblock/
 
@@ -34,3 +34,5 @@ You can load this project as an unpacked extension. Make sure to rename the `con
 The awesome [Invidious API](https://github.com/omarroth/invidious/wiki/API) is used to grab the time the video was published.
 
 Some icons made by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
+
+Some icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>

background.js

@@ -3,6 +3,9 @@ var previousVideoID = null
 //the id of this user, randomly generated once per install
 var userID = null;
 
+//the last video id loaded, to make sure it is a video id change
+var sponsorVideoID = null;
+
 //when a new tab is highlighted
 chrome.tabs.onActivated.addListener(
   function(activeInfo) {
@@ -85,7 +88,6 @@ function addSponsorTime(time, videoID) {
 
     //save this info
     let sponsorTimeKey = "sponsorTimes" + videoID;
-    console.log(sponsorTimes)
     chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
   });
 }
@@ -101,12 +103,14 @@ function submitVote(type, UUID, callback) {
       } else if (xmlhttp.readyState == 4 && xmlhttp.status == 405) {
         //duplicate vote
         callback({
-          successType: 0
+          successType: 0,
+          statusCode: xmlhttp.status
         });
       } else if (error) {
         //error while connect
         callback({
-          successType: -1
+          successType: -1,
+          statusCode: xmlhttp.status
         });
       }
     })
@@ -124,9 +128,6 @@ function submitTimes(videoID, callback) {
       for (let i = 0; i < sponsorTimes.length; i++) {
         getUserID(function(userIDStorage) {
           //submit the sponsorTime
-          console.log(sponsorTimes)
-          console.log("/api/postVideoSponsorTimes?videoID=" + videoID + "&startTime=" + sponsorTimes[i][0] + "&endTime=" + sponsorTimes[i][1]
-          + "&userID=" + userIDStorage)
           sendRequestToServer('GET', "/api/postVideoSponsorTimes?videoID=" + videoID + "&startTime=" + sponsorTimes[i][0] + "&endTime=" + sponsorTimes[i][1]
           + "&userID=" + userIDStorage, function(xmlhttp, error) {
             if (xmlhttp.readyState == 4 && !error) {
@@ -164,6 +165,12 @@ function videoIDChange(currentVideoID, tabId) {
     id: currentVideoID
   });
 
+  //not a url change
+  if (sponsorVideoID == currentVideoID){
+    return;
+  }
+  sponsorVideoID = currentVideoID;
+
   //warn them if they had unsubmitted times
   if (previousVideoID != null) {
     //get the sponsor times from storage

content.css

@@ -1,3 +1,15 @@
+.popup {
+    z-index: 10;
+    width: 100%;
+    height: 500px;
+}
+
+.smallLink {
+	font-size: 10px;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
 .playerButtonImage {
 	height: 60%;
 	top: 0;

content.js

@@ -1,13 +1,15 @@
-if(id = getYouTubeVideoID(document.URL)){ // Direct Links
-  videoIDChange(id);
-}
-
 //was sponsor data found when doing SponsorsLookup
 var sponsorDataFound = false;
 
 //the actual sponsorTimes if loaded and UUIDs associated with them
-var sponsorTimes = undefined;
-var UUIDs = undefined;
+var sponsorTimes = null;
+var UUIDs = null;
+//what video id are these sponsors for
+var sponsorVideoID = null;
+
+if(id = getYouTubeVideoID(document.URL)){ // Direct Links
+  videoIDChange(id);
+}
 
 //the video
 var v;
@@ -29,6 +31,12 @@ var showingStartSponsor = true;
 
 //should the video controls buttons be added
 var hideVideoPlayerControls = false;
+var hideInfoButtonPlayerControls = false;
+var hideDeleteButtonPlayerControls = false;
+
+//becomes true when isInfoFound is called
+//this is used to close the popup on YouTube when the other popup opens
+var popupInitialised = false;
 
 //should view counts be tracked
 var trackViewCount = false;
@@ -51,8 +59,10 @@ chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
   }
 });
 
-chrome.runtime.onMessage.addListener( // Detect URL Changes
-  function(request, sender, sendResponse) {
+//get messages from the background script and the popup
+chrome.runtime.onMessage.addListener(messageListener);
+
+function messageListener(request, sender, sendResponse) {
     //message from background script
     if (request.message == "ytvideoid") { 
       videoIDChange(request.id);
@@ -60,7 +70,7 @@ chrome.runtime.onMessage.addListener( // Detect URL Changes
 
     //messages from popup script
     if (request.message == "sponsorStart") {
-      sponsorMessageStarted();
+      sponsorMessageStarted(sendResponse);
     }
 
     if (request.message == "isInfoFound") {
@@ -69,7 +79,14 @@ chrome.runtime.onMessage.addListener( // Detect URL Changes
         found: sponsorDataFound,
         sponsorTimes: sponsorTimes,
         UUIDs: UUIDs
-      })
+      });
+
+      if (popupInitialised && document.getElementById("sponsorBlockPopupContainer") != null) {
+        //the popup should be closed now that another is opening
+        closeInfoMenu();
+      }
+
+      popupInitialised = true;
     }
 
     if (request.message == "getVideoID") {
@@ -89,13 +106,21 @@ chrome.runtime.onMessage.addListener( // Detect URL Changes
     if (request.message == "changeVideoPlayerControlsVisibility") {
       hideVideoPlayerControls = request.value;
 
+      updateVisibilityOfPlayerControlsButton();
+    } else if (request.message == "changeInfoButtonPlayerControlsVisibility") {
+      hideInfoButtonPlayerControls = request.value;
+
+      updateVisibilityOfPlayerControlsButton();
+    } else if (request.message == "changeDeleteButtonPlayerControlsVisibility") {
+      hideDeleteButtonPlayerControls = request.value;
+
       updateVisibilityOfPlayerControlsButton();
     }
 
     if (request.message == "trackViewCount") {
       trackViewCount = request.value;
     }
-});
+}
 
 //check for hotkey pressed
 document.onkeydown = function(e){
@@ -117,13 +142,19 @@ document.onkeydown = function(e){
 }
 
 function videoIDChange(id) {
+  //not a url change
+  if (sponsorVideoID == id){
+    return;
+  }
+
   //reset last sponsor times
   lastTime = -1;
   lastUnixTimeSkipped = -1;
 
   //reset sponsor times
-  sponsorTimes = undefined;
-  UUIDs = undefined;
+  sponsorTimes = null;
+  UUIDs = null;
+  sponsorVideoID = id;
 
   //reset sponsor data found check
   sponsorDataFound = false;
@@ -136,15 +167,17 @@ function videoIDChange(id) {
   }, function(response) {
     if (response != undefined) {
       let sponsorTimes = response.sponsorTimes;
-      if (sponsorTimes != undefined && sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length >= 2) {
-        document.getElementById("submitButton").style.display = "unset";
-      } else if (sponsorTimes != undefined && sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length < 2) {
-        toggleStartSponsorButton();
+      if (sponsorTimes != null && sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length >= 2) {
+        changeStartSponsorButton(true, true);
+      } else if (sponsorTimes != null && sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length < 2) {
+        changeStartSponsorButton(false, true);
+      } else {
+        changeStartSponsorButton(true, false);
       }
     }
   });
 
-  //see if video control buttons should be added
+  //see if video controls buttons should be added
   chrome.storage.sync.get(["hideVideoPlayerControls"], function(result) {
     if (result.hideVideoPlayerControls != undefined) {
       hideVideoPlayerControls = result.hideVideoPlayerControls;
@@ -152,6 +185,21 @@ function videoIDChange(id) {
 
     updateVisibilityOfPlayerControlsButton();
   });
+  chrome.storage.sync.get(["hideInfoButtonPlayerControls"], function(result) {
+    if (result.hideInfoButtonPlayerControls != undefined) {
+      hideInfoButtonPlayerControls = result.hideInfoButtonPlayerControls;
+    }
+
+    updateVisibilityOfPlayerControlsButton();
+  });
+  chrome.storage.sync.get(["hideDeleteButtonPlayerControls"], function(result) {
+    if (result.hideDeleteButtonPlayerControls != undefined) {
+      hideDeleteButtonPlayerControls = result.hideDeleteButtonPlayerControls;
+    }
+
+    updateVisibilityOfPlayerControlsButton();
+  });
+  
 }
 
 function sponsorsLookup(id) {
@@ -232,7 +280,7 @@ function sponsorCheck(sponsorTimes) { // Video skipping
 }
 
 function goBackToPreviousTime(UUID) {
-  if (sponsorTimes != undefined) {
+  if (sponsorTimes != null) {
     //add a tiny bit of time to make sure it is not skipped again
     v.currentTime = sponsorTimes[UUIDs.indexOf(UUID)][0] + 0.001;
 
@@ -274,13 +322,24 @@ function removePlayerControlsButton() {
 //adds or removes the player controls button to what it should be
 function updateVisibilityOfPlayerControlsButton() {
   addPlayerControlsButton();
+  addInfoButton();
+  addDeleteButton();
   addSubmitButton();
   if (hideVideoPlayerControls) {
     removePlayerControlsButton();
   }
+  if (hideInfoButtonPlayerControls) {
+    document.getElementById("infoButton").style.display = "none";
+  }
+  if (hideDeleteButtonPlayerControls) {
+    document.getElementById("deleteButton").style.display = "none";
+  }
 }
 
 function startSponsorClicked() {
+  //it can't update to this info yet
+  closeInfoMenu();
+
   toggleStartSponsorButton();
 
   //send back current time with message
@@ -292,11 +351,19 @@ function startSponsorClicked() {
 }
 
 function changeStartSponsorButton(showStartSponsor, uploadButtonVisible) {
+  //if it isn't visible, there is no data
+  if (uploadButtonVisible && !hideDeleteButtonPlayerControls) {
+    document.getElementById("deleteButton").style.display = "unset";
+  } else {
+    document.getElementById("deleteButton").style.display = "none";
+  }
+
   if (showStartSponsor) {
     showingStartSponsor = true;
     document.getElementById("startSponsorImage").src = chrome.extension.getURL("icons/PlayerStartIconSponsorBlocker256px.png");
+    document.getElementById("startSponsorButton").setAttribute("title", "Sponsor Starts Now");
 
-    if (document.getElementById("startSponsorImage").style.display != "none" && uploadButtonVisible) {
+    if (document.getElementById("startSponsorImage").style.display != "none" && uploadButtonVisible && !hideInfoButtonPlayerControls) {
       document.getElementById("submitButton").style.display = "unset";
     } else if (!uploadButtonVisible) {
       //disable submit button
@@ -305,6 +372,7 @@ function changeStartSponsorButton(showStartSponsor, uploadButtonVisible) {
   } else {
     showingStartSponsor = false;
     document.getElementById("startSponsorImage").src = chrome.extension.getURL("icons/PlayerStopIconSponsorBlocker256px.png");
+    document.getElementById("startSponsorButton").setAttribute("title", "Sponsor Ends Now");
 
     //disable submit button
     document.getElementById("submitButton").style.display = "none";
@@ -315,6 +383,60 @@ function toggleStartSponsorButton() {
   changeStartSponsorButton(!showingStartSponsor, true);
 }
 
+//shows the info button on the video player
+function addInfoButton() {
+  if (document.getElementById("infoButton") != null) {
+    //it's already added
+    return;
+  }
+  
+  //make a submit button
+  let infoButton = document.createElement("button");
+  infoButton.id = "infoButton";
+  infoButton.className = "ytp-button playerButton";
+  infoButton.setAttribute("title", "Open SponsorBlock Popup");
+  infoButton.addEventListener("click", openInfoMenu);
+
+  let infoImage = document.createElement("img");
+  infoImage.id = "infoButtonImage";
+  infoImage.className = "playerButtonImage";
+  infoImage.src = chrome.extension.getURL("icons/PlayerInfoIconSponsorBlocker256px.png");
+
+  //add the image to the button
+  infoButton.appendChild(infoImage);
+
+  let referenceNode = document.getElementsByClassName("ytp-right-controls")[0];
+  referenceNode.prepend(infoButton);
+}
+
+//shows the delete button on the video player
+function addDeleteButton() {
+  if (document.getElementById("deleteButton") != null) {
+    //it's already added
+    return;
+  }
+  
+  //make a submit button
+  let deleteButton = document.createElement("button");
+  deleteButton.id = "deleteButton";
+  deleteButton.className = "ytp-button playerButton";
+  deleteButton.setAttribute("title", "Clear Sponsor Times");
+  deleteButton.addEventListener("click", clearSponsorTimes);
+  //hide it at the start
+  deleteButton.style.display = "none";
+
+  let deleteImage = document.createElement("img");
+  deleteImage.id = "deleteButtonImage";
+  deleteImage.className = "playerButtonImage";
+  deleteImage.src = chrome.extension.getURL("icons/PlayerDeleteIconSponsorBlocker256px.png");
+
+  //add the image to the button
+  deleteButton.appendChild(deleteImage);
+
+  let referenceNode = document.getElementsByClassName("ytp-right-controls")[0];
+  referenceNode.prepend(deleteButton);
+}
+
 //shows the submit button on the video player
 function addSubmitButton() {
   if (document.getElementById("submitButton") != null) {
@@ -343,6 +465,91 @@ function addSubmitButton() {
   referenceNode.prepend(submitButton);
 }
 
+function openInfoMenu() {
+  if (document.getElementById("sponsorBlockPopupContainer") != null) {
+    //it's already added
+    return;
+  }
+
+  popupInitialised = false;
+
+  //hide info button
+  document.getElementById("infoButton").style.display = "none";
+
+  sendRequestToCustomServer('GET', chrome.extension.getURL("popup.html"), function(xmlhttp) {
+    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+      var popup = document.createElement("div");
+      popup.id = "sponsorBlockPopupContainer";
+      popup.innerHTML = xmlhttp.responseText
+
+      //close button
+      let closeButton = document.createElement("div");
+      closeButton.innerText = "Close Popup";
+      closeButton.classList = "smallLink";
+      closeButton.setAttribute("align", "center");
+      closeButton.addEventListener("click", closeInfoMenu);
+
+      //add the close button
+      popup.prepend(closeButton);
+    
+      let parentNode = document.getElementById("secondary");
+      if (parentNode == null) {
+        //old youtube theme
+        parentNode = document.getElementById("watch7-sidebar-contents");
+      }
+
+      //make the logo source not 404
+      //query selector must be used since getElementByID doesn't work on a node and this isn't added to the document yet
+      let logo = popup.querySelector("#sponsorBlockPopupLogo");
+      logo.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png");
+
+      //remove the style sheet and font that are not necessary
+      popup.querySelector("#sponorBlockPopupFont").remove();
+      popup.querySelector("#sponorBlockStyleSheet").remove();
+
+      parentNode.insertBefore(popup, parentNode.firstChild);
+
+      //run the popup init script
+      runThePopup();
+    }
+  });
+}
+
+function closeInfoMenu() {
+  let popup = document.getElementById("sponsorBlockPopupContainer");
+  if (popup != null) {
+    popup.remove();
+
+    //show info button
+    document.getElementById("infoButton").style.display = "unset";
+  }
+}
+
+function clearSponsorTimes() {
+  //it can't update to this info yet
+  closeInfoMenu();
+
+  let currentVideoID = getYouTubeVideoID(document.URL);
+
+  let sponsorTimeKey = 'sponsorTimes' + currentVideoID;
+  chrome.storage.sync.get([sponsorTimeKey], function(result) {
+    let sponsorTimes = result[sponsorTimeKey];
+
+    if (sponsorTimes != undefined && sponsorTimes.length > 0) {
+      let confirmMessage = "Are you sure you want to clear this?\n\n" + getSponsorTimesMessage(sponsorTimes);
+      confirmMessage += "\n\nTo edit or delete individual values, click the info button or open the extension popup by clicking the extension icon in the top right corner."
+      if(!confirm(confirmMessage)) return;
+
+      //clear the sponsor times
+      let sponsorTimeKey = "sponsorTimes" + currentVideoID;
+      chrome.storage.sync.set({[sponsorTimeKey]: []});
+
+      //set buttons to be correct
+      changeStartSponsorButton(true, false);
+    }
+  });
+}
+
 //Opens the notice that tells the user that a sponsor was just skipped
 function openSkipNotice(UUID){
   if (dontShowNotice) {
@@ -548,8 +755,13 @@ function vote(type, UUID) {
         //failure: duplicate vote
         addLoadingInfo("It seems you've already voted before", UUID)
       } else if (response.successType == -1) {
-        //failure: duplicate vote
-        addLoadingInfo("A connection error has occured.", UUID)
+        if (response.statusCode == 502) {
+          addLoadingInfo("It seems the sever is down. Contact the dev immediately.", UUID)
+        } else {
+          //failure: unknown error
+          addLoadingInfo("A connection error has occured. Error code: " + response.statusCode, UUID)
+        }
+        
       }
     }
   });
@@ -579,20 +791,47 @@ function dontShowNoticeAgain() {
   closeAllSkipNotices();
 }
 
-function sponsorMessageStarted() {
+function sponsorMessageStarted(callback) {
     let v = document.querySelector('video');
 
     //send back current time
-    chrome.runtime.sendMessage({
-      message: "time",
+    callback({
       time: v.currentTime
-    });
+    })
 
     //update button
     toggleStartSponsorButton();
 }
 
 function submitSponsorTimes() {
+  if (document.getElementById("submitButton").style.display == "none") {
+    //don't submit, not ready
+    return;
+  }
+
+  //it can't update to this info yet
+  closeInfoMenu();
+
+  let currentVideoID = getYouTubeVideoID(document.URL);
+
+  let sponsorTimeKey = 'sponsorTimes' + currentVideoID;
+  chrome.storage.sync.get([sponsorTimeKey], function(result) {
+    let sponsorTimes = result[sponsorTimeKey];
+
+    if (sponsorTimes != undefined && sponsorTimes.length > 0) {
+      let confirmMessage = "Are you sure you want to submit this?\n\n" + getSponsorTimesMessage(sponsorTimes);
+      confirmMessage += "\n\nTo edit or delete values, click the info button or open the extension popup by clicking the extension icon in the top right corner."
+      if(!confirm(confirmMessage)) return;
+
+      sendSubmitMessage();
+    }
+  });
+
+}
+
+//send the message to the background js
+//called after all the checks have been made that it's okay to do so
+function sendSubmitMessage(){
   //add loading animation
   document.getElementById("submitButtonImage").src = chrome.extension.getURL("icons/PlayerUploadIconSponsorBlocker256px.png");
   document.getElementById("submitButton").style.animation = "rotate 1s 0s infinite";
@@ -623,11 +862,59 @@ function submitSponsorTimes() {
         //show that the upload failed
         document.getElementById("submitButton").style.animation = "unset";
         document.getElementById("submitButtonImage").src = chrome.extension.getURL("icons/PlayerUploadFailedIconSponsorBlocker256px.png");
+
+        if(response.statusCode == 400) {
+          alert("Server said this request was invalid");
+        } else if(response.statusCode == 429) {
+          alert("You have submitted too many sponsor times for this one video, are you sure there are this many?");
+        } else if(response.statusCode == 409) {
+          alert("This has already been submitted before");
+        } else if(response.statusCode == 502) {
+          alert("It seems the server is down. Contact the dev to inform them. Error code " + response.statusCode);
+        } else {
+          alert("There was an error submitting your sponsor times, please try again later. Error code " + response.statusCode);
+        }
       }
     }
   });
 }
 
+//get the message that visually displays the video times
+function getSponsorTimesMessage(sponsorTimes) {
+  let sponsorTimesMessage = "";
+
+  for (let i = 0; i < sponsorTimes.length; i++) {
+    for (let s = 0; s < sponsorTimes[i].length; s++) {
+      let timeMessage = getFormattedTime(sponsorTimes[i][s]);
+      //if this is an end time
+      if (s == 1) {
+        timeMessage = " to " + timeMessage;
+      } else if (i > 0) {
+        //add commas if necessary
+        timeMessage = ", " + timeMessage;
+      }
+
+      sponsorTimesMessage += timeMessage;
+    }
+  }
+
+  return sponsorTimesMessage;
+}
+
+//converts time in seconds to minutes:seconds
+function getFormattedTime(seconds) {
+  let minutes = Math.floor(seconds / 60);
+  let secondsDisplay = Math.round(seconds - minutes * 60);
+  if (secondsDisplay < 10) {
+    //add a zero
+    secondsDisplay = "0" + secondsDisplay;
+  }
+
+  let formatted = minutes+ ":" + secondsDisplay;
+
+  return formatted;
+}
+
 function sendRequestToServer(type, address, callback) {
   let xmlhttp = new XMLHttpRequest();
 
@@ -669,5 +956,6 @@ function sendRequestToCustomServer(type, fullAddress, callback) {
 function getYouTubeVideoID(url) { // Returns with video id else returns false
   var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
   var match = url.match(regExp);
-  return (match && match[7].length == 11) ? match[7] : false;
+  var id = new URL(url).searchParams.get("v");
+  return (match && match[7].length == 11) ? id : false;
 }

firefox_manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "SponsorBlock - YouTube Sponsorship Blocker",
   "short_name": "SponsorBlock",
-  "version": "1.0.8",
+  "version": "1.0.12",
   "description": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.",
   "content_scripts": [
     {
@@ -10,11 +10,13 @@
       ],
       "js": [
         "config.js",
-        "content.js"
+        "content.js",
+        "popup.js"
       ],
       "css": [
         "content.css",
-        "./libs/Source+Sans+Pro.css"
+        "./libs/Source+Sans+Pro.css",
+        "popup.css"
       ]
     }
   ],
@@ -26,7 +28,10 @@
     "icons/PlayerUploadIconSponsorBlocker256px.png",
     "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
     "icons/upvote.png",
-    "icons/downvote.png"
+    "icons/downvote.png",
+    "icons/PlayerInfoIconSponsorBlocker256px.png",
+    "icons/PlayerDeleteIconSponsorBlocker256px.png",
+    "popup.html"
   ],
   "permissions": [
     "tabs",

manifest.json

@@ -1,7 +1,7 @@
 {
-  "name": "SponsorBlock - YouTube Sponsorship Blocker",
+  "name": "SponsorBlock for YouTube - Skip Sponsorships",
   "short_name": "SponsorBlock",
-  "version": "1.0.8",
+  "version": "1.0.22",
   "description": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.",
   "content_scripts": [
     {
@@ -10,11 +10,13 @@
       ],
       "js": [
         "config.js",
-        "content.js"
+        "content.js",
+        "popup.js"
       ],
       "css": [
         "content.css",
-        "./libs/Source+Sans+Pro.css"
+        "./libs/Source+Sans+Pro.css",
+        "popup.css"
       ]
     }
   ],
@@ -26,7 +28,10 @@
     "icons/PlayerUploadIconSponsorBlocker256px.png",
     "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
     "icons/upvote.png",
-    "icons/downvote.png"
+    "icons/downvote.png",
+    "icons/PlayerInfoIconSponsorBlocker256px.png",
+    "icons/PlayerDeleteIconSponsorBlocker256px.png",
+    "popup.html"
   ],
   "permissions": [
     "tabs",

popup.css

@@ -1,31 +1,92 @@
-* {
-  font-family: 'Source Sans Pro', sans-serif;
+/* reset some properties to default (youtube messes with them */
+p.popupElement {
+	margin-block-start: 1em;
+	margin-block-end: 1em;
+	margin-inline-start: 0px;
+	margin-inline-end: 0px;
 }
 
-h1 {
+h1.popupElement {
+	margin-block-start: 0.67em;
+    margin-block-end: 0.67em;
+    margin-inline-start: 0px;
+	margin-inline-end: 0px;
+	font-weight: bold;
+}
+
+h2.popupElement {
+	margin-block-start: 0.83em;
+    margin-block-end: 0.83em;
+    margin-inline-start: 0px;
+	margin-inline-end: 0px;
+	font-weight: bold;
+}
+
+h3.popupElement {
+	margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+	margin-inline-end: 0px;
+	font-weight: bold;
+}
+
+sub.popupElement {
+	font-size: smaller;
+}
+/* end reset */
+
+.popupElement {
+  font-family: 'Source Sans Pro', sans-serif;
+
+  color: black;
+}
+
+h1.popupElement {
 	margin-top: 0px;
 }
 
-body {
+.popupBody {
 	font-size: 14px;
-  width: 300px;
 	background-color: #ffd9d9;
+	padding: 5px;
 }
 
-.recordingSubtitle {
+.recordingSubtitle.popupElement {
 	margin-bottom: 10px;
 }
 
-.voteButton {
+.voteButton.popupElement {
 	height: 32px;
 	margin-right: 15px;
 	cursor: pointer;
 }
-.voteButton:hover {
+.voteButton:hover.popupElement {
 	filter: brightness(80%);
 }
 
-.greenButton {
+#discordButtonContainer.popupElement {
+	font-size: 12px;
+}
+
+.sponsorTime.popupElement {
+	font-size: 20px;
+}
+
+.smallLink.popupElement {
+	font-size: 10px;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.mediumLink.popupElement {
+	font-size: 15px;
+	padding-left: 15px;
+	padding-right: 15px;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.greenButton.popupElement {
   background-color:#ec1c1c;
   -moz-border-radius:28px;
   -webkit-border-radius:28px;
@@ -39,19 +100,19 @@ body {
   text-decoration:none;
   text-shadow:0px 0px 0px #662727;
 }
-.greenButton:hover {
+.greenButton:hover.popupElement {
   background-color:#bf2a2a;
 }
-.greenButton:focus {
+.greenButton:focus.popupElement {
 	outline: none;
 	background-color:#bf2a2a;
 }
-.greenButton:active {
+.greenButton:active.popupElement {
   position:relative;
   top:1px;
 }
 
-.dangerButton {
+.dangerButton.popupElement {
 	-moz-box-shadow:inset 0px 1px 0px 0px #cf866c;
 	-webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;
 	box-shadow:inset 0px 1px 0px 0px #cf866c;
@@ -68,19 +129,19 @@ body {
 	text-decoration:none;
 	text-shadow:0px 1px 0px #854629;
 }
-.dangerButton:hover {
+.dangerButton:hover.popupElement {
 	background-color:#bc3315;
 }
-.dangerButton:focus {
+.dangerButton:focus.popupElement {
 	outline: none;
 	background-color:#bc3315;
 }
-.dangerButton:active {
+.dangerButton:active.popupElement {
 	position:relative;
 	top:1px;
 }
 
-.warningButton {
+.warningButton.popupElement {
 	-moz-box-shadow:inset 0px 1px 0px 0px #cfbd6c;
 	-webkit-box-shadow:inset 0px 1px 0px 0px #cfbd6c;
 	box-shadow:inset 0px 1px 0px 0px #cfbd6c;
@@ -97,19 +158,19 @@ body {
 	text-decoration:none;
 	text-shadow:0px 1px 0px #856829;
 }
-.warningButton:hover {
+.warningButton:hover.popupElement {
 	background-color:#bc8215;
 }
-.warningButton:focus {
+.warningButton:focus.popupElement {
 	outline: none;
 	background-color:#bc8215;
 }
-.warningButton:active {
+.warningButton:active.popupElement {
 	position:relative;
 	top:1px;
 }
 
-.smallButton {
+.smallButton.popupElement {
 	background-color:#f9902d;
 	-moz-border-radius:3px;
 	-webkit-border-radius:3px;
@@ -122,14 +183,14 @@ body {
 	padding:6px 10px;
 	text-decoration:none;
 }
-.smallButton:hover {
+.smallButton:hover.popupElement {
 	background-color:#fa9806;
 }
-.smallButton:focus {
+.smallButton:focus.popupElement {
 	outline: none;
 	background-color:#fa9806;
 }
-.smallButton:active {
+.smallButton:active.popupElement {
 	position:relative;
 	top:1px;
 }

popup.html

@@ -1,97 +1,98 @@
 <html>
   <head>
     <title>Set Page Color Popup</title>
-    <link rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css"/>
-    <link rel="stylesheet" type="text/css" href="popup.css"/>
+    <link id="sponorBlockPopupFont" rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css"/>
+    <link id="sponorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css"/>
   </head>
 
+  <body class="popupBody">
     <center>
-    <div id="app">
-        <img src="icons/LogoSponsorBlocker256px.png" height="64px"/>
+      <div id="app" class="popupBody">
+          <img src="icons/LogoSponsorBlocker256px.png" height="64px" id="sponsorBlockPopupLogo"/>
 
-        <h1>SponsorBlock</h1>
+          <h1 class="popupElement">SponsorBlock</h1>
 
           <!-- Loading text -->
-        <p id="loadingIndicator">Loading...</p>
+          <p id="loadingIndicator" class="popupElement">Loading...</p>
 
           <!-- Hidden until loading complete -->
-        <div id="mainControls" class="main" style="display: none">
+          <div id="mainControls" class="main popupElement" style="display: none">
             <!-- If the video was found in the database -->
             <div id="videoFound">
                 
             </div>
 
-          <div id="downloadedSponsorMessageTimes">
+            <div id="downloadedSponsorMessageTimes" class="popupElement">
 
             </div>
 
             <br/>
 
-          <button id="reportAnIssue" class="dangerButton">Vote On A Sponsor Time</button>
+            <button id="reportAnIssue" class="dangerButton popupElement">Vote On A Sponsor Time</button>
 
-          <div id="issueReporterContainer" style="display: none">
+            <div id="issueReporterContainer"  class="popupElement" style="display: none">
 
-            <h3 style="margin-top: 0px">Vote On A Sponsor Time</h3>
+              <h3 style="margin-top: 0px" class="popupElement">Vote On A Sponsor Time</h3>
 
-            <div id="issueReporterTimeButtons">
+              <div id="issueReporterTimeButtons" class="popupElement">
 
               </div>
 
             </div>
 
-          <h2 class="recordingSubtitle">Record the times of a sponsorship</h2>
+            <h2 class="recordingSubtitle popupElement">Record the times of a sponsorship</h2>
 
-          <p>
-            <span id=sponsorTimesContributionsContainer style="display: none">
+            <p class="popupElement">
+              <span id=sponsorTimesContributionsContainer  class="popupElement" style="display: none">
                   So far, you've submitted
-                <span id="sponsorTimesContributionsDisplay">
+                  <span id="sponsorTimesContributionsDisplay" class="popupElement">
                     0
                   </span>
-                <span id="sponsorTimesContributionsDisplayEndWord">
+                  <span id="sponsorTimesContributionsDisplayEndWord" class="popupElement">
                     sponsors.
                   </span>
               </span>
 
-            <span id=sponsorTimesViewsContainer style="display: none">
+              <span id=sponsorTimesViewsContainer  class="popupElement" style="display: none">
                   You have saved people from 
-                <span id="sponsorTimesViewsDisplay">
+                  <span id="sponsorTimesViewsDisplay" class="popupElement">
                     0
                   </span>
-                <span id="sponsorTimesViewsDisplayEndWord">
+                  <span id="sponsorTimesViewsDisplayEndWord" class="popupElement">
                     sponsor segments.
                   </span>
               </span>
             </p>
 
-          <p> 
+            <p class="popupElement"> 
               Click the button below when the sponsorship starts and ends to record and 
               submit it to the database.
             </p>
     
             <div>
-            <button id="sponsorStart" class="greenButton">Sponsorship Starts Now</button>
+              <button id="sponsorStart" class="greenButton popupElement">Sponsorship Starts Now</button>
             </div>
 
-          <sub>Hint: Press the semicolon key while focused on a video report the start/end of a sponsor and quote to submit.</sub>
+            <sub class="popupElement">Hint: Press the semicolon key while focused on a video report the start/end of a sponsor and quote to submit.</sub>
     
-          <div id="submissionSection" style="display: none">
-            <h3>Latest Sponsor Message Times Chosen</h3>
+            <div id="submissionSection"  class="popupElement" style="display: none">
+              <h3 class="popupElement">Latest Sponsor Message Times Chosen</h3>
               <b>
-              <div id="sponsorMessageTimes">
+                <div id="sponsorMessageTimes" class="popupElement">
         
                 </div>
               </b>
       
-            <button id="clearTimes" class="smallButton">Clear Times</button>
+              <button id="clearTimes" class="smallButton popupElement">Clear Times</button>
       
               <br/>
               <br/>
 
-            <div id="submitTimesContainer" style="display: none">
-              <button id="submitTimes" class="smallButton">Submit Times</button>
+              <div id="submitTimesContainer" class="popupElement" style="display: none">
+                <button id="submitTimes" class="smallButton popupElement">Submit Times</button>
 
-              <div id="submitTimesInfoMessageContainer" style="display: none">
-                <h3 id="submitTimesInfoMessage">
+                <div id="submitTimesInfoMessageContainer" class="popupElement" style="display: none">
+                  <h3 id="submitTimesInfoMessage" class="popupElement">
 
                   </h3>
                 </div>
@@ -100,23 +101,37 @@
       
             </div>
 
-          <div id="optionsButtonContainer">
-              <br/>
+            <div id="discordButtonContainer" class="popupElement" style="display: none">
               <br/>
 
-              <button id="optionsButton" class="dangerButton">Options</button>
+              <a href="https://discord.gg/QnmVMpU" class="popupElement" target="_blank"><img src="https://www.logolynx.com/images/logolynx/1b/1bcc0f0aefe71b2c8ce66ffe8645d365.png" height="32px"/></a>
+
+              <br/>
+
+              Come join the official discord server to give suggestions and feedback!
+
+              <br/>
+
+              <span id="hideDiscordButton" class="smallLink popupElement">Hide this</span>
             </div>
 
-          <div id="options" style="display: none">
+            <div id="optionsButtonContainer" class="popupElement">
+                <br/>
+                <br/>
+      
+                <button id="optionsButton" class="dangerButton popupElement">Options</button>
+            </div>
+
+            <div id="options" class="popupElement" style="display: none">
                 <br/>
 
                 <h3>Options</h3>
       
-              <button id="hideVideoPlayerControls" class="warningButton">Hide Button On YouTube Player</button>
-              <button id="showVideoPlayerControls" style="display: none" class="warningButton">Show Button On YouTube Player</button>
+                <button id="hideVideoPlayerControls" class="warningButton popupElement">Hide Buttons On YouTube Player</button>
+                <button id="showVideoPlayerControls" style="display: none" class="warningButton popupElement">Show Buttons On YouTube Player</button>
                 <br/>
-              <sub>
-                This hides the button that appears on the YouTube player to submit sponsors. I can see this being annoying for some 
+                <sub class="popupElement">
+                  This hides the buttons that appear on the YouTube player to submit sponsors. I can see this being annoying for some 
                   people. Instead of using the button there, this popup can be used to submit sponsors. To hide the notice that appears, 
                   use the button that appears on the notice saying "Don't show this again". You can always enable these settings again 
                   later.
@@ -125,10 +140,30 @@
                 <br/>
                 <br/>
 
-              <button id="disableSponsorViewTracking" class="warningButton">Disable Sponsor View Tracking</button>
-              <button id="enableSponsorViewTracking" style="display: none" class="warningButton">Enable Sponsor View Tracking</button>
+                <button id="hideInfoButtonPlayerControls" class="warningButton popupElement">Hide Info Button On YouTube Player</button>
+                <button id="showInfoButtonPlayerControls" style="display: none" class="warningButton popupElement">Show Info Button On YouTube Player</button>
                 <br/>
-              <sub>
+                <sub class="popupElement">
+                  This is the button that opens up a popup in the YouTube page.
+                </sub>
+
+                <br/>
+                <br/>
+
+                <button id="hideDeleteButtonPlayerControls" class="warningButton popupElement">Hide Delete Button On YouTube Player</button>
+                <button id="showDeleteButtonPlayerControls" style="display: none" class="warningButton popupElement">Show Delete Button On YouTube Player</button>
+                <br/>
+                <sub class="popupElement">
+                  This is the button that allows you to clear all sponsors on the YouTube player.
+                </sub>
+
+                <br/>
+                <br/>
+
+                <button id="disableSponsorViewTracking" class="warningButton popupElement">Disable Sponsor View Tracking</button>
+                <button id="enableSponsorViewTracking" style="display: none" class="warningButton popupElement">Enable Sponsor View Tracking</button>
+                <br/>
+                <sub class="popupElement">
                   This feature tracks which sponsors you have skipped to let users know how much their submission has helped others and
                   used as a metric along with upvotes to ensure that spam doesn't get into the database. The extension sends a message
                   to the server each time you skip a sponsor. Hopefully most people don't change this setting so that the view numbers
@@ -138,11 +173,12 @@
                 <br/>
                 <br/>
 
-              <button id="showNoticeAgain" style="display: none" class="dangerButton">Show Notice Again</button>
+                <button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">Show Notice Again</button>
             </div>
           </div>
         </div>
     </center>
+  </body>
 
   <!-- Scripts that need to load after the html -->
   <script src="config.js"></script>

popup.js

@@ -1,68 +1,157 @@
-//setup click listeners
-document.getElementById("sponsorStart").addEventListener("click", sendSponsorStartMessage);
-document.getElementById("clearTimes").addEventListener("click", clearTimes);
-document.getElementById("submitTimes").addEventListener("click", submitTimes);
-document.getElementById("showNoticeAgain").addEventListener("click", showNoticeAgain);
-document.getElementById("hideVideoPlayerControls").addEventListener("click", hideVideoPlayerControls);
-document.getElementById("showVideoPlayerControls").addEventListener("click", showVideoPlayerControls);
-document.getElementById("disableSponsorViewTracking").addEventListener("click", disableSponsorViewTracking);
-document.getElementById("enableSponsorViewTracking").addEventListener("click", enableSponsorViewTracking);
-document.getElementById("optionsButton").addEventListener("click", openOptions);
-document.getElementById("reportAnIssue").addEventListener("click", reportAnIssue);
 
-//if true, the button now selects the end time
-var startTimeChosen = false;
+//make this a function to allow this to run on the content page
+function runThePopup() {
 
-//the start and end time pairs (2d)
-var sponsorTimes = [];
+  //is it in the popup or content script
+  var inPopup = true;
+  if (chrome.tabs == undefined) {
+      //this is on the content script, use direct communication
+      chrome.tabs = {};
+      chrome.tabs.sendMessage = function(id, request, callback) {
+          messageListener(request, null, callback);
+      }
   
-//current video ID of this tab
-var currentVideoID = null;
+      //add a dummy query method
+      chrome.tabs.query = function(config, callback) {
+          callback([{
+              url: document.URL,
+              id: -1
+          }]);
+      }
   
-//is this a YouTube tab?
-var isYouTubeTab = false;
+      inPopup = false;
+  }
   
-//if the don't show notice again variable is true, an option to 
-//  disable should be available
-chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
+  // References
+  let SB = {};
+  
+  SB.sponsorStart = document.getElementById("sponsorStart");
+  SB.clearTimes = document.getElementById("clearTimes");
+  SB.submitTimes = document.getElementById("submitTimes");
+  SB.showNoticeAgain = document.getElementById("showNoticeAgain");
+  SB.hideVideoPlayerControls = document.getElementById("hideVideoPlayerControls");
+  SB.showVideoPlayerControls = document.getElementById("showVideoPlayerControls");
+  SB.hideInfoButtonPlayerControls = document.getElementById("hideInfoButtonPlayerControls");
+  SB.showInfoButtonPlayerControls = document.getElementById("showInfoButtonPlayerControls");
+  SB.hideDeleteButtonPlayerControls = document.getElementById("hideDeleteButtonPlayerControls");
+  SB.showDeleteButtonPlayerControls = document.getElementById("showDeleteButtonPlayerControls");
+  SB.disableSponsorViewTracking = document.getElementById("disableSponsorViewTracking");
+  SB.enableSponsorViewTracking = document.getElementById("enableSponsorViewTracking");
+  SB.optionsButton = document.getElementById("optionsButton");
+  SB.reportAnIssue = document.getElementById("reportAnIssue");
+  // sponsorTimesContributions
+  SB.sponsorTimesContributionsContainer = document.getElementById("sponsorTimesContributionsContainer");
+  SB.sponsorTimesContributionsDisplay = document.getElementById("sponsorTimesContributionsDisplay");
+  SB.sponsorTimesContributionsDisplayEndWord = document.getElementById("sponsorTimesContributionsDisplayEndWord");
+  // sponsorTimesViewsDisplay
+  SB.sponsorTimesViewsContainer = document.getElementById("sponsorTimesViewsDisplayContainer");
+  SB.sponsorTimesViewsDisplay = document.getElementById("sponsorTimesViewsDisplayDisplay");
+  SB.sponsorTimesViewsDisplayEndWord = document.getElementById("sponsorTimesViewsDisplayDisplayEndWord");
+  // discordButtons
+  SB.discordButtonContainer = document.getElementById("discordButtonContainer");
+  SB.hideDiscordButton = document.getElementById("hideDiscordButton");
+  
+  //setup click listeners
+  SB.sponsorStart.addEventListener("click", sendSponsorStartMessage);
+  SB.clearTimes.addEventListener("click", clearTimes);
+  SB.submitTimes.addEventListener("click", submitTimes);
+  SB.showNoticeAgain.addEventListener("click", showNoticeAgain);
+  SB.hideVideoPlayerControls.addEventListener("click", hideVideoPlayerControls);
+  SB.showVideoPlayerControls.addEventListener("click", showVideoPlayerControls);
+  SB.hideInfoButtonPlayerControls.addEventListener("click", hideInfoButtonPlayerControls);
+  SB.showInfoButtonPlayerControls.addEventListener("click", showInfoButtonPlayerControls);
+  SB.hideDeleteButtonPlayerControls.addEventListener("click", hideDeleteButtonPlayerControls);
+  SB.showDeleteButtonPlayerControls.addEventListener("click", showDeleteButtonPlayerControls);
+  SB.disableSponsorViewTracking.addEventListener("click", disableSponsorViewTracking);
+  SB.enableSponsorViewTracking.addEventListener("click", enableSponsorViewTracking);
+  SB.optionsButton.addEventListener("click", openOptions);
+  SB.reportAnIssue.addEventListener("click", reportAnIssue);
+  SB.hideDiscordButton.addEventListener("click", hideDiscordButton);
+  
+  
+  //if true, the button now selects the end time
+  let startTimeChosen = false;
+  
+  //the start and end time pairs (2d)
+  let sponsorTimes = [];
+  
+  //current video ID of this tab
+  let currentVideoID = null;
+  
+  //is this a YouTube tab?
+  let isYouTubeTab = false;
+  
+  //see if discord link can be shown
+  chrome.storage.sync.get(["hideDiscordLink"], function(result) {
+    let hideDiscordLink = result.hideDiscordLink;
+    if (hideDiscordLink == undefined || !hideDiscordLink) {
+      chrome.storage.sync.get(["hideDiscordLaunches"], function(result) {
+        let hideDiscordLaunches = result.hideDiscordLaunches;
+        //only if less than 5 launches
+        if (hideDiscordLaunches == undefined || hideDiscordLaunches < 10) {
+          SB.discordButtonContainer.style.display = null;
+          
+          if (hideDiscordLaunches == undefined) {
+            hideDiscordButton = 1;
+          }
+  
+          chrome.storage.sync.set({"hideDiscordLaunches": hideDiscordButton + 1});
+        }
+      });
+    }
+  });
+  
+  //if the don't show notice again letiable is true, an option to 
+  //  disable should be available
+  chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
     let dontShowNoticeAgain = result.dontShowNoticeAgain;
     if (dontShowNoticeAgain != undefined && dontShowNoticeAgain) {
-    document.getElementById("showNoticeAgain").style.display = "unset";
+      SB.showNoticeAgain.style.display = "unset";
     }
-});
+  });
   
-//show proper video player controls option
-chrome.storage.sync.get(["hideVideoPlayerControls"], function(result) {
+  //show proper video player controls options
+  chrome.storage.sync.get(["hideVideoPlayerControls"], function(result) {
     let hideVideoPlayerControls = result.hideVideoPlayerControls;
     if (hideVideoPlayerControls != undefined && hideVideoPlayerControls) {
-    document.getElementById("hideVideoPlayerControls").style.display = "none";
-    document.getElementById("showVideoPlayerControls").style.display = "unset";
+      SB.hideVideoPlayerControls.style.display = "none";
+      SB.showVideoPlayerControls.style.display = "unset";
     }
-});
+  });
+  chrome.storage.sync.get(["hideInfoButtonPlayerControls"], function(result) {
+    let hideInfoButtonPlayerControls = result.hideInfoButtonPlayerControls;
+    if (hideInfoButtonPlayerControls != undefined && hideInfoButtonPlayerControls) {
+      SB.hideInfoButtonPlayerControls.style.display = "none";
+      SB.showInfoButtonPlayerControls.style.display = "unset";
+    }
+  });
+  chrome.storage.sync.get(["hideDeleteButtonPlayerControls"], function(result) {
+    let hideDeleteButtonPlayerControls = result.hideDeleteButtonPlayerControls;
+    if (hideDeleteButtonPlayerControls != undefined && hideDeleteButtonPlayerControls) {
+      SB.hideDeleteButtonPlayerControls.style.display = "none";
+      SB.showDeleteButtonPlayerControls.style.display = "unset";
+    }
+  });
   
-//show proper tracking option
-chrome.storage.sync.get(["trackViewCount"], function(result) {
+  //show proper tracking option
+  chrome.storage.sync.get(["trackViewCount"], function(result) {
     let trackViewCount = result.trackViewCount;
     if (trackViewCount != undefined && !trackViewCount) {
-    document.getElementById("disableSponsorViewTracking").style.display = "none";
-    document.getElementById("enableSponsorViewTracking").style.display = "unset";
+      SB.disableSponsorViewTracking.style.display = "none";
+      SB.enableSponsorViewTracking.style.display = "unset";
     }
-});
+  });
   
-//get the amount of times this user has contributed and display it to thank them
-chrome.storage.sync.get(["sponsorTimesContributed"], function(result) {
+  //get the amount of times this user has contributed and display it to thank them
+  chrome.storage.sync.get(["sponsorTimesContributed"], function(result) {
     if (result.sponsorTimesContributed != undefined) {
-    let sponsorTimesContributionsContainer = document.getElementById("sponsorTimesContributionsContainer");
-    let sponsorTimesContributionsDisplay = document.getElementById("sponsorTimesContributionsDisplay");
-    let sponsorTimesContributionsDisplayEndWord = document.getElementById("sponsorTimesContributionsDisplayEndWord");
-
       if (result.sponsorTimesContributed > 1) {
-      sponsorTimesContributionsDisplayEndWord.innerText = "sponsors."
+        SB.sponsorTimesContributionsDisplayEndWord.innerText = "sponsors."
       } else {
-      sponsorTimesContributionsDisplayEndWord.innerText = "sponsor."
+        SB.sponsorTimesContributionsDisplayEndWord.innerText = "sponsor."
       }
-    sponsorTimesContributionsDisplay.innerText = result.sponsorTimesContributed;
-    sponsorTimesContributionsContainer.style.display = "unset";
+      SB.sponsorTimesContributionsDisplay.innerText = result.sponsorTimesContributed;
+      SB.sponsorTimesContributionsContainer.style.display = "unset";
   
       //get the userID
       chrome.storage.sync.get(["userID"], function(result) {
@@ -73,34 +162,30 @@ chrome.storage.sync.get(["sponsorTimesContributed"], function(result) {
           sendRequestToServer("GET", "/api/getViewsForUser?userID=" + userID, function(xmlhttp) {
             if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
               let viewCount = JSON.parse(xmlhttp.responseText).viewCount;
-
               if (viewCount != 0) {
-              let sponsorTimesViewsContainer = document.getElementById("sponsorTimesViewsContainer");
-              let sponsorTimesViewsDisplay = document.getElementById("sponsorTimesViewsDisplay");
-              let sponsorTimesViewsDisplayEndWord = document.getElementById("sponsorTimesViewsDisplayEndWord");
-      
                 if (viewCount > 1) {
-                sponsorTimesViewsDisplayEndWord.innerText = "sponsor segments."
+                  SB.sponsorTimesViewsDisplayEndWord.innerText = "sponsor segments."
                 } else {
-                sponsorTimesViewsDisplayEndWord.innerText = "sponsor segment."
+                  SB.sponsorTimesViewsDisplayEndWord.innerText = "sponsor segment."
                 }
-              sponsorTimesViewsDisplay.innerText = viewCount;
-              sponsorTimesViewsContainer.style.display = "unset";
+                SB.sponsorTimesViewsDisplay.innerText = viewCount;
+                SB.sponsorTimesViewsContainer.style.display = "unset";
               }
             }
           });
         }
       });
     }
-});
+  });
   
   
-chrome.tabs.query({
+  chrome.tabs.query({
       active: true,
       currentWindow: true
-}, loadTabData);
+  }, loadTabData);
   
-function loadTabData(tabs) {
+  
+  function loadTabData(tabs) {
     //set current videoID
     currentVideoID = getYouTubeVideoID(tabs[0].url);
   
@@ -117,7 +202,7 @@ function loadTabData(tabs) {
       if (sponsorTimesStorage != undefined && sponsorTimesStorage.length > 0) {
         if (sponsorTimesStorage[sponsorTimesStorage.length - 1] != undefined && sponsorTimesStorage[sponsorTimesStorage.length - 1].length < 2) {
           startTimeChosen = true;
-        document.getElementById("sponsorStart").innerHTML = "Sponsorship Ends Now";
+          SB.sponsorStart.innerHTML = "Sponsorship Ends Now";
         }
   
         sponsorTimes = sponsorTimesStorage;
@@ -137,9 +222,9 @@ function loadTabData(tabs) {
       {message: 'isInfoFound'},
       infoFound
     );
-}
+  }
   
-function infoFound(request) {
+  function infoFound(request) {
     if(chrome.runtime.lastError) {
       //This page doesn't have the injected content script, or at least not yet
       displayNoVideo();
@@ -149,7 +234,7 @@ function infoFound(request) {
     //if request is undefined, then the page currently being browsed is not YouTube
     if (request != undefined) {
       //this must be a YouTube video
-    //set variable
+      //set letiable
       isYouTubeTab = true;
   
       //remove loading text
@@ -164,16 +249,16 @@ function infoFound(request) {
         document.getElementById("videoFound").innerHTML = "No sponsors found"
       }
     }
-}
+  }
   
-function setVideoID(request) {
+  function setVideoID(request) {
     //if request is undefined, then the page currently being browsed is not YouTube
     if (request != undefined) {
       videoID = request.videoID;
     }
-}
+  }
   
-function sendSponsorStartMessage() {
+  function sendSponsorStartMessage() {
       //the content script will get the message if a YouTube page is open
       chrome.tabs.query({
         active: true,
@@ -181,20 +266,20 @@ function sendSponsorStartMessage() {
       }, tabs => {
         chrome.tabs.sendMessage(
           tabs[0].id,
-        {from: 'popup', message: 'sponsorStart'}
+          {from: 'popup', message: 'sponsorStart'},
+          startSponsorCallback
         );
       });
-}
+  }
   
-chrome.runtime.onMessage.addListener(function (request, sender, callback) {
-  if (request.message == "time") {
+  function startSponsorCallback(response) {
     let sponsorTimesIndex = sponsorTimes.length - (startTimeChosen ? 1 : 0);
   
     if (sponsorTimes[sponsorTimesIndex] == undefined) {
       sponsorTimes[sponsorTimesIndex] = [];
     }
   
-    sponsorTimes[sponsorTimesIndex][startTimeChosen ? 1 : 0] = request.time;
+    sponsorTimes[sponsorTimesIndex][startTimeChosen ? 1 : 0] = response.time;
   
     let sponsorTimeKey = "sponsorTimes" + currentVideoID;
     chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
@@ -209,16 +294,23 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
   
     showSubmitTimesIfNecessary();
   }
-});
   
-//display the video times from the array
-function displaySponsorTimes() {
+  //display the video times from the array
+  function displaySponsorTimes() {
     //set it to the message
-  document.getElementById("sponsorMessageTimes").innerHTML = getSponsorTimesMessage(sponsorTimes);
-}
+    let sponsorMessageTimes = document.getElementById("sponsorMessageTimes");
   
-//display the video times from the array at the top, in a different section
-function displayDownloadedSponsorTimes(request) {
+    //remove all children
+    while (sponsorMessageTimes.firstChild) {
+      sponsorMessageTimes.removeChild(sponsorMessageTimes.firstChild);
+    }
+  
+    //add sponsor times
+    sponsorMessageTimes.appendChild(getSponsorTimesMessageDiv(sponsorTimes));
+  }
+  
+  //display the video times from the array at the top, in a different section
+  function displayDownloadedSponsorTimes(request) {
     if (request.sponsorTimes != undefined) {
       //set it to the message
       document.getElementById("downloadedSponsorMessageTimes").innerHTML = getSponsorTimesMessage(request.sponsorTimes);
@@ -227,7 +319,7 @@ function displayDownloadedSponsorTimes(request) {
       let container = document.getElementById("issueReporterTimeButtons");
       for (let i = 0; i < request.sponsorTimes.length; i++) {
         let sponsorTimeButton = document.createElement("button");
-      sponsorTimeButton.className = "warningButton";
+        sponsorTimeButton.className = "warningButton popupElement";
         sponsorTimeButton.innerText = getFormattedTime(request.sponsorTimes[i][0]) + " to " + getFormattedTime(request.sponsorTimes[i][1]);
         
         let votingButtons = document.createElement("div");
@@ -242,13 +334,13 @@ function displayDownloadedSponsorTimes(request) {
   
         let upvoteButton = document.createElement("img");
         upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
-      upvoteButton.className = "voteButton";
+        upvoteButton.className = "voteButton popupElement";
         upvoteButton.src = chrome.extension.getURL("icons/upvote.png");
         upvoteButton.addEventListener("click", () => vote(1, UUID));
   
         let downvoteButton = document.createElement("img");
         downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID;
-      downvoteButton.className = "voteButton";
+        downvoteButton.className = "voteButton popupElement";
         downvoteButton.src = chrome.extension.getURL("icons/downvote.png");
         downvoteButton.addEventListener("click", () => vote(0, UUID));
   
@@ -273,10 +365,10 @@ function displayDownloadedSponsorTimes(request) {
         }
       }
     }
-}
+  }
   
-//get the message that visually displays the video times
-function getSponsorTimesMessage(sponsorTimes) {
+  //get the message that visually displays the video times
+  function getSponsorTimesMessage(sponsorTimes) {
     let sponsorTimesMessage = "";
   
     for (let i = 0; i < sponsorTimes.length; i++) {
@@ -295,9 +387,203 @@ function getSponsorTimesMessage(sponsorTimes) {
     }
   
     return sponsorTimesMessage;
-}
+  }
   
-function clearTimes() {
+  //get the message that visually displays the video times
+  //this version is a div that contains each with delete buttons
+  function getSponsorTimesMessageDiv(sponsorTimes) {
+    // let sponsorTimesMessage = "";
+    let sponsorTimesContainer = document.createElement("div");
+    sponsorTimesContainer.id = "sponsorTimesContainer";
+  
+    for (let i = 0; i < sponsorTimes.length; i++) {
+      let currentSponsorTimeContainer = document.createElement("div");
+      currentSponsorTimeContainer.id = "sponsorTimeContainer" + i;
+      currentSponsorTimeContainer.className = "sponsorTime popupElement";
+      let currentSponsorTimeMessage = "";
+  
+      let deleteButton = document.createElement("span");
+      deleteButton.id = "sponsorTimeDeleteButton" + i;
+      deleteButton.innerText = "Delete";
+      deleteButton.className = "mediumLink popupElement";
+      let index = i;
+      deleteButton.addEventListener("click", () => deleteSponsorTime(index));
+  
+      let spacer = document.createElement("span");
+      spacer.innerText = " ";
+  
+      let editButton = document.createElement("span");
+      editButton.id = "sponsorTimeEditButton" + i;
+      editButton.innerText = "Edit";
+      editButton.className = "mediumLink popupElement";
+      editButton.addEventListener("click", () => editSponsorTime(index));
+  
+      for (let s = 0; s < sponsorTimes[i].length; s++) {
+        let timeMessage = getFormattedTime(sponsorTimes[i][s]);
+        //if this is an end time
+        if (s == 1) {
+          timeMessage = " to " + timeMessage;
+        } else if (i > 0) {
+          //add commas if necessary
+          timeMessage = timeMessage;
+        }
+  
+        currentSponsorTimeMessage += timeMessage;
+      }
+  
+      currentSponsorTimeContainer.innerText = currentSponsorTimeMessage;
+      currentSponsorTimeContainer.addEventListener("click", () => editSponsorTime(index));
+  
+      sponsorTimesContainer.appendChild(currentSponsorTimeContainer);
+      sponsorTimesContainer.appendChild(deleteButton);
+  
+      //only if it is a complete sponsor time
+      if (sponsorTimes[i].length > 1) {
+        sponsorTimesContainer.appendChild(editButton);
+      }
+    }
+  
+    return sponsorTimesContainer;
+  }
+  
+  function editSponsorTime(index) {
+    if (document.getElementById("startTimeMinutes" + index) != null) {
+      //already open
+      return;
+    }
+
+    //hide submit button
+    document.getElementById("submitTimesContainer").style.display = "none";
+  
+    let sponsorTimeContainer = document.getElementById("sponsorTimeContainer" + index);
+  
+    //get sponsor time minutes and seconds boxes
+    let startTimeMinutes = document.createElement("input");
+    startTimeMinutes.id = "startTimeMinutes" + index;
+    startTimeMinutes.className = "sponsorTime popupElement";
+    startTimeMinutes.type = "text";
+    startTimeMinutes.value = getTimeInMinutes(sponsorTimes[index][0]);
+    startTimeMinutes.style.width = "45px";
+    
+    let startTimeSeconds = document.createElement("input");
+    startTimeSeconds.id = "startTimeSeconds" + index;
+    startTimeSeconds.className = "sponsorTime popupElement";
+    startTimeSeconds.type = "text";
+    startTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][0]);
+    startTimeSeconds.style.width = "60px";
+  
+    let endTimeMinutes = document.createElement("input");
+    endTimeMinutes.id = "endTimeMinutes" + index;
+    endTimeMinutes.className = "sponsorTime popupElement";
+    endTimeMinutes.type = "text";
+    endTimeMinutes.value = getTimeInMinutes(sponsorTimes[index][1]);
+    endTimeMinutes.style.width = "45px";
+    
+    let endTimeSeconds = document.createElement("input");
+    endTimeSeconds.id = "endTimeSeconds" + index;
+    endTimeSeconds.className = "sponsorTime popupElement";
+    endTimeSeconds.type = "text";
+    endTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][1]);
+    endTimeSeconds.style.width = "60px";
+  
+    let colonText = document.createElement("span");
+    colonText.innerText = ":";
+  
+    let toText = document.createElement("span");
+    toText.innerText = " to ";
+  
+    //remove all children to replace
+    while (sponsorTimeContainer.firstChild) {
+      sponsorTimeContainer.removeChild(sponsorTimeContainer.firstChild);
+    }
+  
+    sponsorTimeContainer.appendChild(startTimeMinutes);
+    sponsorTimeContainer.appendChild(colonText);
+    sponsorTimeContainer.appendChild(startTimeSeconds);
+    sponsorTimeContainer.appendChild(toText);
+    sponsorTimeContainer.appendChild(endTimeMinutes);
+    sponsorTimeContainer.appendChild(colonText);
+    sponsorTimeContainer.appendChild(endTimeSeconds);
+  
+    //add save button and remove edit button
+    let saveButton = document.createElement("span");
+    saveButton.id = "sponsorTimeSaveButton" + index;
+    saveButton.innerText = "Save";
+    saveButton.className = "mediumLink popupElement";
+    saveButton.addEventListener("click", () => saveSponsorTimeEdit(index));
+  
+    let editButton = document.getElementById("sponsorTimeEditButton" + index);
+    let sponsorTimesContainer = document.getElementById("sponsorTimesContainer");
+  
+    sponsorTimesContainer.replaceChild(saveButton, editButton);
+  }
+  
+  function saveSponsorTimeEdit(index) {
+    let startTimeMinutes = document.getElementById("startTimeMinutes" + index);
+    let startTimeSeconds = document.getElementById("startTimeSeconds" + index);
+  
+    let endTimeMinutes = document.getElementById("endTimeMinutes" + index);
+    let endTimeSeconds = document.getElementById("endTimeSeconds" + index);
+  
+    sponsorTimes[index][0] = parseInt(startTimeMinutes.value) * 60 + parseFloat(startTimeSeconds.value);
+    sponsorTimes[index][1] = parseInt(endTimeMinutes.value) * 60 + parseFloat(endTimeSeconds.value);
+  
+    //save this
+    let sponsorTimeKey = "sponsorTimes" + currentVideoID;
+    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
+  
+    displaySponsorTimes();
+
+    showSubmitTimesIfNecessary();
+  }
+  
+  //deletes the sponsor time submitted at an index
+  function deleteSponsorTime(index) {
+    //if it is not a complete sponsor time
+    if (sponsorTimes[index].length < 2) {
+      chrome.tabs.query({
+        active: true,
+        currentWindow: true
+      }, function(tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          message: "changeStartSponsorButton",
+          showStartSponsor: true,
+          uploadButtonVisible: false
+        });
+      });
+  
+      resetStartTimeChosen();
+    }
+  
+    sponsorTimes.splice(index, 1);
+  
+    //save this
+    let sponsorTimeKey = "sponsorTimes" + currentVideoID;
+    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
+  
+    //update display
+    displaySponsorTimes();
+  
+    //if they are all removed
+    if (sponsorTimes.length == 0) {
+      //update chrome tab
+      chrome.tabs.query({
+        active: true,
+        currentWindow: true
+      }, function(tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          message: "changeStartSponsorButton",
+          showStartSponsor: true,
+          uploadButtonVisible: false
+        });
+      });
+  
+      //hide submission section
+      document.getElementById("submissionSection").style.display = "none";
+    }
+  }
+  
+  function clearTimes() {
     //send new sponsor time state to tab
     if (sponsorTimes.length > 0) {
       chrome.tabs.query({
@@ -324,9 +610,9 @@ function clearTimes() {
     document.getElementById("submissionSection").style.display = "none";
   
     resetStartTimeChosen();
-}
+  }
   
-function submitTimes() {
+  function submitTimes() {
     //make info message say loading
     document.getElementById("submitTimesInfoMessage").innerText = "Loading...";
     document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
@@ -351,6 +637,9 @@ function submitTimes() {
           } else if(response.statusCode == 409) {
             document.getElementById("submitTimesInfoMessage").innerText = "This has already been submitted before";
             document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
+          } else if(response.statusCode == 502) {
+            document.getElementById("submitTimesInfoMessage").innerText = "It seems the server is down. Contact the dev to inform them. Error code " + response.statusCode;
+            document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
           } else {
             document.getElementById("submitTimesInfoMessage").innerText = "There was an error submitting your sponsor times, please try again later. Error code " + response.statusCode;
             document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
@@ -358,9 +647,9 @@ function submitTimes() {
         }
       });
     }
-}
+  }
   
-function showNoticeAgain() {
+  function showNoticeAgain() {
     chrome.storage.sync.set({"dontShowNoticeAgain": false});
   
     chrome.tabs.query({
@@ -372,10 +661,10 @@ function showNoticeAgain() {
       });
     });
   
-  document.getElementById("showNoticeAgain").style.display = "none";
-}
+    SB.showNoticeAgain.style.display = "none";
+  }
   
-function hideVideoPlayerControls() {
+  function hideVideoPlayerControls() {
     chrome.storage.sync.set({"hideVideoPlayerControls": true});
   
     chrome.tabs.query({
@@ -388,11 +677,11 @@ function hideVideoPlayerControls() {
       });
     });
   
-  document.getElementById("hideVideoPlayerControls").style.display = "none";
-  document.getElementById("showVideoPlayerControls").style.display = "unset";
-}
+    SB.hideVideoPlayerControls.style.display = "none";
+    SB.showVideoPlayerControls.style.display = "unset";
+  }
   
-function showVideoPlayerControls() {
+  function showVideoPlayerControls() {
     chrome.storage.sync.set({"hideVideoPlayerControls": false});
   
     chrome.tabs.query({
@@ -405,11 +694,79 @@ function showVideoPlayerControls() {
       });
     });
   
-  document.getElementById("hideVideoPlayerControls").style.display = "unset";
-  document.getElementById("showVideoPlayerControls").style.display = "none";
-}
+    SB.hideVideoPlayerControls.style.display = "unset";
+    SB.showVideoPlayerControls.style.display = "none";
+  }
   
-function disableSponsorViewTracking() {
+  function hideInfoButtonPlayerControls() {
+    chrome.storage.sync.set({"hideInfoButtonPlayerControls": true});
+  
+    chrome.tabs.query({
+      active: true,
+      currentWindow: true
+    }, function(tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {
+        message: "changeInfoButtonPlayerControlsVisibility",
+        value: true
+      });
+    });
+  
+    SB.hideInfoButtonPlayerControls.style.display = "none";
+    SB.showInfoButtonPlayerControls.style.display = "unset";
+  }
+  
+  function showInfoButtonPlayerControls() {
+    chrome.storage.sync.set({"hideInfoButtonPlayerControls": false});
+  
+    chrome.tabs.query({
+      active: true,
+      currentWindow: true
+    }, function(tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {
+        message: "changeVideoPlayerCochangeInfoButtonPlayerControlsVisibilityntrolsVisibility",
+        value: false
+      });
+    });
+  
+    SB.hideInfoButtonPlayerControls.style.display = "unset";
+    SB.showInfoButtonPlayerControls.style.display = "none";
+  }
+  
+  function hideDeleteButtonPlayerControls() {
+    chrome.storage.sync.set({"hideDeleteButtonPlayerControls": true});
+  
+    chrome.tabs.query({
+      active: true,
+      currentWindow: true
+    }, function(tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {
+        message: "changeDeleteButtonPlayerControlsVisibility",
+        value: true
+      });
+    });
+  
+    SB.hideDeleteButtonPlayerControls.style.display = "none";
+    SB.showDeleteButtonPlayerControls.style.display = "unset";
+  }
+  
+  function showDeleteButtonPlayerControls() {
+    chrome.storage.sync.set({"hideDeleteButtonPlayerControls": false});
+  
+    chrome.tabs.query({
+      active: true,
+      currentWindow: true
+    }, function(tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {
+        message: "changeVideoPlayerCochangeDeleteButtonPlayerControlsVisibilityntrolsVisibility",
+        value: false
+      });
+    });
+  
+    SB.hideDeleteButtonPlayerControls.style.display = "unset";
+    SB.showDeleteButtonPlayerControls.style.display = "none";
+  }
+  
+  function disableSponsorViewTracking() {
     chrome.storage.sync.set({"trackViewCount": false});
   
     chrome.tabs.query({
@@ -422,11 +779,11 @@ function disableSponsorViewTracking() {
       });
     });
   
-  document.getElementById("disableSponsorViewTracking").style.display = "none";
-  document.getElementById("enableSponsorViewTracking").style.display = "unset";
-}
+    SB.disableSponsorViewTracking.style.display = "none";
+    SB.enableSponsorViewTracking.style.display = "unset";
+  }
   
-function enableSponsorViewTracking() {
+  function enableSponsorViewTracking() {
     chrome.storage.sync.set({"trackViewCount": true});
   
     chrome.tabs.query({
@@ -439,28 +796,28 @@ function enableSponsorViewTracking() {
       });
     });
   
-  document.getElementById("enableSponsorViewTracking").style.display = "none";
-  document.getElementById("disableSponsorViewTracking").style.display = "unset";
-}
+    SB.enableSponsorViewTracking.style.display = "none";
+    SB.disableSponsorViewTracking.style.display = "unset";
+  }
   
-function updateStartTimeChosen() {
-  //update startTimeChosen variable
+  function updateStartTimeChosen() {
+    //update startTimeChosen letiable
     if (!startTimeChosen) {
       startTimeChosen = true;
-  document.getElementById("sponsorStart").innerHTML = "Sponsorship Ends Now";
+    SB.sponsorStart.innerHTML = "Sponsorship Ends Now";
     } else {
       resetStartTimeChosen();
     }
-}
+  }
   
-//set it to false
-function resetStartTimeChosen() {
+  //set it to false
+  function resetStartTimeChosen() {
     startTimeChosen = false;
-  document.getElementById("sponsorStart").innerHTML = "Sponsorship Starts Now";
-}
+    SB.sponsorStart.innerHTML = "Sponsorship Starts Now";
+  }
   
-//hides and shows the submit times button when needed
-function showSubmitTimesIfNecessary() {
+  //hides and shows the submit times button when needed
+  function showSubmitTimesIfNecessary() {
     //check if an end time has been specified for the latest sponsor time
     if (sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length > 1) {
       //show submit times button
@@ -469,26 +826,26 @@ function showSubmitTimesIfNecessary() {
       //hide submit times button
       document.getElementById("submitTimesContainer").style.display = "none";
     }
-}
+  }
   
-//make the options div visisble
-function openOptions() {
+  //make the options div visisble
+  function openOptions() {
     document.getElementById("optionsButtonContainer").style.display = "none";
     document.getElementById("options").style.display = "unset";
-}
+  }
   
-//this is not a YouTube video page
-function displayNoVideo() {
+  //this is not a YouTube video page
+  function displayNoVideo() {
     document.getElementById("loadingIndicator").innerHTML = "This probably isn't a YouTube tab, or you clicked too early. " +
         "If you know this is a YouTube tab, close this popup and open it again.";
-}
+  }
   
-function reportAnIssue() {
+  function reportAnIssue() {
     document.getElementById("issueReporterContainer").style.display = "unset";
-  document.getElementById("reportAnIssue").style.display = "none";
-}
+    SB.reportAnIssue.style.display = "none";
+  }
   
-function addVoteMessage(message, UUID) {
+  function addVoteMessage(message, UUID) {
     let container = document.getElementById("sponsorTimesVoteButtonsContainer" + UUID);
     //remove all children
     while (container.firstChild) {
@@ -501,9 +858,9 @@ function addVoteMessage(message, UUID) {
     thanksForVotingText.style.marginBottom = "0px";
   
     container.appendChild(thanksForVotingText);
-}
+  }
   
-function vote(type, UUID) {
+  function vote(type, UUID) {
     //add loading info
     addVoteMessage("Loading...", UUID)
   
@@ -522,15 +879,25 @@ function vote(type, UUID) {
           //failure: duplicate vote
           addVoteMessage("You have already voted this way before.", UUID)
         } else if (response.successType == -1) {
-        //failure: duplicate vote
-        addVoteMessage("A connection error has occured.", UUID)
+          if (response.statusCode == 502) {
+            addVoteMessage("It seems the sever is down. Contact the dev immediately.", UUID)
+          } else {
+            //failure: unknown error
+            addVoteMessage("A connection error has occured. Error code: " + response.statusCode, UUID)
+          }
         }
       }
     });
-}
+  }
   
-//converts time in seconds to minutes:seconds
-function getFormattedTime(seconds) {
+  function hideDiscordButton() {
+    chrome.storage.sync.set({"hideDiscordLink": false});
+  
+    SB.discordButtonContainer.style.display = "none";
+  }
+  
+  //converts time in seconds to minutes:seconds
+  function getFormattedTime(seconds) {
     let minutes = Math.floor(seconds / 60);
     let secondsDisplay = Math.round(seconds - minutes * 60);
     if (secondsDisplay < 10) {
@@ -541,9 +908,27 @@ function getFormattedTime(seconds) {
     let formatted = minutes+ ":" + secondsDisplay;
   
     return formatted;
-}
+  }
   
-function sendRequestToServer(type, address, callback) {
+  //converts time in seconds to minutes
+  function getTimeInMinutes(seconds) {
+    let minutes = Math.floor(seconds / 60);
+  
+    return minutes;
+  }
+  
+  //converts time in seconds to seconds past the last minute
+  function getTimeInFormattedSeconds(seconds) {
+    let secondsFormatted = (seconds % 60).toFixed(3);
+  
+    if (secondsFormatted < 10) {
+      secondsFormatted = "0" + secondsFormatted;
+    }
+  
+    return secondsFormatted;
+  }
+  
+  function sendRequestToServer(type, address, callback) {
     let xmlhttp = new XMLHttpRequest();
   
     xmlhttp.open(type, serverAddress + address, true);
@@ -560,10 +945,23 @@ function sendRequestToServer(type, address, callback) {
   
     //submit this request
     xmlhttp.send();
-}
+  }
   
-function getYouTubeVideoID(url) { // Return video id or false
+  function getYouTubeVideoID(url) { // Returns with video id else returns false
     var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
     var match = url.match(regExp);
-  return (match && match[7].length == 11) ? match[7] : false;
+    var id = new URL(url).searchParams.get("v");
+    return (match && match[7].length == 11) ? id : false;
+  }
+  
+//end of function
 }
+
+if (chrome.tabs != undefined) {
+  //add the width restriction (because Firefox)
+  document.getElementById("sponorBlockStyleSheet").sheet.insertRule('.popupBody { width: 300 }', 0);
+
+  //this means it is actually opened in the popup
+  runThePopup();
+}
+