Merge pull request #56 from ajayyy/experimental

Added help page on install

.gitignore

@@ -0,0 +1,2 @@
+config.js
+ignored

ContentScript.js

@@ -1,40 +0,0 @@
-if(id = youtube_parser(document.URL)){ // Direct Links
-	SponsorsLookup(id);
-}
-
-
-chrome.runtime.onMessage.addListener( // Detect URL Changes
-  function(request, sender, sendResponse) {
-    if (request.message === 'ytvideoid') { // Message from background script
-        SponsorsLookup(request.id);
-    }
-});
-
-function SponsorsLookup(id) {
-    v = document.querySelector('video') // Youtube video player
-    var xmlhttp = new XMLHttpRequest();
-    xmlhttp.open('GET', 'https://officialnoob.github.io/YTSponsorSkip-Dataset/' + id, true); // Dataset lookup
-    xmlhttp.onreadystatechange = function () {
-        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-            Sponsors = JSON.parse(xmlhttp.responseText);
-            v.ontimeupdate = function () { // If exists add event to run on the videos "ontimeupdate"
-                SponsorCheck(Sponsors);
-            };
-        }
-    };
-    xmlhttp.send(null);
-}
-
-function SponsorCheck(Sponsors) { // Video skipping
-    Sponsors.forEach(function (el, index) { // Foreach Sponsor in video
-        if ((Math.floor(v.currentTime)) == el[0]) { // Check time has sponsor
-            v.currentTime = el[1]; // Set new time
-        }
-    });
-}
-
-function youtube_parser(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;
-}

LICENSE

@@ -1,4 +1,8 @@
-                    GNU GENERAL PUBLIC LICENSE
+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
 
  Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
@@ -651,8 +655,9 @@ Also add information on how to contact you by electronic and paper mail.
 
   If the program does terminal interaction, make it output a short
 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

@@ -1,3 +1,38 @@
-# YTSponsorSkip
-Skip YouTube video sponsors (chrome extension) Dataset:
-https://github.com/OfficialNoob/YTSponsorSkip-Dataset
+![Logo](icons/LogoSponsorBlocker256px.png)
+<br/><sub>Logo by [@munadikieh](https://github.com/munadikieh)</sub>
+
+# SponsorBlock
+
+SponsorBlock is an extension that will skip over sponsored segments of YouTube videos. SponsorBlock is a crowdsourced browser extension that let's anyone submit the start and end time's of sponsored segments of YouTube videos. Once one person submits this information, everyone else with this extension will skip right over the sponsored segment.
+
+# Available for Chrome and Firefox
+
+Chrome: https://chrome.google.com/webstore/detail/ajjollijmimolcncegpgkbilohbhjnhi
+
+Firefox: https://addons.mozilla.org/addon/sponsorblock/
+
+# Server
+
+The backend server code is available here: https://github.com/ajayyy/SponsorBlockServer
+
+It is a simple Sqlite database that will hold all the timing data.
+
+To make sure that this project doesn't die, I have made the database publicly downloadable at https://sponsor.ajay.app/database.db. So, you can download a backup or get archive.org to take a backup if you do desire.
+
+Hopefully this project can be combined with projects like [this](https://github.com/Sponsoff/sponsorship_remover) and use this data to create a neural network to predict when sponsored segments happen. That project is sadly abandoned now, so I have decided to attempt to revive this idea.
+
+# Previous extension
+
+This project is partially based off of [this experimental extension](https://github.com/OfficialNoob/YTSponsorSkip). That extension has the basic video skipping functionality.
+
+# Build Yourself
+
+You can load this project as an unpacked extension. Make sure to rename the `config.js.example` file to `config.js` before installing.
+
+# Credit
+
+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

@@ -1,15 +1,268 @@
-chrome.tabs.onUpdated.addListener( // On tab update
-  function(tabId, changeInfo, tab) {
-    if (changeInfo.url && id = youtube_parser(changeInfo.url)) { // If URL changed and is youtube video message ContentScript the video id
-      chrome.tabs.sendMessage( tabId, {
-        message: 'ytvideoid',
-        id: id
-      })
-    }
+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) {
+    chrome.tabs.get(activeInfo.tabId, function(tab) {
+      let id = getYouTubeVideoID(tab.url);
+
+      //if this even is a YouTube tab
+      if (id) {
+        videoIDChange(id, activeInfo.tabId);
+      }
+    })
   }
 );
-function youtube_parser(url) { // Return video id or 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;
+
+//when a tab changes URLs
+chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
+    if (changeInfo != undefined && changeInfo.url != undefined) {
+      let id = getYouTubeVideoID(changeInfo.url);
+
+      //if URL changed and is youtube video message contentScript the video id
+      if (changeInfo.url && id) { 
+        videoIDChange(id, tabId);
+      }
+    }
+});
+
+chrome.runtime.onMessage.addListener(function (request, sender, callback) {
+  if (request.message == "submitTimes") {
+    submitTimes(request.videoID, callback);
+
+    //this allows the callback to be called later by the submitTimes function
+    return true;
+  } else if (request.message == "addSponsorTime") {
+    addSponsorTime(request.time, request.videoID);
+  } else if (request.message == "getSponsorTimes") {
+    getSponsorTimes(request.videoID, function(sponsorTimes) {
+      callback({
+        sponsorTimes: sponsorTimes
+      })
+    });
+
+    //this allows the callback to be called later
+    return true;
+  } else if (request.message == "submitVote") {
+    submitVote(request.type, request.UUID, callback);
+
+    //this allows the callback to be called later
+    return true;
+  }
+});
+
+//add help page on install
+chrome.runtime.onInstalled.addListener(function (object) {
+  chrome.storage.sync.get(["shownInstallPage"], function(result) {
+    let shownInstallPage = result.shownInstallPage;
+    if (shownInstallPage == undefined || !shownInstallPage) {
+      //open up the install page
+      chrome.tabs.create({url: chrome.extension.getURL("/help/index.html")});
+
+      //save that this happened
+      chrome.storage.sync.set({shownInstallPage: true});
+    }
+  });
+});
+
+//gets the sponsor times from memory
+function getSponsorTimes(videoID, callback) {
+  let sponsorTimes = [];
+  let sponsorTimeKey = "sponsorTimes" + videoID;
+  chrome.storage.sync.get([sponsorTimeKey], function(result) {
+    let sponsorTimesStorage = result[sponsorTimeKey];
+    if (sponsorTimesStorage != undefined && sponsorTimesStorage.length > 0) {
+      sponsorTimes = sponsorTimesStorage;
+    }
+
+    callback(sponsorTimes)
+  });
 }
+
+function addSponsorTime(time, videoID) {
+  getSponsorTimes(videoID, function(sponsorTimes) {
+    //add to sponsorTimes
+    if (sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length < 2) {
+      //it is an end time
+      sponsorTimes[sponsorTimes.length - 1][1] = time;
+    } else {
+      //it is a start time
+      let sponsorTimesIndex = sponsorTimes.length;
+      sponsorTimes[sponsorTimesIndex] = [];
+
+      sponsorTimes[sponsorTimesIndex][0] = time;
+    }
+
+    //save this info
+    let sponsorTimeKey = "sponsorTimes" + videoID;
+    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
+  });
+}
+
+function submitVote(type, UUID, callback) {
+  getUserID(function(userID) {
+    //publish this vote
+    sendRequestToServer('GET', "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + "&type=" + type, function(xmlhttp, error) {
+      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+        callback({
+          successType: 1
+        });
+      } else if (xmlhttp.readyState == 4 && xmlhttp.status == 405) {
+        //duplicate vote
+        callback({
+          successType: 0,
+          statusCode: xmlhttp.status
+        });
+      } else if (error) {
+        //error while connect
+        callback({
+          successType: -1,
+          statusCode: xmlhttp.status
+        });
+      }
+    })
+  })
+}
+
+function submitTimes(videoID, callback) {
+  //get the video times from storage
+  let sponsorTimeKey = 'sponsorTimes' + videoID;
+  chrome.storage.sync.get([sponsorTimeKey], function(result) {
+    let sponsorTimes = result[sponsorTimeKey];
+
+    if (sponsorTimes != undefined && sponsorTimes.length > 0) {
+      //submit these times
+      for (let i = 0; i < sponsorTimes.length; i++) {
+        getUserID(function(userIDStorage) {
+          //submit the sponsorTime
+          sendRequestToServer('GET', "/api/postVideoSponsorTimes?videoID=" + videoID + "&startTime=" + sponsorTimes[i][0] + "&endTime=" + sponsorTimes[i][1]
+          + "&userID=" + userIDStorage, function(xmlhttp, error) {
+            if (xmlhttp.readyState == 4 && !error) {
+              callback({
+                statusCode: xmlhttp.status
+              });
+            } else if (error) {
+              callback({
+                statusCode: -1
+              });
+            }
+          });
+        });
+      }
+
+      //add these to the storage log
+      chrome.storage.sync.get(["sponsorTimesContributed"], function(result) {
+        let currentContributionAmount = 0;
+        if (result.sponsorTimesContributed != undefined) {
+          //current contribution amount is known
+          currentContributionAmount = result.sponsorTimesContributed;
+        }
+
+        //save the amount contributed
+        chrome.storage.sync.set({"sponsorTimesContributed": currentContributionAmount + sponsorTimes.length});
+      });
+    }
+  });
+}
+
+function videoIDChange(currentVideoID, tabId) {
+  //send a message to the content script
+  chrome.tabs.sendMessage(tabId, {
+    message: 'ytvideoid',
+    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
+    let sponsorTimeKey = 'sponsorTimes' + previousVideoID;
+    chrome.storage.sync.get([sponsorTimeKey], function(result) {
+      let sponsorTimes = result[sponsorTimeKey];
+
+      if (sponsorTimes != undefined && sponsorTimes.length > 0) {
+        //warn them that they have unsubmitted sponsor times
+        chrome.notifications.create("stillThere" + Math.random(), {
+          type: "basic",
+          title: "Do you want to submit the sponsor times for watch?v=" + previousVideoID + "?",
+          message: "You seem to have left some sponsor times unsubmitted. Go back to that page to submit them (they are not deleted).",
+          iconUrl: "./icons/LogoSponsorBlocker256px.png"
+        });
+      }
+
+      //set the previous video id to the currentID
+      previousVideoID = currentVideoID;
+    });
+  } else {
+    previousVideoID = currentVideoID;
+  }
+}
+
+function getUserID(callback) {
+  if (userID != null) {
+    callback(userID);
+    return;
+  }
+
+  //if it is not cached yet, grab it from storage
+  chrome.storage.sync.get(["userID"], function(result) {
+    let userIDStorage = result.userID;
+    if (userIDStorage != undefined) {
+      userID = userIDStorage;
+      callback(userID);
+    } else {
+      //double check if a UUID hasn't been created since this was first called
+      if (userID != null) {
+        callback(userID);
+        return;
+      }
+
+      //generate a userID
+      userID = generateUUID();
+      
+      //save this UUID
+      chrome.storage.sync.set({"userID": userID});
+
+      callback(userID);
+    }
+  });
+}
+
+function sendRequestToServer(type, address, callback) {
+  let xmlhttp = new XMLHttpRequest();
+
+  xmlhttp.open(type, serverAddress + address, true);
+
+  if (callback != undefined) {
+    xmlhttp.onreadystatechange = function () {
+      callback(xmlhttp, false);
+    };
+  
+    xmlhttp.onerror = function(ev) {
+      callback(xmlhttp, true);
+    };
+  }
+
+  //submit this request
+  xmlhttp.send();
+}
+
+function getYouTubeVideoID(url) { // Return video id or 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;
+}
+
+//uuid generator function from https://gist.github.com/jed/982883
+function generateUUID(a){return a?(a^Math.random()*16>>a/4).toString(16):([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,generateUUID)}

config.js.example

@@ -0,0 +1,3 @@
+//this file is loaded along iwth content.js
+//this file sets the server to connect to, and is gitignored
+var serverAddress = "https://sponsor.ajay.app";

content.css

@@ -0,0 +1,207 @@
+.popup {
+    z-index: 10;
+    width: 100%;
+    height: 500px;
+}
+
+.smallLink {
+	font-size: 10px;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.playerButtonImage {
+	height: 60%;
+	top: 0;
+	bottom: 0;
+	display: block;
+	margin: auto;
+}
+
+.playerButton {
+	vertical-align: top;
+}
+
+.sponsorSkipObject {
+    font-family: 'Source Sans Pro', sans-serif;
+}
+
+.sponsorSkipLogo {
+	height: 64px;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto;
+	margin-left: 10px;
+}
+
+@keyframes fadeIn {
+	from { opacity: 0; }
+	  to { opacity: 1; }
+}
+
+.sponsorSkipNotice {
+    min-height: 165px;
+    min-width: 400px;
+    background-color: rgba(255, 217, 217, 0.8);
+    position: absolute;
+	z-index: 1;
+	border: 3px solid rgba(0, 0, 0, 0.8);
+	margin-top: -50px;
+
+	animation: fadeIn 0.5s;
+}
+
+/* if two are very close to eachother */
+.secondSkipNotice {
+	margin-left: 500px;
+
+  	transition: margin-left 0.2s;
+}
+
+.sponsorSkipMessage {
+    font-size: 18px;
+    color: #000000;
+    text-align: center;
+    margin-top: 10px;
+	font-weight: bold;
+	margin-top: 4px;
+}
+
+.sponsorSkipInfo {
+	font-size: 10px;
+    color: #000000;
+	text-align: center;
+	margin-top: 0px;
+}
+
+#sponsorTimesThanksForVotingText {
+	font-size: 20px;
+	font-weight: bold;
+    color: #000000;
+	text-align: center;
+	margin-top: 0px;
+	margin-bottom: 0px;
+}
+
+#sponsorTimesThanksForVotingInfoText {
+	font-size: 12px;
+	font-weight: bold;
+    color: #000000;
+	text-align: center;
+	margin-top: 0px;
+}
+
+.sponsorTimesInfoMessage {
+	font-size: 15px;
+	font-weight: bold;
+    color: #000000;
+	text-align: center;
+}
+
+.voteButton {
+	height: 32px;
+	margin-right: 15px;
+	cursor: pointer;
+}
+.voteButton:hover {
+	filter: brightness(80%);
+}
+
+.submitButton {
+	background-color:#ec1c1c;
+	-moz-border-radius:28px;
+	-webkit-border-radius:28px;
+	border-radius:28px;
+	border:1px solid #d31919;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-size:14px;
+	padding:4px 15px;
+	text-decoration:none;
+    text-shadow:0px 0px 0px #662727;
+    
+    margin-top: 5px;
+    margin-right: 15px;
+}
+.submitButton:hover {
+	background-color:#bf2a2a;
+}
+
+.submitButton:focus {
+	outline: none;
+	background-color:#bf2a2a;
+}
+
+.submitButton:active {
+	position:relative;
+	top:1px;
+}
+
+@keyframes rotate {
+	from { transform: rotate(0deg); }
+	  to { transform: rotate(360deg); }
+}
+
+.sponsorSkipButton {
+	background-color:#ec1c1c;
+	-moz-border-radius:28px;
+	-webkit-border-radius:28px;
+	border-radius:28px;
+	border:1px solid #d31919;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-size:14px;
+	padding:4px 15px;
+	text-decoration:none;
+    text-shadow:0px 0px 0px #662727;
+    
+    margin-top: 5px;
+    margin-right: 15px;
+}
+.sponsorSkipButton:hover {
+	background-color:#bf2a2a;
+}
+
+.sponsorSkipButton:focus {
+	outline: none;
+	background-color:#bf2a2a;
+}
+
+.sponsorSkipButton:active {
+	position:relative;
+	top:1px;
+}
+
+.sponsorSkipDontShowButton {
+	-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;
+	background-color:#d0451b;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+	border-radius:3px;
+	border:1px solid #942911;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-size:13px;
+	padding:6px 24px;
+	text-decoration:none;
+	text-shadow:0px 1px 0px #854629;
+}
+.sponsorSkipDontShowButton:hover {
+	background-color:#bc3315;
+}
+
+.sponsorSkipDontShowButton:focus {
+	outline: none;
+	background-color:#bc3315;
+}
+
+.sponsorSkipDontShowButton:active {
+	position:relative;
+	top:1px;
+}

content.js

@@ -0,0 +1,961 @@
+//was sponsor data found when doing SponsorsLookup
+var sponsorDataFound = false;
+
+//the actual sponsorTimes if loaded and UUIDs associated with them
+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;
+
+//the last time looked at (used to see if this time is in the interval)
+var lastTime = -1;
+
+//the actual time (not video time) that the last skip happened
+var lastUnixTimeSkipped = -1;
+
+//the last time in the video a sponsor was skipped
+//used for the go back button
+var lastSponsorTimeSkipped = null;
+//used for ratings
+var lastSponsorTimeSkippedUUID = null;
+
+//if showing the start sponsor button or the end sponsor button on the player
+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;
+chrome.storage.sync.get(["trackViewCount"], function(result) {
+  let trackViewCountStorage = result.trackViewCount;
+  if (trackViewCountStorage != undefined) {
+    trackViewCount = trackViewCountStorage;
+  } else {
+    trackViewCount = true;
+  }
+});
+
+//if the notice should not be shown
+//happens when the user click's the "Don't show notice again" button
+var dontShowNotice = false;
+chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
+  let dontShowNoticeAgain = result.dontShowNoticeAgain;
+  if (dontShowNoticeAgain != undefined) {
+    dontShowNotice = dontShowNoticeAgain;
+  }
+});
+
+//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);
+    }
+
+    //messages from popup script
+    if (request.message == "sponsorStart") {
+      sponsorMessageStarted(sendResponse);
+    }
+
+    if (request.message == "isInfoFound") {
+      //send the sponsor times along with if it's found
+      sendResponse({
+        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") {
+      sendResponse({
+        videoID: getYouTubeVideoID(document.URL)
+      })
+    }
+
+    if (request.message == "showNoticeAgain") {
+      dontShowNotice = false;
+    }
+
+    if (request.message == "changeStartSponsorButton") {
+      changeStartSponsorButton(request.showStartSponsor, request.uploadButtonVisible);
+    }
+
+    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){
+  e = e || window.event;
+  var key = e.which || e.keyCode;
+
+  let video = document.getElementById("movie_player");
+
+  //is the video in focus, otherwise they could be typing a comment
+  if (document.activeElement === video) {
+    if(key == 186){
+      //semicolon
+      startSponsorClicked();
+    } else if (key == 222) {
+      //single quote
+      submitSponsorTimes();
+    }
+  }
+}
+
+function videoIDChange(id) {
+  //not a url change
+  if (sponsorVideoID == id){
+    return;
+  }
+
+  //reset last sponsor times
+  lastTime = -1;
+  lastUnixTimeSkipped = -1;
+
+  //reset sponsor times
+  sponsorTimes = null;
+  UUIDs = null;
+  sponsorVideoID = id;
+
+  //reset sponsor data found check
+  sponsorDataFound = false;
+  sponsorsLookup(id);
+
+  //see if the onvideo control image needs to be changed
+  chrome.runtime.sendMessage({
+    message: "getSponsorTimes",
+    videoID: id
+  }, function(response) {
+    if (response != undefined) {
+      let sponsorTimes = response.sponsorTimes;
+      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 controls buttons should be added
+  chrome.storage.sync.get(["hideVideoPlayerControls"], function(result) {
+    if (result.hideVideoPlayerControls != undefined) {
+      hideVideoPlayerControls = result.hideVideoPlayerControls;
+    }
+
+    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) {
+    v = document.querySelector('video') // Youtube video player
+    
+    //check database for sponsor times
+    sendRequestToServer('GET', "/api/getVideoSponsorTimes?videoID=" + id, function(xmlhttp) {
+      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+        sponsorDataFound = true;
+
+        sponsorTimes = JSON.parse(xmlhttp.responseText).sponsorTimes;
+        UUIDs = JSON.parse(xmlhttp.responseText).UUIDs;
+
+        // If the sponsor data exists, add the event to run on the videos "ontimeupdate"
+        v.ontimeupdate = function () { 
+            sponsorCheck(sponsorTimes);
+        };
+      } else if (xmlhttp.readyState == 4) {
+        sponsorDataFound = false;
+
+        //check if this video was uploaded recently
+        //use the invidious api to get the time published
+        sendRequestToCustomServer('GET', "https://invidio.us/api/v1/videos/" + id, function(xmlhttp, error) {
+          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+            let unixTimePublished = JSON.parse(xmlhttp.responseText).published;
+
+            //if less than 3 days old
+            if ((Date.now() / 1000) - unixTimePublished < 259200) {
+              setTimeout(() => sponsorsLookup(id), 10000);
+            }
+          }
+        });
+      }
+    });
+}
+
+function sponsorCheck(sponsorTimes) { // Video skipping
+  //see if any sponsor start time was just passed
+  for (let i = 0; i < sponsorTimes.length; i++) {
+    //this means part of the video was just skipped
+    if (Math.abs(v.currentTime - lastTime) > 1 && lastTime != -1) {
+      //make lastTime as if the video was playing normally
+      lastTime = v.currentTime - 0.0001;
+    }
+
+    let currentTime = Date.now();
+
+    //If the sponsor time is in between these times, skip it
+    //Checks if the last time skipped to is not too close to now, to make sure not to get too many
+    //  sponsor times in a row (from one troll)
+    //the last term makes 0 second start times possible
+    if ((Math.abs(v.currentTime - sponsorTimes[i][0]) < 0.3 && sponsorTimes[i][0] >= lastTime && sponsorTimes[i][0] <= v.currentTime
+          && (lastUnixTimeSkipped == -1 || currentTime - lastUnixTimeSkipped > 500)) || (lastTime == -1 && sponsorTimes[i][0] == 0)) {
+      //skip it
+      v.currentTime = sponsorTimes[i][1];
+
+      lastSponsorTimeSkipped = sponsorTimes[i][0];
+      
+      let currentUUID =  UUIDs[i];
+      lastSponsorTimeSkippedUUID = currentUUID; 
+
+      //send out the message saying that a sponsor message was skipped
+      openSkipNotice(currentUUID);
+
+      setTimeout(() => closeSkipNotice(currentUUID), 7000);
+
+      //send telemetry that a this sponsor was skipped happened
+      if (trackViewCount) {
+        sendRequestToServer("GET", "/api/viewedVideoSponsorTime?UUID=" + currentUUID);
+      }
+    }
+  }
+
+  //don't keep track until they are loaded in
+  if (sponsorTimes.length > 0) {
+    lastTime = v.currentTime;
+  }
+}
+
+function goBackToPreviousTime(UUID) {
+  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;
+
+    closeSkipNotice(UUID);
+  }
+}
+
+//Adds a sponsorship starts button to the player controls
+function addPlayerControlsButton() {
+  if (document.getElementById("startSponsorButton") != null) {
+    //it's already added
+    return;
+  }
+
+  let startSponsorButton = document.createElement("button");
+  startSponsorButton.id = "startSponsorButton";
+  startSponsorButton.className = "ytp-button playerButton";
+  startSponsorButton.setAttribute("title", "Sponsor Starts Now");
+  startSponsorButton.addEventListener("click", startSponsorClicked);
+
+  let startSponsorImage = document.createElement("img");
+  startSponsorImage.id = "startSponsorImage";
+  startSponsorImage.className = "playerButtonImage";
+  startSponsorImage.src = chrome.extension.getURL("icons/PlayerStartIconSponsorBlocker256px.png");
+
+  //add the image to the button
+  startSponsorButton.appendChild(startSponsorImage);
+
+  let referenceNode = document.getElementsByClassName("ytp-right-controls")[0];
+  
+  referenceNode.prepend(startSponsorButton);
+}
+
+function removePlayerControlsButton() {
+  document.getElementById("startSponsorButton").style.display = "none";
+  document.getElementById("submitButton").style.display = "none";
+}
+
+//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
+  chrome.runtime.sendMessage({
+    message: "addSponsorTime",
+    time: v.currentTime,
+    videoID: getYouTubeVideoID(document.URL)
+  });
+}
+
+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 && !hideInfoButtonPlayerControls) {
+      document.getElementById("submitButton").style.display = "unset";
+    } else if (!uploadButtonVisible) {
+      //disable submit button
+      document.getElementById("submitButton").style.display = "none";
+    }
+  } 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";
+  }
+}
+
+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) {
+    //it's already added
+    return;
+  }
+  
+  //make a submit button
+  let submitButton = document.createElement("button");
+  submitButton.id = "submitButton";
+  submitButton.className = "ytp-button playerButton";
+  submitButton.setAttribute("title", "Submit Sponsor Times");
+  submitButton.addEventListener("click", submitSponsorTimes);
+  //hide it at the start
+  submitButton.style.display = "none";
+
+  let submitImage = document.createElement("img");
+  submitImage.id = "submitButtonImage";
+  submitImage.className = "playerButtonImage";
+  submitImage.src = chrome.extension.getURL("icons/PlayerUploadIconSponsorBlocker256px.png");
+
+  //add the image to the button
+  submitButton.appendChild(submitImage);
+
+  let referenceNode = document.getElementsByClassName("ytp-right-controls")[0];
+  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) {
+    //don't show, return
+    return;
+  }
+
+  //check if page is loaded yet (for 0 second sponsors, the page might not be loaded yet)
+  //it looks for the view count div and sees if it is full yet
+  //querySelectorAll is being used like findElementById for multiple objects, because for
+  //some reason YouTube has put more than one object with one ID.
+  let viewCountNode = document.querySelectorAll("#count");
+  //check to see if the length is over zero, otherwise it's a different YouTube theme probably
+  if (viewCountNode.length > 0) {
+    //check if any of these have text
+    let viewCountVisible = false;
+    for (let i = 0; i < viewCountNode.length; i++) {
+      if (viewCountNode[i].innerText != null) {
+        viewCountVisible = true;
+        break;
+      }
+    }
+    if (!viewCountVisible) {
+      //this is the new YouTube layout and it is still loading
+      //wait a bit for opening the notice
+      setTimeout(() => openSkipNotice(UUID), 200);
+      return;
+    }
+  }
+
+  let amountOfPreviousNotices = document.getElementsByClassName("sponsorSkipNotice").length;
+
+  if (amountOfPreviousNotices > 0) {
+    //already exists
+
+    let previousNotice = document.getElementsByClassName("sponsorSkipNotice")[0];
+    previousNotice.classList.add("secondSkipNotice")
+  }
+
+  let noticeElement = document.createElement("div");
+  //what sponsor time this is about
+  noticeElement.id = "sponsorSkipNotice" + UUID;
+  noticeElement.classList.add("sponsorSkipObject");
+  noticeElement.classList.add("sponsorSkipNotice");
+  noticeElement.style.zIndex = 5 + amountOfPreviousNotices;
+
+  let logoElement = document.createElement("img");
+  logoElement.id = "sponsorSkipLogo" + UUID;
+  logoElement.className = "sponsorSkipLogo";
+  logoElement.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png");
+
+  let noticeMessage = document.createElement("div");
+  noticeMessage.id = "sponsorSkipMessage" + UUID;
+  noticeMessage.classList.add("sponsorSkipMessage");
+  noticeMessage.classList.add("sponsorSkipObject");
+  noticeMessage.innerText = "Hey, you just skipped a sponsor!";
+  
+  let noticeInfo = document.createElement("p");
+  noticeInfo.id = "sponsorSkipInfo" + UUID;
+  noticeInfo.classList.add("sponsorSkipInfo");
+  noticeInfo.classList.add("sponsorSkipObject");
+  noticeInfo.innerText = "This message will disapear in 7 seconds";
+  
+  //thumbs up and down buttons
+  let voteButtonsContainer = document.createElement("div");
+  voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID;
+  voteButtonsContainer.setAttribute("align", "center");
+
+  let upvoteButton = document.createElement("img");
+  upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
+  upvoteButton.className = "sponsorSkipObject voteButton";
+  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 = "sponsorSkipObject voteButton";
+  downvoteButton.src = chrome.extension.getURL("icons/downvote.png");
+  downvoteButton.addEventListener("click", () => vote(0, UUID));
+
+  //add thumbs up and down buttons to the container
+  voteButtonsContainer.appendChild(upvoteButton);
+  voteButtonsContainer.appendChild(downvoteButton);
+
+  let buttonContainer = document.createElement("div");
+  buttonContainer.setAttribute("align", "center");
+
+  let goBackButton = document.createElement("button");
+  goBackButton.innerText = "Go back";
+  goBackButton.className = "sponsorSkipButton";
+  goBackButton.addEventListener("click", () => goBackToPreviousTime(UUID));
+
+  let hideButton = document.createElement("button");
+  hideButton.innerText = "Dismiss";
+  hideButton.className = "sponsorSkipButton";
+  hideButton.addEventListener("click", () => closeSkipNotice(UUID));
+
+  let dontShowAgainButton = document.createElement("button");
+  dontShowAgainButton.innerText = "Don't Show This Again";
+  dontShowAgainButton.className = "sponsorSkipDontShowButton";
+  dontShowAgainButton.addEventListener("click", dontShowNoticeAgain);
+
+  buttonContainer.appendChild(goBackButton);
+  buttonContainer.appendChild(hideButton);
+  buttonContainer.appendChild(document.createElement("br"));
+  buttonContainer.appendChild(document.createElement("br"));
+  buttonContainer.appendChild(dontShowAgainButton);
+
+  noticeElement.appendChild(logoElement);
+  noticeElement.appendChild(noticeMessage);
+  noticeElement.appendChild(noticeInfo);
+  noticeElement.appendChild(voteButtonsContainer);
+  noticeElement.appendChild(buttonContainer);
+
+  let referenceNode = document.getElementById("info");
+  if (referenceNode == null) {
+    //old YouTube
+    referenceNode = document.getElementById("watch-header");
+  }
+  referenceNode.prepend(noticeElement);
+}
+
+function afterDownvote(UUID) {
+  //change text to say thanks for voting
+  //remove buttons
+  let upvoteButton = document.getElementById("sponsorTimesUpvoteButtonsContainer" + UUID);
+  let downvoteButton = document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID);
+  if (upvoteButton != null) {
+    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(upvoteButton);
+  }
+  if (downvoteButton != null) {
+    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(downvoteButton);
+  }
+
+  let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + UUID);
+  if (previousInfoMessage != null) {
+    //remove it
+    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(previousInfoMessage);
+  }
+
+  //add thanks for voting text
+  let thanksForVotingText = document.createElement("p");
+  thanksForVotingText.id = "sponsorTimesThanksForVotingText";
+  thanksForVotingText.innerText = "Thanks for voting!"
+
+  //add extra info for voting
+  let thanksForVotingInfoText = document.createElement("p");
+  thanksForVotingInfoText.id = "sponsorTimesThanksForVotingInfoText";
+  thanksForVotingInfoText.innerText = "Hit go back to get to where you came from."
+
+  //add element to div
+  document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingText);
+  document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingInfoText);
+}
+
+function addLoadingInfo(message, UUID) {
+  //change text to say thanks for message
+  //remove buttons
+  let upvoteButton = document.getElementById("sponsorTimesUpvoteButtonsContainer" + UUID);
+  let downvoteButton = document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID);
+  if (upvoteButton != null) {
+    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(upvoteButton);
+  }
+  if (downvoteButton != null) {
+    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(downvoteButton);
+  }
+
+  let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + UUID);
+  if (previousInfoMessage != null) {
+    //remove it
+    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(previousInfoMessage);
+  }
+
+  //add thanks for voting text
+  let thanksForVotingText = document.createElement("p");
+  thanksForVotingText.id = "sponsorTimesInfoMessage" + UUID;
+  thanksForVotingText.className = "sponsorTimesInfoMessage";
+  thanksForVotingText.innerText = message;
+
+  //add element to div
+  document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingText);
+}
+
+function vote(type, UUID) {
+  //add loading info
+  addLoadingInfo("Loading...", UUID)
+
+  chrome.runtime.sendMessage({
+    message: "submitVote",
+    type: type,
+    UUID: UUID
+  }, function(response) {
+    if (response != undefined) {
+      //see if it was a success or failure
+      if (response.successType == 1) {
+        //success
+        if (type == 0) {
+          afterDownvote(UUID);
+        } else if (type == 1) {
+          closeSkipNotice(UUID);
+        }
+      } else if (response.successType == 0) {
+        //failure: duplicate vote
+        addLoadingInfo("It seems you've already voted before", UUID)
+      } else if (response.successType == -1) {
+        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)
+        }
+        
+      }
+    }
+  });
+}
+
+//Closes the notice that tells the user that a sponsor was just skipped for this UUID
+function closeSkipNotice(UUID){
+  let notice = document.getElementById("sponsorSkipNotice" + UUID);
+  if (notice != null) {
+    notice.remove();
+  }
+}
+
+//Closes all notices that tell the user that a sponsor was just skipped
+function closeAllSkipNotices(){
+  let notices = document.getElementsByClassName("sponsorSkipNotice");
+  for (let i = 0; i < notices.length; i++) {
+    notices[i].remove();
+  }
+}
+
+function dontShowNoticeAgain() {
+  chrome.storage.sync.set({"dontShowNoticeAgain": true});
+
+  dontShowNotice = true;
+
+  closeAllSkipNotices();
+}
+
+function sponsorMessageStarted(callback) {
+    let v = document.querySelector('video');
+
+    //send back current 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";
+
+  let currentVideoID = getYouTubeVideoID(document.URL);
+
+  chrome.runtime.sendMessage({
+    message: "submitTimes",
+    videoID: currentVideoID
+  }, function(response) {
+    if (response != undefined) {
+      if (response.statusCode == 200) {
+        //hide loading message
+        let submitButton = document.getElementById("submitButton");
+        //finish this animation
+        submitButton.style.animation = "rotate 1s";
+        //when the animation is over, hide the button
+        submitButton.addEventListener("animationend", function() {
+          submitButton.style.animation = "unset";
+          submitButton.style.display = "none";
+        });
+
+        //clear the sponsor times
+        let sponsorTimeKey = "sponsorTimes" + currentVideoID;
+        chrome.storage.sync.set({[sponsorTimeKey]: []});
+      } else {
+        //for a more detailed error message, they should check the popup
+        //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();
+
+  xmlhttp.open(type, serverAddress + address, true);
+
+  if (callback != undefined) {
+    xmlhttp.onreadystatechange = function () {
+      callback(xmlhttp, false);
+    };
+  
+    xmlhttp.onerror = function(ev) {
+      callback(xmlhttp, true);
+    };
+  }
+
+  //submit this request
+  xmlhttp.send();
+}
+
+function sendRequestToCustomServer(type, fullAddress, callback) {
+  let xmlhttp = new XMLHttpRequest();
+
+  xmlhttp.open(type, fullAddress, true);
+
+  if (callback != undefined) {
+    xmlhttp.onreadystatechange = function () {
+      callback(xmlhttp, false);
+    };
+  
+    xmlhttp.onerror = function(ev) {
+      callback(xmlhttp, true);
+    };
+  }
+
+  //submit this request
+  xmlhttp.send();
+}
+
+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);
+  var id = new URL(url).searchParams.get("v");
+  return (match && match[7].length == 11) ? id : false;
+}

firefox_manifest.json

@@ -0,0 +1,68 @@
+{
+  "name": "SponsorBlock - YouTube Sponsorship Blocker",
+  "short_name": "SponsorBlock",
+  "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": [
+    {
+      "matches": [
+        "https://*.youtube.com/*"
+      ],
+      "js": [
+        "config.js",
+        "content.js",
+        "popup.js"
+      ],
+      "css": [
+        "content.css",
+        "./libs/Source+Sans+Pro.css",
+        "popup.css"
+      ]
+    }
+  ],
+  "web_accessible_resources": [
+    "icons/LogoSponsorBlocker256px.png",
+    "icons/IconSponsorBlocker256px.png",
+    "icons/PlayerStartIconSponsorBlocker256px.png",
+    "icons/PlayerStopIconSponsorBlocker256px.png",
+    "icons/PlayerUploadIconSponsorBlocker256px.png",
+    "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
+    "icons/upvote.png",
+    "icons/downvote.png",
+    "icons/PlayerInfoIconSponsorBlocker256px.png",
+    "icons/PlayerDeleteIconSponsorBlocker256px.png",
+    "popup.html",
+    "help/index.html",
+    "help/style.css"
+  ],
+  "permissions": [
+    "tabs",
+    "storage",
+    "notifications",
+    "https://sponsor.ajay.app/*"
+  ],
+  "browser_action": {
+    "default_title": "SponsorBlock",
+    "default_popup": "popup.html"
+  }, 
+  "background": {
+    "scripts":[
+      "config.js",
+      "background.js"
+    ]
+  },
+  "icons": {
+    "16": "icons/IconSponsorBlocker16px.png",
+    "32": "icons/IconSponsorBlocker32px.png",
+    "64": "icons/LogoSponsorBlocker64px.png",
+    "128": "icons/LogoSponsorBlocker128px.png",
+    "256": "icons/LogoSponsorBlocker256px.png"
+  },
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "sponsorBlocker@ajay.app",
+      "strict_min_version": "57.0"
+    }
+  },
+  "manifest_version": 2
+}

help/index.html

@@ -0,0 +1,122 @@
+<head>
+  <title> SponsorBlock </title>
+
+  <link href="styles.css" rel="stylesheet"/>
+</head>
+
+<body>
+
+  <div id="title">
+    <img src="https://github.com/ajayyy/SponsorBlock/raw/master/icons/LogoSponsorBlocker256px.png" height="80" class="profilepic"/>
+    SponsorBlock
+  </div>
+
+  <center>
+
+    <p class="createdBy">Created By <a href="https://ajay.app">Ajay Ramachandran</a></p>
+
+    <p>
+        Thanks for installing SponsorBlock. Here are some quick tips for getting started. Please join the Discord if you have any questions or suggestions.
+    </p>
+
+    <p class="projectPreview">
+      <span class="projectPreviewImage">
+          <a href="https://discord.gg/QnmVMpU"><img width="80" src="https://www.logolynx.com/images/logolynx/1b/1bcc0f0aefe71b2c8ce66ffe8645d365.png"/></a>
+      </span>
+	  
+	  Come contribute, make some suggestions and help out in the Discord: <a href="https://discord.gg/QnmVMpU">https://discord.gg/QnmVMpU</a>
+    </p>
+
+    <h1>How skipping works</h1>
+
+    <p class="projectPreview">
+      <span class="projectPreviewImageLarge">
+          <img src="https://i.imgur.com/caf5Bju.png">
+      </span>
+
+      Videos will automatically be skipped if they are found in the database. You can open the popup by clicking the extension icon to get a preview of what they are.
+      
+      <br/>
+      <br/>
+      Whenever you skip a video, you will get a notice allowing you to vote on that submission. If it worked, upvote it! You can also vote in the popup.
+    </p>
+
+    <center><img height="120px" src="https://i.imgur.com/1M0WZ99.gif"></center>
+
+    <h1>Submitting</h1>
+
+    <p class="projectPreview">
+        <span class="projectPreviewImageLargeRight">
+            <img src="https://i.imgur.com/A1ilk6x.gif">
+        </span>
+  
+        Submitting can either be done in the popup by hitting the "Sponsorship Starts Now" button or in the video player with the buttons on the player.
+        
+        <br/>
+        <br/>
+
+        Clicking the play button indicated the start of a sponsorship section and clicking the stop icon indicates the end. You can prepare multiple sponsors before hitting submit. Clicking the upload button will submit. Clicking the garbage can will delete.
+    </p>
+
+    <h1>Editing</h1>
+
+    <p class="projectPreview">
+        <span class="projectPreviewImageLarge">
+            <img src="https://i.imgur.com/DZHqbsx.gif">
+        </span>
+  
+        If you messed up, you can edit or delete your sponsor times in the popup or in the info menu (by hitting the info icon).
+
+    </p>
+
+    <h1>This is too slow</h1>
+
+    <p>
+      There are hotkeys if you want to use them. You must be focused on the YouTube player to use them. Press the semicolon key to indicate the start/end of a sponsor segment and click the appostrophe to submit.
+    </p>
+
+    <h1>I hate these buttons, they are so ugly</h1>
+
+    <p>
+      All player buttons can be hidden in the options.
+    </p>
+
+    <h1>Can I get a copy of the Database? What happens if you disappear?</h1>
+
+    <p>
+      The database is public and available at <a href="https://sponsor.ajay.app/database.db">https://sponsor.ajay.app/database.db</a>. The source code is freely available. So, even if something happens to me, your submissions are not lost.
+    </p>
+
+    <h1>News and how it is made</h1>
+
+    <p>
+      See <a href="https://sponsor.ajay.app/news">https://sponsor.ajay.app/news</a>.
+    </p>
+
+    <h1>I want more features!</h1>
+
+    <p>
+      Ask on Discord or make an Issue on GitHub. I am happy to hear suggestions or improvements you want. You may also contribute code or graphics if you would like.
+    </p>
+
+    <h1>Where can I get the source code</h1>
+
+    <h4 style="display: inline">Client:</h4>
+    <!-- Github logo -->
+    <a href="https://github.com/ajayyy/SponsorBlock"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
+
+    <h4 style="display: inline; padding-left: 20px">Server:</h4>
+    <!-- Github logo -->
+    <a href="https://github.com/ajayyy/SponsorBlockServer"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
+
+    <h1>Credit</h1>
+
+    <p>The awesome <a href="https://github.com/omarroth/invidious/wiki/API">Invidious API</a> is used to grab the time the video was published.</p>
+
+    <p>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></p>
+    
+    <p>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></p>
+
+  </center>
+
+</body>

help/styles.css

@@ -0,0 +1,176 @@
+:not(.hljs-keyword):not(.hljs-comment):not(.hljs-number):not(.hljs-string):not(pre):not(code) {
+  background-color: #333333;
+}
+
+.projectPreview {
+  position: relative;
+}
+
+.projectPreviewImage {
+  position: absolute;
+  left: -90;
+  width: 80;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.projectPreviewImageLarge {
+  position: absolute;
+  left: -210;
+  width: 200;
+  top: 50%;
+  transform: translateY(-20%);
+}
+
+.projectPreviewImageLargeRight {
+  position: absolute;
+  right: -210;
+  width: 200;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.createdBy {
+  font-size: 14px;
+  text-align: center;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+#title {
+  background-color: #636363;
+
+  text-align: center;
+  vertical-align: middle;
+
+  font-family: sans-serif;
+  font-size: 50;
+  color: #212121;
+
+  /* height: 100; */
+
+  padding: 20;
+  
+  text-decoration: none;
+
+  transition: font-size 1s;
+}
+
+#title:hover {
+  font-size: 60;
+
+  transition: font-size 1s;
+}
+
+.subtitle {
+  font-family: sans-serif;
+  font-size: 40;
+  color: #dad8d8;
+
+  padding-top: 10;
+
+  transition: font-size 0.4s;
+}
+
+.subtitle:hover {
+  font-size: 45;
+
+  transition: font-size 0.4s;
+}
+
+.profilepic {
+  background-color: #636363 !important;
+  vertical-align: middle;
+}
+
+a {
+  text-decoration: underline;
+  color: inherit;
+}
+
+.link {
+  padding: 20;
+
+  height: 80px;
+
+  transition: height 0.2s;
+}
+
+.link:hover {
+  height: 95px;
+
+  transition: height 0.2s;
+}
+
+#contact,.smalllink {
+  font-family: sans-serif;
+  font-size: 25;
+  color: #e8e8e8;
+
+  text-align: center;
+  
+  padding: 10;
+}
+
+#contact {
+  text-decoration: none;
+}
+
+p,li {
+  font-family: sans-serif;
+  font-size: 20;
+  color: #c4c4c4;
+
+  padding: 10;
+}
+
+p,li,code,a {
+	max-width: 60%;
+	text-align: left;
+	overflow-wrap: break-word;
+}
+
+@media screen and (orientation:portrait) {
+  p,li,code,a {
+	max-width: 100%;
+  }
+  
+  .projectPreviewImage {
+    position: unset;
+    width: 130;
+    display: block;
+    margin: auto;
+    transform: none;
+  }
+}
+
+.previewImage {
+	max-height: 200px;
+}
+
+img {
+	max-width: 100%;
+
+	text-align: center;
+}
+
+#recentPostTitle {
+  font-family: sans-serif;
+  font-size: 30;
+  color: #dad8d8;
+}
+
+#recentPostDate {
+  font-family: sans-serif;
+  font-size: 15;
+  color: #dad8d8;
+}
+
+h1,h2,h3,h4,h5,h6 {
+  font-family: sans-serif;
+  color: #dad8d8;
+}
+
+svg {
+ text-decoration: none; 
+}

icons/upvote.svg

@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 478.2 478.2"
+   style="enable-background:new 0 0 478.2 478.2;"
+   xml:space="preserve"
+   sodipodi:docname="upvote.svg"
+   inkscape:export-filename="C:\_Projects\_____SponsorSkip\icons\upvote.png"
+   inkscape:export-xdpi="52.797993"
+   inkscape:export-ydpi="52.797993"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"><metadata
+   id="metadata41"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+   id="defs39" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1920"
+   inkscape:window-height="1001"
+   id="namedview37"
+   showgrid="false"
+   inkscape:zoom="0.98703469"
+   inkscape:cx="264.34466"
+   inkscape:cy="180.78075"
+   inkscape:window-x="-9"
+   inkscape:window-y="-9"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1" />
+<g
+   id="g4">
+	<path
+   d="M457.575,325.1c9.8-12.5,14.5-25.9,13.9-39.7c-0.6-15.2-7.4-27.1-13-34.4c6.5-16.2,9-41.7-12.7-61.5   c-15.9-14.5-42.9-21-80.3-19.2c-26.3,1.2-48.3,6.1-49.2,6.3h-0.1c-5,0.9-10.3,2-15.7,3.2c-0.4-6.4,0.7-22.3,12.5-58.1   c14-42.6,13.2-75.2-2.6-97c-16.6-22.9-43.1-24.7-50.9-24.7c-7.5,0-14.4,3.1-19.3,8.8c-11.1,12.9-9.8,36.7-8.4,47.7   c-13.2,35.4-50.2,122.2-81.5,146.3c-0.6,0.4-1.1,0.9-1.6,1.4c-9.2,9.7-15.4,20.2-19.6,29.4c-5.9-3.2-12.6-5-19.8-5h-61   c-23,0-41.6,18.7-41.6,41.6v162.5c0,23,18.7,41.6,41.6,41.6h61c8.9,0,17.2-2.8,24-7.6l23.5,2.8c3.6,0.5,67.6,8.6,133.3,7.3   c11.9,0.9,23.1,1.4,33.5,1.4c17.9,0,33.5-1.4,46.5-4.2c30.6-6.5,51.5-19.5,62.1-38.6c8.1-14.6,8.1-29.1,6.8-38.3   c19.9-18,23.4-37.9,22.7-51.9C461.275,337.1,459.475,330.2,457.575,325.1z M48.275,447.3c-8.1,0-14.6-6.6-14.6-14.6V270.1   c0-8.1,6.6-14.6,14.6-14.6h61c8.1,0,14.6,6.6,14.6,14.6v162.5c0,8.1-6.6,14.6-14.6,14.6h-61V447.3z M431.975,313.4   c-4.2,4.4-5,11.1-1.8,16.3c0,0.1,4.1,7.1,4.6,16.7c0.7,13.1-5.6,24.7-18.8,34.6c-4.7,3.6-6.6,9.8-4.6,15.4c0,0.1,4.3,13.3-2.7,25.8   c-6.7,12-21.6,20.6-44.2,25.4c-18.1,3.9-42.7,4.6-72.9,2.2c-0.4,0-0.9,0-1.4,0c-64.3,1.4-129.3-7-130-7.1h-0.1l-10.1-1.2   c0.6-2.8,0.9-5.8,0.9-8.8V270.1c0-4.3-0.7-8.5-1.9-12.4c1.8-6.7,6.8-21.6,18.6-34.3c44.9-35.6,88.8-155.7,90.7-160.9   c0.8-2.1,1-4.4,0.6-6.7c-1.7-11.2-1.1-24.9,1.3-29c5.3,0.1,19.6,1.6,28.2,13.5c10.2,14.1,9.8,39.3-1.2,72.7   c-16.8,50.9-18.2,77.7-4.9,89.5c6.6,5.9,15.4,6.2,21.8,3.9c6.1-1.4,11.9-2.6,17.4-3.5c0.4-0.1,0.9-0.2,1.3-0.3   c30.7-6.7,85.7-10.8,104.8,6.6c16.2,14.8,4.7,34.4,3.4,36.5c-3.7,5.6-2.6,12.9,2.4,17.4c0.1,0.1,10.6,10,11.1,23.3   C444.875,295.3,440.675,304.4,431.975,313.4z"
+   id="path2" />
+</g>
+<g
+   id="g6">
+</g>
+<g
+   id="g8">
+</g>
+<g
+   id="g10">
+</g>
+<g
+   id="g12">
+</g>
+<g
+   id="g14">
+</g>
+<g
+   id="g16">
+</g>
+<g
+   id="g18">
+</g>
+<g
+   id="g20">
+</g>
+<g
+   id="g22">
+</g>
+<g
+   id="g24">
+</g>
+<g
+   id="g26">
+</g>
+<g
+   id="g28">
+</g>
+<g
+   id="g30">
+</g>
+<g
+   id="g32">
+</g>
+<g
+   id="g34">
+</g>
+</svg>

libs/Source+Sans+Pro.css

@@ -0,0 +1,56 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v12/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

manifest.json

@@ -1,22 +1,62 @@
 {
-  "name": "YTSponsorSkip",
-  "version": "1.0",
-  "description": "Skip youtube video sponsors",
+  "name": "SponsorBlock for YouTube - Skip Sponsorships",
+  "short_name": "SponsorBlock",
+  "version": "1.0.23",
+  "description": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.",
   "content_scripts": [
     {
       "matches": [
         "https://*.youtube.com/*"
       ],
       "js": [
-        "ContentScript.js"
+        "config.js",
+        "content.js",
+        "popup.js"
+      ],
+      "css": [
+        "content.css",
+        "./libs/Source+Sans+Pro.css",
+        "popup.css"
       ]
     }
   ],
-  "permissions": [
-    "tabs"
+  "web_accessible_resources": [
+    "icons/LogoSponsorBlocker256px.png",
+    "icons/IconSponsorBlocker256px.png",
+    "icons/PlayerStartIconSponsorBlocker256px.png",
+    "icons/PlayerStopIconSponsorBlocker256px.png",
+    "icons/PlayerUploadIconSponsorBlocker256px.png",
+    "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
+    "icons/upvote.png",
+    "icons/downvote.png",
+    "icons/PlayerInfoIconSponsorBlocker256px.png",
+    "icons/PlayerDeleteIconSponsorBlocker256px.png",
+    "popup.html",
+    "help/index.html",
+    "help/style.css"
   ],
+  "permissions": [
+    "tabs",
+    "storage",
+    "notifications",
+    "https://sponsor.ajay.app/*"
+  ],
+  "browser_action": {
+    "default_title": "SponsorBlock",
+    "default_popup": "popup.html"
+  }, 
   "background": {
-    "scripts":["background.js"]
+    "scripts":[
+      "config.js",
+      "background.js"
+    ]
+  },
+  "icons": {
+    "16": "icons/IconSponsorBlocker16px.png",
+    "32": "icons/IconSponsorBlocker32px.png",
+    "64": "icons/LogoSponsorBlocker64px.png",
+    "128": "icons/LogoSponsorBlocker128px.png",
+    "256": "icons/LogoSponsorBlocker256px.png"
   },
   "manifest_version": 2
 }

popup.css

@@ -0,0 +1,196 @@
+/* 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.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;
+}
+
+.popupBody {
+	font-size: 14px;
+	background-color: #ffd9d9;
+	padding: 5px;
+}
+
+.recordingSubtitle.popupElement {
+	margin-bottom: 10px;
+}
+
+.voteButton.popupElement {
+	height: 32px;
+	margin-right: 15px;
+	cursor: pointer;
+}
+.voteButton:hover.popupElement {
+	filter: brightness(80%);
+}
+
+#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;
+  border-radius:28px;
+  border:1px solid #d31919;
+  display:inline-block;
+  cursor:pointer;
+  color:#ffffff;
+  font-size:16px;
+  padding:8px 37px;
+  text-decoration:none;
+  text-shadow:0px 0px 0px #662727;
+}
+.greenButton:hover.popupElement {
+  background-color:#bf2a2a;
+}
+.greenButton:focus.popupElement {
+	outline: none;
+	background-color:#bf2a2a;
+}
+.greenButton:active.popupElement {
+  position:relative;
+  top:1px;
+}
+
+.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;
+	background-color:#d0451b;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+	border-radius:3px;
+	border:1px solid #942911;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-size:13px;
+	padding:6px 24px;
+	text-decoration:none;
+	text-shadow:0px 1px 0px #854629;
+}
+.dangerButton:hover.popupElement {
+	background-color:#bc3315;
+}
+.dangerButton:focus.popupElement {
+	outline: none;
+	background-color:#bc3315;
+}
+.dangerButton:active.popupElement {
+	position:relative;
+	top:1px;
+}
+
+.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;
+	background-color:#d0821b;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+	border-radius:3px;
+	border:1px solid #948b11;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-size:13px;
+	padding:6px 24px;
+	text-decoration:none;
+	text-shadow:0px 1px 0px #856829;
+}
+.warningButton:hover.popupElement {
+	background-color:#bc8215;
+}
+.warningButton:focus.popupElement {
+	outline: none;
+	background-color:#bc8215;
+}
+.warningButton:active.popupElement {
+	position:relative;
+	top:1px;
+}
+
+.smallButton.popupElement {
+	background-color:#f9902d;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+	border-radius:3px;
+	border:1px solid #f9a72d;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-size:14px;
+	padding:6px 10px;
+	text-decoration:none;
+}
+.smallButton:hover.popupElement {
+	background-color:#fa9806;
+}
+.smallButton:focus.popupElement {
+	outline: none;
+	background-color:#fa9806;
+}
+.smallButton:active.popupElement {
+	position:relative;
+	top:1px;
+}

popup.html

@@ -0,0 +1,186 @@
+<html>
+  <head>
+    <title>Set Page Color Popup</title>
+    <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" class="popupBody">
+          <img src="icons/LogoSponsorBlocker256px.png" height="64px" id="sponsorBlockPopupLogo"/>
+
+          <h1 class="popupElement">SponsorBlock</h1>
+
+          <!-- Loading text -->
+          <p id="loadingIndicator" class="popupElement">Loading...</p>
+
+          <!-- Hidden until loading complete -->
+          <div id="mainControls" class="main popupElement" style="display: none">
+            <!-- If the video was found in the database -->
+            <div id="videoFound">
+                
+            </div>
+
+            <div id="downloadedSponsorMessageTimes" class="popupElement">
+
+            </div>
+
+            <br/>
+
+            <button id="reportAnIssue" class="dangerButton popupElement">Vote On A Sponsor Time</button>
+
+            <div id="issueReporterContainer"  class="popupElement" style="display: none">
+
+              <h3 style="margin-top: 0px" class="popupElement">Vote On A Sponsor Time</h3>
+
+              <div id="issueReporterTimeButtons" class="popupElement">
+
+              </div>
+
+            </div>
+
+            <h2 class="recordingSubtitle popupElement">Record the times of a sponsorship</h2>
+
+            <p class="popupElement">
+              <span id=sponsorTimesContributionsContainer  class="popupElement" style="display: none">
+                  So far, you've submitted
+                  <span id="sponsorTimesContributionsDisplay" class="popupElement">
+                    0
+                  </span>
+                  <span id="sponsorTimesContributionsDisplayEndWord" class="popupElement">
+                    sponsors.
+                  </span>
+              </span>
+
+              <span id=sponsorTimesViewsContainer  class="popupElement" style="display: none">
+                  You have saved people from 
+                  <span id="sponsorTimesViewsDisplay" class="popupElement">
+                    0
+                  </span>
+                  <span id="sponsorTimesViewsDisplayEndWord" class="popupElement">
+                    sponsor segments.
+                  </span>
+              </span>
+            </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 popupElement">Sponsorship Starts Now</button>
+            </div>
+
+            <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"  class="popupElement" style="display: none">
+              <h3 class="popupElement">Latest Sponsor Message Times Chosen</h3>
+              <b>
+                <div id="sponsorMessageTimes" class="popupElement">
+        
+                </div>
+              </b>
+      
+              <button id="clearTimes" class="smallButton popupElement">Clear Times</button>
+      
+              <br/>
+              <br/>
+
+              <div id="submitTimesContainer" class="popupElement" style="display: none">
+                <button id="submitTimes" class="smallButton popupElement">Submit Times</button>
+
+                <div id="submitTimesInfoMessageContainer" class="popupElement" style="display: none">
+                  <h3 id="submitTimesInfoMessage" class="popupElement">
+
+                  </h3>
+                </div>
+
+              </div>
+      
+            </div>
+
+            <div id="discordButtonContainer" class="popupElement" style="display: none">
+              <br/>
+
+              <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="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 popupElement">Hide Buttons On YouTube Player</button>
+                <button id="showVideoPlayerControls" style="display: none" class="warningButton popupElement">Show Buttons On YouTube Player</button>
+                <br/>
+                <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.
+                </sub>
+
+                <br/>
+                <br/>
+
+                <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 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
+                  are accurate. :)
+                </sub>
+      
+                <br/>
+                <br/>
+
+                <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>
+  <script src="popup.js"></script>
+</html>

popup.js

@@ -0,0 +1,967 @@
+
+//make this a function to allow this to run on the content page
+function runThePopup() {
+
+  //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);
+      }
+  
+      //add a dummy query method
+      chrome.tabs.query = function(config, callback) {
+          callback([{
+              url: document.URL,
+              id: -1
+          }]);
+      }
+  
+      inPopup = false;
+  }
+  
+  // 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) {
+      SB.showNoticeAgain.style.display = "unset";
+    }
+  });
+  
+  //show proper video player controls options
+  chrome.storage.sync.get(["hideVideoPlayerControls"], function(result) {
+    let hideVideoPlayerControls = result.hideVideoPlayerControls;
+    if (hideVideoPlayerControls != undefined && hideVideoPlayerControls) {
+      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) {
+    let trackViewCount = result.trackViewCount;
+    if (trackViewCount != undefined && !trackViewCount) {
+      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) {
+    if (result.sponsorTimesContributed != undefined) {
+      if (result.sponsorTimesContributed > 1) {
+        SB.sponsorTimesContributionsDisplayEndWord.innerText = "sponsors."
+      } else {
+        SB.sponsorTimesContributionsDisplayEndWord.innerText = "sponsor."
+      }
+      SB.sponsorTimesContributionsDisplay.innerText = result.sponsorTimesContributed;
+      SB.sponsorTimesContributionsContainer.style.display = "unset";
+  
+      //get the userID
+      chrome.storage.sync.get(["userID"], function(result) {
+        let userID = result.userID;
+        if (userID != undefined) {
+          //there are probably some views on these submissions then
+          //get the amount of views from the sponsors submitted
+          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) {
+                if (viewCount > 1) {
+                  SB.sponsorTimesViewsDisplayEndWord.innerText = "sponsor segments."
+                } else {
+                  SB.sponsorTimesViewsDisplayEndWord.innerText = "sponsor segment."
+                }
+                SB.sponsorTimesViewsDisplay.innerText = viewCount;
+                SB.sponsorTimesViewsContainer.style.display = "unset";
+              }
+            }
+          });
+        }
+      });
+    }
+  });
+  
+  
+  chrome.tabs.query({
+      active: true,
+      currentWindow: true
+  }, loadTabData);
+  
+  
+  function loadTabData(tabs) {
+    //set current videoID
+    currentVideoID = getYouTubeVideoID(tabs[0].url);
+  
+    if (!currentVideoID) {
+      //this isn't a YouTube video then
+      displayNoVideo();
+      return;
+    }
+  
+    //load video times for this video 
+    let sponsorTimeKey = "sponsorTimes" + currentVideoID;
+    chrome.storage.sync.get([sponsorTimeKey], function(result) {
+      let sponsorTimesStorage = result[sponsorTimeKey];
+      if (sponsorTimesStorage != undefined && sponsorTimesStorage.length > 0) {
+        if (sponsorTimesStorage[sponsorTimesStorage.length - 1] != undefined && sponsorTimesStorage[sponsorTimesStorage.length - 1].length < 2) {
+          startTimeChosen = true;
+          SB.sponsorStart.innerHTML = "Sponsorship Ends Now";
+        }
+  
+        sponsorTimes = sponsorTimesStorage;
+  
+        displaySponsorTimes();
+  
+        //show submission section
+        document.getElementById("submissionSection").style.display = "unset";
+  
+        showSubmitTimesIfNecessary();
+      }
+    });
+  
+    //check if this video's sponsors are known
+    chrome.tabs.sendMessage(
+      tabs[0].id,
+      {message: 'isInfoFound'},
+      infoFound
+    );
+  }
+  
+  function infoFound(request) {
+    if(chrome.runtime.lastError) {
+      //This page doesn't have the injected content script, or at least not yet
+      displayNoVideo();
+      return;
+    }
+  
+    //if request is undefined, then the page currently being browsed is not YouTube
+    if (request != undefined) {
+      //this must be a YouTube video
+      //set letiable
+      isYouTubeTab = true;
+  
+      //remove loading text
+      document.getElementById("mainControls").style.display = "unset"
+      document.getElementById("loadingIndicator").innerHTML = "";
+  
+      if (request.found) {
+        document.getElementById("videoFound").innerHTML = "This video's sponsors are in the database!"
+  
+        displayDownloadedSponsorTimes(request);
+      } else {
+        document.getElementById("videoFound").innerHTML = "No sponsors found"
+      }
+    }
+  }
+  
+  function setVideoID(request) {
+    //if request is undefined, then the page currently being browsed is not YouTube
+    if (request != undefined) {
+      videoID = request.videoID;
+    }
+  }
+  
+  function sendSponsorStartMessage() {
+      //the content script will get the message if a YouTube page is open
+      chrome.tabs.query({
+        active: true,
+        currentWindow: true
+      }, tabs => {
+        chrome.tabs.sendMessage(
+          tabs[0].id,
+          {from: 'popup', message: 'sponsorStart'},
+          startSponsorCallback
+        );
+      });
+  }
+  
+  function startSponsorCallback(response) {
+    let sponsorTimesIndex = sponsorTimes.length - (startTimeChosen ? 1 : 0);
+  
+    if (sponsorTimes[sponsorTimesIndex] == undefined) {
+      sponsorTimes[sponsorTimesIndex] = [];
+    }
+  
+    sponsorTimes[sponsorTimesIndex][startTimeChosen ? 1 : 0] = response.time;
+  
+    let sponsorTimeKey = "sponsorTimes" + currentVideoID;
+    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
+  
+    updateStartTimeChosen();
+  
+    //display video times on screen
+    displaySponsorTimes();
+  
+    //show submission section
+    document.getElementById("submissionSection").style.display = "unset";
+  
+    showSubmitTimesIfNecessary();
+  }
+  
+  //display the video times from the array
+  function displaySponsorTimes() {
+    //set it to the message
+    let sponsorMessageTimes = document.getElementById("sponsorMessageTimes");
+  
+    //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);
+  
+      //add them as buttons to the issue reporting container
+      let container = document.getElementById("issueReporterTimeButtons");
+      for (let i = 0; i < request.sponsorTimes.length; i++) {
+        let sponsorTimeButton = document.createElement("button");
+        sponsorTimeButton.className = "warningButton popupElement";
+        sponsorTimeButton.innerText = getFormattedTime(request.sponsorTimes[i][0]) + " to " + getFormattedTime(request.sponsorTimes[i][1]);
+        
+        let votingButtons = document.createElement("div");
+  
+        let UUID = request.UUIDs[i];
+  
+        //thumbs up and down buttons
+        let voteButtonsContainer = document.createElement("div");
+        voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID;
+        voteButtonsContainer.setAttribute("align", "center");
+        voteButtonsContainer.style.display = "none"
+  
+        let upvoteButton = document.createElement("img");
+        upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
+        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 popupElement";
+        downvoteButton.src = chrome.extension.getURL("icons/downvote.png");
+        downvoteButton.addEventListener("click", () => vote(0, UUID));
+  
+        //add thumbs up and down buttons to the container
+        voteButtonsContainer.appendChild(document.createElement("br"));
+        voteButtonsContainer.appendChild(document.createElement("br"));
+        voteButtonsContainer.appendChild(upvoteButton);
+        voteButtonsContainer.appendChild(downvoteButton);
+  
+        //add click listener to open up vote panel
+        sponsorTimeButton.addEventListener("click", function() {
+          voteButtonsContainer.style.display = "unset";
+        });
+  
+        container.appendChild(sponsorTimeButton);
+        container.appendChild(voteButtonsContainer);
+  
+        //if it is not the last iteration
+        if (i != request.sponsorTimes.length - 1) {
+          container.appendChild(document.createElement("br"));
+          container.appendChild(document.createElement("br"));
+        }
+      }
+    }
+  }
+  
+  //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;
+  }
+  
+  //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({
+        active: true,
+        currentWindow: true
+      }, function(tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          message: "changeStartSponsorButton",
+          showStartSponsor: true,
+          uploadButtonVisible: false
+        });
+      });
+    }
+  
+    //reset sponsorTimes
+    sponsorTimes = [];
+  
+    let sponsorTimeKey = "sponsorTimes" + currentVideoID;
+    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
+  
+    displaySponsorTimes();
+  
+    //hide submission section
+    document.getElementById("submissionSection").style.display = "none";
+  
+    resetStartTimeChosen();
+  }
+  
+  function submitTimes() {
+    //make info message say loading
+    document.getElementById("submitTimesInfoMessage").innerText = "Loading...";
+    document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
+  
+    if (sponsorTimes.length > 0) {
+      chrome.runtime.sendMessage({
+        message: "submitTimes",
+        videoID: currentVideoID
+      }, function(response) {
+        if (response != undefined) {
+          if (response.statusCode == 200) {
+            //hide loading message
+            document.getElementById("submitTimesInfoMessageContainer").style.display = "none";
+    
+            clearTimes();
+          } else if(response.statusCode == 400) {
+            document.getElementById("submitTimesInfoMessage").innerText = "Server said this request was invalid";
+            document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
+          } else if(response.statusCode == 429) {
+            document.getElementById("submitTimesInfoMessage").innerText = "You have submitted too many sponsor times for this one video, are you sure there are this many?";
+            document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
+          } 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";
+          }
+        }
+      });
+    }
+  }
+  
+  function showNoticeAgain() {
+    chrome.storage.sync.set({"dontShowNoticeAgain": false});
+  
+    chrome.tabs.query({
+      active: true,
+      currentWindow: true
+    }, function(tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {
+        message: "showNoticeAgain"
+      });
+    });
+  
+    SB.showNoticeAgain.style.display = "none";
+  }
+  
+  function hideVideoPlayerControls() {
+    chrome.storage.sync.set({"hideVideoPlayerControls": true});
+  
+    chrome.tabs.query({
+      active: true,
+      currentWindow: true
+    }, function(tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {
+        message: "changeVideoPlayerControlsVisibility",
+        value: true
+      });
+    });
+  
+    SB.hideVideoPlayerControls.style.display = "none";
+    SB.showVideoPlayerControls.style.display = "unset";
+  }
+  
+  function showVideoPlayerControls() {
+    chrome.storage.sync.set({"hideVideoPlayerControls": false});
+  
+    chrome.tabs.query({
+      active: true,
+      currentWindow: true
+    }, function(tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {
+        message: "changeVideoPlayerControlsVisibility",
+        value: false
+      });
+    });
+  
+    SB.hideVideoPlayerControls.style.display = "unset";
+    SB.showVideoPlayerControls.style.display = "none";
+  }
+  
+  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({
+      active: true,
+      currentWindow: true
+    }, function(tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {
+        message: "trackViewCount",
+        value: false
+      });
+    });
+  
+    SB.disableSponsorViewTracking.style.display = "none";
+    SB.enableSponsorViewTracking.style.display = "unset";
+  }
+  
+  function enableSponsorViewTracking() {
+    chrome.storage.sync.set({"trackViewCount": true});
+  
+    chrome.tabs.query({
+      active: true,
+      currentWindow: true
+    }, function(tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {
+        message: "trackViewCount",
+        value: true
+      });
+    });
+  
+    SB.enableSponsorViewTracking.style.display = "none";
+    SB.disableSponsorViewTracking.style.display = "unset";
+  }
+  
+  function updateStartTimeChosen() {
+    //update startTimeChosen letiable
+    if (!startTimeChosen) {
+      startTimeChosen = true;
+    SB.sponsorStart.innerHTML = "Sponsorship Ends Now";
+    } else {
+      resetStartTimeChosen();
+    }
+  }
+  
+  //set it to false
+  function resetStartTimeChosen() {
+    startTimeChosen = false;
+    SB.sponsorStart.innerHTML = "Sponsorship Starts Now";
+  }
+  
+  //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
+      document.getElementById("submitTimesContainer").style.display = "unset";
+    } else {
+      //hide submit times button
+      document.getElementById("submitTimesContainer").style.display = "none";
+    }
+  }
+  
+  //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() {
+    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() {
+    document.getElementById("issueReporterContainer").style.display = "unset";
+    SB.reportAnIssue.style.display = "none";
+  }
+  
+  function addVoteMessage(message, UUID) {
+    let container = document.getElementById("sponsorTimesVoteButtonsContainer" + UUID);
+    //remove all children
+    while (container.firstChild) {
+      container.removeChild(container.firstChild);
+    }
+  
+    let thanksForVotingText = document.createElement("h2");
+    thanksForVotingText.innerText = message;
+    //there are already breaks there
+    thanksForVotingText.style.marginBottom = "0px";
+  
+    container.appendChild(thanksForVotingText);
+  }
+  
+  function vote(type, UUID) {
+    //add loading info
+    addVoteMessage("Loading...", UUID)
+  
+    //send the vote message to the tab
+    chrome.runtime.sendMessage({
+      message: "submitVote",
+      type: type,
+      UUID: UUID
+    }, function(response) {
+      if (response != undefined) {
+        //see if it was a success or failure
+        if (response.successType == 1) {
+          //success
+          addVoteMessage("Thanks for voting!", UUID)
+        } else if (response.successType == 0) {
+          //failure: duplicate vote
+          addVoteMessage("You have already voted this way before.", UUID)
+        } else if (response.successType == -1) {
+          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)
+          }
+        }
+      }
+    });
+  }
+  
+  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) {
+      //add a zero
+      secondsDisplay = "0" + secondsDisplay;
+    }
+  
+    let formatted = minutes+ ":" + secondsDisplay;
+  
+    return formatted;
+  }
+  
+  //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);
+  
+    if (callback != undefined) {
+      xmlhttp.onreadystatechange = function () {
+        callback(xmlhttp, false);
+      };
+    
+      xmlhttp.onerror = function(ev) {
+        callback(xmlhttp, true);
+      };
+    }
+  
+    //submit this request
+    xmlhttp.send();
+  }
+  
+  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);
+    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();
+}
+