Merge pull request #2 from ajayyy/experimental

Added voting buttons

.gitignore

@@ -0,0 +1,2 @@
+content-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;
-}

README.md

@@ -1,3 +1,32 @@
-# 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>
+
+# SponsorBlocker
+
+SponsorBlocker is an extension that will skip over sponsored segments of YouTube videos. SponsorBlocker 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.
+
+# 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.
+
+# Chrome extension
+
+It will be on the chrome webstore soon once I get some more UI features in, such as an icon. For now, you can load this project as an unpacked extension. Make sure to rename the `config.js.example` file to `config.js` before installing.
+
+# Firefox extension
+
+None at the moment
+
+# Credit
+
+Some i 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>

background.js

@@ -1,15 +1,176 @@
+var previousVideoID = null
+
+//the id of this user, randomly generated once per install
+var userID = null;
+
 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
-      })
+    if (changeInfo != undefined && changeInfo.url != undefined) {
+      let id = getYouTubeVideoID(changeInfo.url);
+      if (changeInfo.url && id) { // If URL changed and is youtube video message contentScript the video id
+        videoIDChange(id);
+
+        chrome.tabs.sendMessage( tabId, {
+          message: 'ytvideoid',
+          id: id
+        });
+      }
     }
   }
 );
-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;
+
+chrome.runtime.onMessage.addListener(function (request, sender, callback) {
+  if (request.message == "submitTimes") {
+    submitTimes(request.videoID);
+
+    callback({
+      success: true
+    });
+  } else if (request.message == "ytvideoid") {
+    if (previousVideoID != request.videoID) {
+      videoIDChange(request.videoID);
+    }
+  } else if (request.message == "addSponsorTime") {
+    addSponsorTime(request.time);
+  } 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)
+  }
+});
+
+
+//gets the sponsor times from memory
+function getSponsorTimes(videoID, callback) {
+  let sponsorTimes = [];
+  let sponsorTimeKey = "sponsorTimes" + videoID;
+  chrome.storage.local.get([sponsorTimeKey], function(result) {
+    let sponsorTimesStorage = result[sponsorTimeKey];
+    if (sponsorTimesStorage != undefined && sponsorTimesStorage.length > 0) {
+      sponsorTimes = sponsorTimesStorage;
+    }
+
+    callback(sponsorTimes)
+  });
 }
+
+function addSponsorTime(time) {
+  getSponsorTimes(previousVideoID, 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] = parseInt(time);
+    } else {
+      //it is a start time
+      let sponsorTimesIndex = sponsorTimes.length;
+      sponsorTimes[sponsorTimesIndex] = [];
+
+      sponsorTimes[sponsorTimesIndex][0] = parseInt(time);
+    }
+
+    //save this info
+    let sponsorTimeKey = "sponsorTimes" + previousVideoID;
+    chrome.storage.local.set({[sponsorTimeKey]: sponsorTimes});
+  });
+}
+
+function submitVote(type, UUID) {
+  let xmlhttp = new XMLHttpRequest();
+
+  getUserID(function(userID) {
+    //publish this vote
+    console.log(serverAddress + "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + "&type=" + type);
+    xmlhttp.open('GET', serverAddress + "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + "&type=" + type, true);
+
+    //submit this vote
+    xmlhttp.send();
+  })
+}
+
+function submitTimes(videoID) {
+  //get the video times from storage
+  let sponsorTimeKey = 'sponsorTimes' + videoID;
+  chrome.storage.local.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++) {
+        let xmlhttp = new XMLHttpRequest();
+
+        let userIDStorage = getUserID(function(userIDStorage) {
+          //submit the sponsorTime
+          xmlhttp.open('GET', serverAddress + "/api/postVideoSponsorTimes?videoID=" + videoID + "&startTime=" + sponsorTimes[i][0] + "&endTime=" + sponsorTimes[i][1]
+          + "&userID=" + userIDStorage, true);
+          xmlhttp.send();
+        });
+      }
+    }
+  });
+}
+
+function videoIDChange(currentVideoID) {
+  //warn them if they had unsubmitted times
+  if (previousVideoID != null) {
+    //get the sponsor times from storage
+    let sponsorTimeKey = 'sponsorTimes' + previousVideoID;
+    chrome.storage.local.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.local.get(["userID"], function(result) {
+    let userIDStorage = result.userID;
+    if (userIDStorage != undefined) {
+      userID = userIDStorage;
+      callback(userID);
+    } else {
+      //generate a userID
+      userID = generateUUID();
+      
+      //save this UUID
+      chrome.storage.local.set({"userID": userID});
+
+      callback(userID);
+    }
+  });
+}
+
+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

@@ -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 = "http://localhost";

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,123 @@
+.sponsorSkipObject {
+    font-family: 'Source Sans Pro', sans-serif;
+}
+
+#sponsorSkipLogo {
+	height: 64px;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto;
+	margin-left: 10px;
+}
+
+#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;
+}
+
+#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;
+}
+
+#sponsorTimesThanksForVotingInfoText {
+	font-size: 12px;
+	font-weight: bold;
+    color: #000000;
+	text-align: center;
+}
+
+.voteButton {
+	height: 32px;
+	margin-right: 15px;
+	cursor: pointer;
+}
+.voteButton:hover {
+	filter: brightness(80%);
+}
+
+.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,389 @@
+if(id = getYouTubeVideoID(document.URL)){ // Direct Links
+  videoIDChange(id);
+
+  //tell background.js about this
+  chrome.runtime.sendMessage({
+    message: "ytvideoid",
+    videoID: id
+  });
+}
+
+//was sponsor data found when doing SponsorsLookup
+var sponsorDataFound = false;
+
+//the actual sponsorTimes if loaded and UUIDs associated with them
+var sponsorTimes = undefined;
+var UUIDs = undefined;
+
+//the video
+var v;
+
+//the last time looked at (used to see if this time is in the interval)
+var lastTime;
+
+//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;
+
+//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.local.get(["dontShowNoticeAgain"], function(result) {
+  let dontShowNoticeAgain = result.dontShowNoticeAgain;
+  if (dontShowNoticeAgain != undefined) {
+    dontShowNotice = dontShowNoticeAgain;
+  }
+});
+
+chrome.runtime.onMessage.addListener( // Detect URL Changes
+  function(request, sender, sendResponse) {
+    //message from background script
+    if (request.message == "ytvideoid") { 
+      videoIDChange(request.id);
+    }
+
+    //messages from popup script
+    if (request.message == "sponsorStart") {
+      sponsorMessageStarted();
+    }
+
+    if (request.message == "isInfoFound") {
+      //send the sponsor times along with if it's found
+      sendResponse({
+        found: sponsorDataFound,
+        sponsorTimes: sponsorTimes
+      })
+    }
+
+    if (request.message == "getVideoID") {
+      sendResponse({
+        videoID: getYouTubeVideoID(document.URL)
+      })
+    }
+
+    if (request.message == "showNoticeAgain") {
+      dontShowNotice = false;
+    }
+
+    if (request.message == "toggleStartSponsorButton") {
+      toggleStartSponsorButton();
+    }
+
+    if (request.message == "changeVideoPlayerControlsVisibility") {
+      hideVideoPlayerControls = request.value;
+
+      updateVisibilityOfPlayerControlsButton();
+    }
+});
+
+function videoIDChange(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 != undefined && sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length < 2) {
+        toggleStartSponsorButton();
+      }
+    }
+  });
+
+  //see if video control buttons should be added
+  chrome.storage.local.get(["hideVideoPlayerControls"], function(result) {
+    if (result.hideVideoPlayerControls != undefined) {
+      hideVideoPlayerControls = result.hideVideoPlayerControls;
+    }
+
+    updateVisibilityOfPlayerControlsButton();
+  });
+}
+
+function sponsorsLookup(id) {
+    v = document.querySelector('video') // Youtube video player
+    let xmlhttp = new XMLHttpRequest();
+    
+    //check database for sponsor times
+    xmlhttp.open('GET', serverAddress + "/api/getVideoSponsorTimes?videoID=" + id, true);
+
+    xmlhttp.onreadystatechange = function () {
+        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 {
+          sponsorDataFound = false;
+        }
+    };
+    xmlhttp.send(null);
+}
+
+function sponsorCheck(sponsorTimes) { // Video skipping
+    //see if any sponsor start time was just passed
+    for (let i = 0; i < sponsorTimes.length; i++) {
+        //the sponsor time is in between these times, skip it
+        //if the time difference is more than 1 second, than the there was probably a skip in time, 
+        //  and it's not due to playback
+        if (Math.abs(v.currentTime - lastTime) < 1 && sponsorTimes[i][0] >= lastTime && sponsorTimes[i][0] <= v.currentTime) {
+          //skip it
+          v.currentTime = sponsorTimes[i][1];
+
+          lastSponsorTimeSkipped = sponsorTimes[i][0];
+          lastSponsorTimeSkippedUUID = UUIDs[i]; 
+
+          //send out the message saying that a sponsor message was skipped
+          openSkipNotice();
+
+          setTimeout(closeSkipNotice, 7000);
+        }
+
+        lastTime = v.currentTime;
+    }
+}
+
+function goBackToPreviousTime() {
+  if (lastSponsorTimeSkipped != null) {
+    //add a tiny bit of time to make sure it is not skipped again
+    v.currentTime = lastSponsorTimeSkipped + 0.001;
+
+    closeSkipNotice();
+  }
+}
+
+//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";
+  startSponsorButton.setAttribute("title", "Sponsor Starts Now");
+  startSponsorButton.addEventListener("click", startSponsorClicked);
+
+  let startSponsorImage = document.createElement("img");
+  startSponsorImage.id = "startSponsorImage";
+  startSponsorImage.style.height = "60%";
+  startSponsorImage.style.top = "0";
+  startSponsorImage.style.bottom = "0";
+  startSponsorImage.style.display = "block";
+  startSponsorImage.style.margin = "auto";
+  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";
+}
+
+//adds or removes the player controls button to what it should be
+function updateVisibilityOfPlayerControlsButton() {
+  if (hideVideoPlayerControls) {
+    removePlayerControlsButton();
+  } else {
+    addPlayerControlsButton();
+  }
+}
+
+function startSponsorClicked() {
+  toggleStartSponsorButton();
+
+  //send back current time with message
+  chrome.runtime.sendMessage({
+    message: "addSponsorTime",
+    time: v.currentTime
+  });
+}
+
+function toggleStartSponsorButton() {
+  if (showingStartSponsor) {
+    showingStartSponsor = false;
+    document.getElementById("startSponsorImage").src = chrome.extension.getURL("icons/PlayerStopIconSponsorBlocker256px.png");
+  } else {
+    showingStartSponsor = true;
+    document.getElementById("startSponsorImage").src = chrome.extension.getURL("icons/PlayerStartIconSponsorBlocker256px.png");
+  }
+}
+
+//Opens the notice that tells the user that a sponsor was just skipped
+function openSkipNotice(){
+  if (dontShowNotice) {
+    //don't show, return
+    return;
+  }
+
+  let noticeElement = document.createElement("div");
+  noticeElement.id = "sponsorSkipNotice";
+  noticeElement.className = "sponsorSkipObject";
+
+  let logoElement = document.createElement("img");
+  logoElement.id = "sponsorSkipLogo";
+  logoElement.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png");
+
+  let noticeMessage = document.createElement("div");
+  noticeMessage.id = "sponsorSkipMessage";
+  noticeMessage.className = "sponsorSkipObject";
+  noticeMessage.innerText = "Hey, you just skipped a sponsor!";
+  
+  let noticeInfo = document.createElement("p");
+  noticeInfo.id = "sponsorSkipInfo";
+  noticeInfo.className = "sponsorSkipObject";
+  noticeInfo.innerText = "This message will disapear in 7 seconds";
+  
+  //thumbs up and down buttons
+  let voteButtonsContainer = document.createElement("div");
+  voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer";
+  voteButtonsContainer.setAttribute("align", "center");
+
+  let upvoteButton = document.createElement("img");
+  upvoteButton.id = "sponsorTimesUpvoteButtonsContainer"
+  upvoteButton.className = "sponsorSkipObject voteButton";
+  upvoteButton.src = chrome.extension.getURL("icons/upvote.png");
+  upvoteButton.addEventListener("click", upvote);
+
+  let downvoteButton = document.createElement("img");
+  downvoteButton.id = "sponsorTimesDownvoteButtonsContainer"
+  downvoteButton.className = "sponsorSkipObject voteButton";
+  downvoteButton.src = chrome.extension.getURL("icons/downvote.png");
+  downvoteButton.addEventListener("click", downvote);
+
+  //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);
+
+  let hideButton = document.createElement("button");
+  hideButton.innerText = "Dismiss";
+  hideButton.className = "sponsorSkipButton";
+  hideButton.addEventListener("click", closeSkipNotice);
+
+  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 upvote() {
+  vote(1);
+
+  closeSkipNotice();
+}
+
+function downvote() {
+  vote(0);
+
+  //change text to say thanks for voting
+  //remove buttons
+  document.getElementById("sponsorTimesVoteButtonsContainer").removeChild(document.getElementById("sponsorTimesUpvoteButtonsContainer"));
+  document.getElementById("sponsorTimesVoteButtonsContainer").removeChild(document.getElementById("sponsorTimesDownvoteButtonsContainer"));
+
+  //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").appendChild(thanksForVotingText);
+  document.getElementById("sponsorTimesVoteButtonsContainer").appendChild(thanksForVotingInfoText);
+}
+
+function vote(type) {
+  chrome.runtime.sendMessage({
+    message: "submitVote",
+    type: type,
+    UUID: lastSponsorTimeSkippedUUID
+  });
+}
+
+//Closes the notice that tells the user that a sponsor was just skipped
+function closeSkipNotice(){
+  let notice = document.getElementById("sponsorSkipNotice");
+  if (notice != null) {
+    notice.remove();
+  }
+}
+
+function dontShowNoticeAgain() {
+  chrome.storage.local.set({"dontShowNoticeAgain": true});
+
+  dontShowNotice = true;
+
+  closeSkipNotice();
+}
+
+function sponsorMessageStarted() {
+    let v = document.querySelector('video');
+
+    //send back current time
+    chrome.runtime.sendMessage({
+      message: "time",
+      time: v.currentTime
+    });
+
+    //update button
+    toggleStartSponsorButton();
+}
+
+function getYouTubeVideoID(url) { // Returns with video id else returns false
+  var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
+  var match = url.match(regExp);
+  return (match && match[7].length == 11) ? match[7] : false;
+}

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,51 @@
 {
   "name": "YTSponsorSkip",
   "version": "1.0",
-  "description": "Skip youtube video sponsors",
+  "description": "Skip youtube video sponsors.",
   "content_scripts": [
     {
       "matches": [
         "https://*.youtube.com/*"
       ],
       "js": [
-        "ContentScript.js"
+        "config.js",
+        "content.js"
+      ],
+      "css": [
+        "content.css",
+        "./libs/Source+Sans+Pro.css"
       ]
     }
   ],
-  "permissions": [
-    "tabs"
+  "web_accessible_resources": [
+    "icons/LogoSponsorBlocker256px.png",
+    "icons/IconSponsorBlocker256px.png",
+    "icons/PlayerStartIconSponsorBlocker256px.png",
+    "icons/PlayerStopIconSponsorBlocker256px.png",
+    "icons/upvote.png",
+    "icons/downvote.png"
   ],
+  "permissions": [
+    "tabs",
+    "storage",
+    "notifications"
+  ],
+  "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,122 @@
+* {
+  font-family: 'Source Sans Pro', sans-serif;
+}
+
+h1 {
+	margin-top: 0px;
+}
+
+body {
+  font-size: 14px;
+  width: 300px;
+  background-color: #ffd9d9;
+}
+
+.greenButton {
+	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 {
+  background-color:#bf2a2a;
+}
+.greenButton:focus {
+	outline: none;
+	background-color:#bf2a2a;
+}
+.greenButton:active {
+  position:relative;
+  top:1px;
+}
+
+.dangerButton {
+	-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 {
+	background-color:#bc3315;
+}
+.dangerButton:focus {
+	outline: none;
+	background-color:#bc3315;
+}
+.dangerButton:active {
+	position:relative;
+	top:1px;
+}
+
+.warningButton {
+	-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 {
+	background-color:#bc8215;
+}
+.warningButton:focus {
+	outline: none;
+	background-color:#bc8215;
+}
+.warningButton:active {
+	position:relative;
+	top:1px;
+}
+
+.smallButton {
+	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 {
+	background-color:#fa9806;
+}
+.smallButton:focus {
+	outline: none;
+	background-color:#fa9806;
+}
+.smallButton:active {
+	position:relative;
+	top:1px;
+}

popup.html

@@ -0,0 +1,79 @@
+<html>
+  <head>
+    <title>Set Page Color Popup</title>
+    <link rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css"/>
+    <link rel="stylesheet" type="text/css" href="popup.css"/>
+  </head>
+
+  <center>
+    <div id="app">
+        <img src="icons/LogoSponsorBlocker256px.png" height="64px"/>
+
+        <h1>SponsorBlock</h1>
+
+        <!-- Loading text -->
+        <p id="loadingIndicator">Loading...</p>
+
+        <!-- Hidden until loading complete -->
+        <div id="mainControls" class="main" style="display: none">
+          <!-- If the video was found in the database -->
+          <div id="videoFound">
+              
+          </div>
+
+          <div id="downloadedSponsorMessageTimes">
+
+          </div>
+          
+          <h2>Record the times of a sponsorship</h2>
+
+          <p> 
+            Click the button below when the sponsorship starts and ends to record and 
+            submit it to the database.
+          </p>
+  
+          <div>
+            <button id="sponsorStart" class="greenButton">Sponsorship Starts Now</button>
+          </div>
+    
+          <div id="submissionSection" style="display: none">
+            <h3>Latest Sponsor Message Times Chosen</h3>
+            <b>
+              <div id="sponsorMessageTimes">
+      
+              </div>
+            </b>
+    
+            <button id="clearTimes" class="smallButton">Clear Times</button>
+    
+            <br/>
+            <br/>
+    
+            <button id="submitTimes" style="display: none" class="smallButton">Submit Times</button>
+          </div>
+
+          <div id="optionsButtonContainer">
+              <br/>
+              <br/>
+    
+              <button id="optionsButton" class="dangerButton">Options</button>
+          </div>
+
+          <div id="options" style="display: none">
+              <br/>
+
+              <h3>Options</h3>
+    
+              <button id="hideVideoPlayerControls" class="warningButton">Hide Button On YouTube Player</button>
+              <button id="showVideoPlayerControls" style="display: none" class="warningButton">Show Button On YouTube Player</button>
+    
+              <br/>
+              <br/>
+        
+              <button id="showNoticeAgain" style="display: none" class="dangerButton">Show Notice Again</button>
+          </div>
+        </div>
+      </div>
+  </center>
+  <script src="popup.js"></script>
+</html>

popup.js

@@ -0,0 +1,335 @@
+//setup click listeners
+document.getElementById("sponsorStart").addEventListener("click", sendSponsorStartMessage);
+document.getElementById("clearTimes").addEventListener("click", clearTimes);
+document.getElementById("submitTimes").addEventListener("click", submitTimes);
+document.getElementById("showNoticeAgain").addEventListener("click", showNoticeAgain);
+document.getElementById("hideVideoPlayerControls").addEventListener("click", hideVideoPlayerControls);
+document.getElementById("showVideoPlayerControls").addEventListener("click", showVideoPlayerControls);
+document.getElementById("optionsButton").addEventListener("click", openOptions);
+
+//if true, the button now selects the end time
+var startTimeChosen = false;
+
+//the start and end time pairs (2d)
+var sponsorTimes = [];
+
+//current video ID of this tab
+var currentVideoID = null;
+
+//is this a YouTube tab?
+var isYouTubeTab = false;
+
+//if the don't show notice again variable is true, an option to 
+//  disable should be available
+chrome.storage.local.get(["dontShowNoticeAgain"], function(result) {
+  let dontShowNoticeAgain = result.dontShowNoticeAgain;
+  if (dontShowNoticeAgain != undefined && dontShowNoticeAgain) {
+    document.getElementById("showNoticeAgain").style.display = "unset";
+  }
+});
+
+//show proper video player controls option
+chrome.storage.local.get(["hideVideoPlayerControls"], function(result) {
+  let hideVideoPlayerControls = result.hideVideoPlayerControls;
+  if (hideVideoPlayerControls != undefined && hideVideoPlayerControls) {
+    document.getElementById("hideVideoPlayerControls").style.display = "none";
+    document.getElementById("showVideoPlayerControls").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.local.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;
+        document.getElementById("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 variable
+    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'}
+      );
+    });
+}
+
+chrome.runtime.onMessage.addListener(function (request, sender, callback) {
+  if (request.message == "time") {
+    let sponsorTimesIndex = sponsorTimes.length - (startTimeChosen ? 1 : 0);
+
+    if (sponsorTimes[sponsorTimesIndex] == undefined) {
+      sponsorTimes[sponsorTimesIndex] = [];
+    }
+
+    sponsorTimes[sponsorTimesIndex][startTimeChosen ? 1 : 0] = request.time;
+
+    let sponsorTimeKey = "sponsorTimes" + currentVideoID;
+    chrome.storage.local.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
+  document.getElementById("sponsorMessageTimes").innerHTML = getSponsorTimesMessage(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);
+  }
+}
+
+//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;
+}
+
+function clearTimes() {
+  //check if the player controls should be toggled
+  if (sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length < 2) {
+    chrome.tabs.query({
+      active: true,
+      currentWindow: true
+    }, function(tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {
+        message: "toggleStartSponsorButton"
+      });
+    });
+  }
+
+  //reset sponsorTimes
+  sponsorTimes = [];
+
+  let sponsorTimeKey = "sponsorTimes" + currentVideoID;
+  chrome.storage.local.set({[sponsorTimeKey]: sponsorTimes});
+
+  displaySponsorTimes();
+
+  //hide submission section
+  document.getElementById("submissionSection").style.display = "none";
+
+  resetStartTimeChosen();
+}
+
+function submitTimes() {
+  if (sponsorTimes.length > 0) {
+    chrome.runtime.sendMessage({
+      message: "submitTimes",
+      videoID: currentVideoID
+    }, function(request) {
+      clearTimes();
+    });
+  }
+}
+
+function showNoticeAgain() {
+  chrome.storage.local.set({"dontShowNoticeAgain": false});
+
+  chrome.tabs.query({
+    active: true,
+    currentWindow: true
+  }, function(tabs) {
+    chrome.tabs.sendMessage(tabs[0].id, {
+      message: "showNoticeAgain"
+    });
+  });
+
+  document.getElementById("showNoticeAgain").style.display = "none";
+}
+
+function hideVideoPlayerControls() {
+  chrome.storage.local.set({"hideVideoPlayerControls": true});
+
+  chrome.tabs.query({
+    active: true,
+    currentWindow: true
+  }, function(tabs) {
+    chrome.tabs.sendMessage(tabs[0].id, {
+      message: "changeVideoPlayerControlsVisibility",
+      value: true
+    });
+  });
+
+  document.getElementById("hideVideoPlayerControls").style.display = "none";
+  document.getElementById("showVideoPlayerControls").style.display = "unset";
+}
+
+function showVideoPlayerControls() {
+  chrome.storage.local.set({"hideVideoPlayerControls": false});
+
+  chrome.tabs.query({
+    active: true,
+    currentWindow: true
+  }, function(tabs) {
+    chrome.tabs.sendMessage(tabs[0].id, {
+      message: "changeVideoPlayerControlsVisibility",
+      value: false
+    });
+  });
+
+  document.getElementById("hideVideoPlayerControls").style.display = "unset";
+  document.getElementById("showVideoPlayerControls").style.display = "none";
+}
+
+function updateStartTimeChosen() {
+  //update startTimeChosen variable
+  if (!startTimeChosen) {
+    startTimeChosen = true;
+  document.getElementById("sponsorStart").innerHTML = "Sponsorship Ends Now";
+  } else {
+    resetStartTimeChosen();
+  }
+}
+
+//set it to false
+function resetStartTimeChosen() {
+  startTimeChosen = false;
+  document.getElementById("sponsorStart").innerHTML = "Sponsorship Starts Now";
+}
+
+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("submitTimes").style.display = "unset";
+  } else {
+    document.getElementById("submitTimes").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.";
+}
+
+//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 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;
+}