Merge pull request #48 from ajayyy/experimental

More options

.gitignore

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

LICENSE

@@ -652,7 +652,7 @@ 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>
+    SponsorBlock  Copyright (C) 2019  Ajay Ramachandran and other SponsorBlock contributors
     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,9 +1,15 @@
 ![Logo](icons/LogoSponsorBlocker256px.png)
 <br/><sub>Logo by [@munadikieh](https://github.com/munadikieh)</sub>
 
-# SponsorBlocker
+# SponsorBlock
 
-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.
+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
 
@@ -19,10 +25,14 @@ Hopefully this project can be combined with projects like [this](https://github.
 
 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
+# Build Yourself
 
-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 `content-config.js.example` file to `content-config.js` before installing.
+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
+# Credit
 
-None at the moment
+The awesome [Invidious API](https://github.com/omarroth/invidious/wiki/API) is used to grab the time the video was published.
+
+Some icons made by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
+
+Some icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>

background.js

@@ -3,35 +3,40 @@ 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 != 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);
+//when a new tab is highlighted
+chrome.tabs.onActivated.addListener(
+  function(activeInfo) {
+    chrome.tabs.get(activeInfo.tabId, function(tab) {
+      let id = getYouTubeVideoID(tab.url);
 
-        chrome.tabs.sendMessage( tabId, {
-          message: 'ytvideoid',
-          id: id
-        });
+      //if this even is a YouTube tab
+      if (id) {
+        videoIDChange(id, activeInfo.tabId);
       }
-    }
+    })
   }
 );
 
+//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);
+    submitTimes(request.videoID, callback);
 
-    callback({
-      success: true
-    });
-  } else if (request.message == "ytvideoid") {
-    if (previousVideoID != request.videoID) {
-      videoIDChange(request.videoID);
-    }
+    //this allows the callback to be called later by the submitTimes function
+    return true;
   } else if (request.message == "addSponsorTime") {
-    addSponsorTime(request.time);
+    addSponsorTime(request.time, request.videoID);
   } else if (request.message == "getSponsorTimes") {
     getSponsorTimes(request.videoID, function(sponsorTimes) {
       callback({
@@ -39,6 +44,11 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
       })
     });
 
+    //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;
   }
@@ -49,7 +59,7 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
 function getSponsorTimes(videoID, callback) {
   let sponsorTimes = [];
   let sponsorTimeKey = "sponsorTimes" + videoID;
-  chrome.storage.local.get([sponsorTimeKey], function(result) {
+  chrome.storage.sync.get([sponsorTimeKey], function(result) {
     let sponsorTimesStorage = result[sponsorTimeKey];
     if (sponsorTimesStorage != undefined && sponsorTimesStorage.length > 0) {
       sponsorTimes = sponsorTimesStorage;
@@ -59,54 +69,104 @@ function getSponsorTimes(videoID, callback) {
   });
 }
 
-function addSponsorTime(time) {
-  getSponsorTimes(previousVideoID, function(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] = parseInt(time);
+      sponsorTimes[sponsorTimes.length - 1][1] = time;
     } else {
       //it is a start time
       let sponsorTimesIndex = sponsorTimes.length;
       sponsorTimes[sponsorTimesIndex] = [];
 
-      sponsorTimes[sponsorTimesIndex][0] = parseInt(time);
+      sponsorTimes[sponsorTimesIndex][0] = time;
     }
 
     //save this info
-    let sponsorTimeKey = "sponsorTimes" + previousVideoID;
-    chrome.storage.local.set({[sponsorTimeKey]: sponsorTimes});
+    let sponsorTimeKey = "sponsorTimes" + videoID;
+    chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
   });
 }
 
-function submitTimes(videoID) {
+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.local.get([sponsorTimeKey], function(result) {
+  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++) {
-        let xmlhttp = new XMLHttpRequest();
-
-        let userIDStorage = getUserID(function(userIDStorage) {
+        getUserID(function(userIDStorage) {
           //submit the sponsorTime
-          xmlhttp.open('GET', 'http://localhost/api/postVideoSponsorTimes?videoID=' + videoID + "&startTime=" + sponsorTimes[i][0] + "&endTime=" + sponsorTimes[i][1]
-          + "&userID=" + userIDStorage, true);
-          xmlhttp.send();
+          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) {
+function videoIDChange(currentVideoID, tabId) {
+  //send a message to the content script
+  chrome.tabs.sendMessage(tabId, {
+    message: 'ytvideoid',
+    id: 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) {
+    chrome.storage.sync.get([sponsorTimeKey], function(result) {
       let sponsorTimes = result[sponsorTimeKey];
 
       if (sponsorTimes != undefined && sponsorTimes.length > 0) {
@@ -130,26 +190,52 @@ function videoIDChange(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) {
+  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.local.set({"userID": userID});
+      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);

config.js.example

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

content.css

@@ -1,8 +1,32 @@
+.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 {
+.sponsorSkipLogo {
 	height: 64px;
 	position: absolute;
 	top: 0;
@@ -11,27 +35,113 @@
 	margin-left: 10px;
 }
 
-#sponsorSkipNotice {
-    min-height: 125px;
+@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;
 }
 
-#sponsorSkipMessage {
+/* 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 {
+.sponsorSkipInfo {
 	font-size: 10px;
     color: #000000;
-    text-align: center;
+	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 {
@@ -54,6 +164,12 @@
 .sponsorSkipButton:hover {
 	background-color:#bf2a2a;
 }
+
+.sponsorSkipButton:focus {
+	outline: none;
+	background-color:#bf2a2a;
+}
+
 .sponsorSkipButton:active {
 	position:relative;
 	top:1px;
@@ -79,6 +195,12 @@
 .sponsorSkipDontShowButton:hover {
 	background-color:#bc3315;
 }
+
+.sponsorSkipDontShowButton:focus {
+	outline: none;
+	background-color:#bc3315;
+}
+
 .sponsorSkipDontShowButton:active {
 	position:relative;
 	top:1px;

firefox_manifest.json

@@ -0,0 +1,64 @@
+{
+  "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"
+      ],
+      "css": [
+        "content.css",
+        "./libs/Source+Sans+Pro.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"
+  ],
+  "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
+}

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>

manifest.json

@@ -1,14 +1,15 @@
 {
-  "name": "YTSponsorSkip",
-  "version": "1.0",
-  "description": "Skip youtube video sponsors.",
+  "name": "SponsorBlock for YouTube - Skip Sponsorships",
+  "short_name": "SponsorBlock",
+  "version": "1.0.16",
+  "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": [
-        "content-config.js",
+        "config.js",
         "content.js"
       ],
       "css": [
@@ -21,19 +22,30 @@
     "icons/LogoSponsorBlocker256px.png",
     "icons/IconSponsorBlocker256px.png",
     "icons/PlayerStartIconSponsorBlocker256px.png",
-    "icons/PlayerStopIconSponsorBlocker256px.png"
+    "icons/PlayerStopIconSponsorBlocker256px.png",
+    "icons/PlayerUploadIconSponsorBlocker256px.png",
+    "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
+    "icons/upvote.png",
+    "icons/downvote.png",
+    "icons/PlayerInfoIconSponsorBlocker256px.png",
+    "icons/PlayerDeleteIconSponsorBlocker256px.png",
+    "popup.html"
   ],
   "permissions": [
     "tabs",
     "storage",
-    "notifications"
+    "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",

popup.css

@@ -8,10 +8,45 @@ h1 {
 
 body {
   font-size: 14px;
-  width: 300px;
+  min-width: 300px;
   background-color: #ffd9d9;
 }
 
+.recordingSubtitle {
+	margin-bottom: 10px;
+}
+
+.voteButton {
+	height: 32px;
+	margin-right: 15px;
+	cursor: pointer;
+}
+.voteButton:hover {
+	filter: brightness(80%);
+}
+
+#discordButtonContainer {
+	font-size: 12px;
+}
+
+.sponsorTime {
+	font-size: 20px;
+}
+
+.smallLink {
+	font-size: 10px;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.mediumLink {
+	font-size: 15px;
+	padding-left: 15px;
+	padding-right: 15px;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
 .greenButton {
 	background-color:#ec1c1c;
   -moz-border-radius:28px;
@@ -29,6 +64,10 @@ body {
 .greenButton:hover {
   background-color:#bf2a2a;
 }
+.greenButton:focus {
+	outline: none;
+	background-color:#bf2a2a;
+}
 .greenButton:active {
   position:relative;
   top:1px;
@@ -54,6 +93,10 @@ body {
 .dangerButton:hover {
 	background-color:#bc3315;
 }
+.dangerButton:focus {
+	outline: none;
+	background-color:#bc3315;
+}
 .dangerButton:active {
 	position:relative;
 	top:1px;
@@ -79,6 +122,10 @@ body {
 .warningButton:hover {
 	background-color:#bc8215;
 }
+.warningButton:focus {
+	outline: none;
+	background-color:#bc8215;
+}
 .warningButton:active {
 	position:relative;
 	top:1px;
@@ -100,6 +147,10 @@ body {
 .smallButton:hover {
 	background-color:#fa9806;
 }
+.smallButton:focus {
+	outline: none;
+	background-color:#fa9806;
+}
 .smallButton:active {
 	position:relative;
 	top:1px;

popup.html

@@ -24,8 +24,44 @@
           <div id="downloadedSponsorMessageTimes">
 
           </div>
-          
-          <h2>Record the times of a sponsorship</h2>
+
+          <br/>
+
+          <button id="reportAnIssue" class="dangerButton">Vote On A Sponsor Time</button>
+
+          <div id="issueReporterContainer" style="display: none">
+
+            <h3 style="margin-top: 0px">Vote On A Sponsor Time</h3>
+
+            <div id="issueReporterTimeButtons">
+
+            </div>
+
+          </div>
+
+          <h2 class="recordingSubtitle">Record the times of a sponsorship</h2>
+
+          <p>
+            <span id=sponsorTimesContributionsContainer style="display: none">
+                So far, you've submitted
+                <span id="sponsorTimesContributionsDisplay">
+                  0
+                </span>
+                <span id="sponsorTimesContributionsDisplayEndWord">
+                  sponsors.
+                </span>
+            </span>
+
+            <span id=sponsorTimesViewsContainer style="display: none">
+                You have saved people from 
+                <span id="sponsorTimesViewsDisplay">
+                  0
+                </span>
+                <span id="sponsorTimesViewsDisplayEndWord">
+                  sponsor segments.
+                </span>
+            </span>
+          </p>
 
           <p> 
             Click the button below when the sponsorship starts and ends to record and 
@@ -35,7 +71,9 @@
           <div>
             <button id="sponsorStart" class="greenButton">Sponsorship Starts Now</button>
           </div>
-    
+
+          <sub>Hint: Press the semicolon key while focused on a video report the start/end of a sponsor and quote to submit.</sub>
+  
           <div id="submissionSection" style="display: none">
             <h3>Latest Sponsor Message Times Chosen</h3>
             <b>
@@ -48,8 +86,32 @@
     
             <br/>
             <br/>
+
+            <div id="submitTimesContainer" style="display: none">
+              <button id="submitTimes" class="smallButton">Submit Times</button>
+
+              <div id="submitTimesInfoMessageContainer" style="display: none">
+                <h3 id="submitTimesInfoMessage">
+
+                </h3>
+              </div>
+
+            </div>
     
-            <button id="submitTimes" style="display: none" class="smallButton">Submit Times</button>
+          </div>
+
+          <div id="discordButtonContainer" style="display: none">
+            <br/>
+
+            <a href="https://discord.gg/QnmVMpU" 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">Hide this</span>
           </div>
 
           <div id="optionsButtonContainer">
@@ -64,16 +126,59 @@
 
               <h3>Options</h3>
     
-              <button id="hideVideoPlayerControls" class="warningButton">Hide Button On YouTube Player</button>
-              <button id="showVideoPlayerControls" style="display: none" class="warningButton">Show Button On YouTube Player</button>
+              <button id="hideVideoPlayerControls" class="warningButton">Hide Buttons On YouTube Player</button>
+              <button id="showVideoPlayerControls" style="display: none" class="warningButton">Show Buttons On YouTube Player</button>
+              <br/>
+              <sub>
+                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">Hide Info Button On YouTube Player</button>
+              <button id="showInfoButtonPlayerControls" style="display: none" class="warningButton">Show Info Button On YouTube Player</button>
+              <br/>
+              <sub>
+                This is the button that opens up a popup in the YouTube page.
+              </sub>
+
+              <br/>
+              <br/>
+
+              <button id="hideDeleteButtonPlayerControls" class="warningButton">Hide Delete Button On YouTube Player</button>
+              <button id="showDeleteButtonPlayerControls" style="display: none" class="warningButton">Show Delete Button On YouTube Player</button>
+              <br/>
+              <sub>
+                This is the button that allows you to clear all sponsors on the YouTube player.
+              </sub>
+
+              <br/>
+              <br/>
+
+              <button id="disableSponsorViewTracking" class="warningButton">Disable Sponsor View Tracking</button>
+              <button id="enableSponsorViewTracking" style="display: none" class="warningButton">Enable Sponsor View Tracking</button>
+              <br/>
+              <sub>
+                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">Show Notice Again</button>
           </div>
         </div>
       </div>
   </center>
+
+  <!-- Scripts that need to load after the html -->
+  <script src="config.js"></script>
   <script src="popup.js"></script>
 </html>

popup.js

@@ -1,11 +1,50 @@
+
+// References
+var 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
-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);
+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
 var startTimeChosen = false;
@@ -19,24 +58,104 @@ 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";
+//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});
+      }
+    });
   }
 });
 
-//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";
+//if the don't show notice again variable 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
@@ -54,12 +173,12 @@ function loadTabData(tabs) {
 
   //load video times for this video 
   let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-  chrome.storage.local.get([sponsorTimeKey], function(result) {
+  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;
-        document.getElementById("sponsorStart").innerHTML = "Sponsorship Ends Now";
+        SB.sponsorStart.innerHTML = "Sponsorship Ends Now";
       }
 
       sponsorTimes = sponsorTimesStorage;
@@ -123,40 +242,47 @@ function sendSponsorStartMessage() {
     }, tabs => {
       chrome.tabs.sendMessage(
         tabs[0].id,
-        {from: 'popup', message: 'sponsorStart'}
+        {from: 'popup', message: 'sponsorStart'},
+        startSponsorCallback
       );
     });
 }
 
-chrome.runtime.onMessage.addListener(function (request, sender, callback) {
-  if (request.message == "time") {
-    let sponsorTimesIndex = sponsorTimes.length - (startTimeChosen ? 1 : 0);
+function startSponsorCallback(response) {
+  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();
+  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
-  document.getElementById("sponsorMessageTimes").innerHTML = getSponsorTimesMessage(sponsorTimes);
+  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
@@ -164,6 +290,56 @@ 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";
+      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";
+      upvoteButton.src = chrome.extension.getURL("icons/upvote.png");
+      upvoteButton.addEventListener("click", () => vote(1, UUID));
+
+      let downvoteButton = document.createElement("img");
+      downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID;
+      downvoteButton.className = "voteButton";
+      downvoteButton.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"));
+      }
+    }
   }
 }
 
@@ -189,15 +365,207 @@ function getSponsorTimesMessage(sponsorTimes) {
   return sponsorTimesMessage;
 }
 
-function clearTimes() {
-  //check if the player controls should be toggled
-  if (sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length < 2) {
+//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";
+    let currentSponsorTimeMessage = "";
+
+    let deleteButton = document.createElement("span");
+    deleteButton.id = "sponsorTimeDeleteButton" + i;
+    deleteButton.innerText = "Delete";
+    deleteButton.className = "mediumLink";
+    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";
+    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;
+  }
+
+  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";
+  startTimeMinutes.type = "text";
+  startTimeMinutes.value = getTimeInMinutes(sponsorTimes[index][0]);
+  startTimeMinutes.style.width = "45";
+  
+  let startTimeSeconds = document.createElement("input");
+  startTimeSeconds.id = "startTimeSeconds" + index;
+  startTimeSeconds.className = "sponsorTime";
+  startTimeSeconds.type = "text";
+  startTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][0]);
+  startTimeSeconds.style.width = "60";
+
+  let endTimeMinutes = document.createElement("input");
+  endTimeMinutes.id = "endTimeMinutes" + index;
+  endTimeMinutes.className = "sponsorTime";
+  endTimeMinutes.type = "text";
+  endTimeMinutes.value = getTimeInMinutes(sponsorTimes[index][1]);
+  endTimeMinutes.style.width = "45";
+  
+  let endTimeSeconds = document.createElement("input");
+  endTimeSeconds.id = "endTimeSeconds" + index;
+  endTimeSeconds.className = "sponsorTime";
+  endTimeSeconds.type = "text";
+  endTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][1]);
+  endTimeSeconds.style.width = "60";
+
+  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";
+  saveButton.addEventListener("click", () => saveSponsorTimeEdit(index));
+
+  let editButton = document.getElementById("sponsorTimeEditButton" + index);
+  let sponsorTimesContainer = document.getElementById("sponsorTimesContainer");
+
+  sponsorTimesContainer.removeChild(editButton);
+  sponsorTimesContainer.appendChild(saveButton);
+}
+
+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();
+}
+
+//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: "toggleStartSponsorButton"
+        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
       });
     });
   }
@@ -206,7 +574,7 @@ function clearTimes() {
   sponsorTimes = [];
 
   let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-  chrome.storage.local.set({[sponsorTimeKey]: sponsorTimes});
+  chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
 
   displaySponsorTimes();
 
@@ -217,18 +585,44 @@ function clearTimes() {
 }
 
 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(request) {
-      clearTimes();
+    }, 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.local.set({"dontShowNoticeAgain": false});
+  chrome.storage.sync.set({"dontShowNoticeAgain": false});
 
   chrome.tabs.query({
     active: true,
@@ -239,11 +633,11 @@ function showNoticeAgain() {
     });
   });
 
-  document.getElementById("showNoticeAgain").style.display = "none";
+  SB.showNoticeAgain.style.display = "none";
 }
 
 function hideVideoPlayerControls() {
-  chrome.storage.local.set({"hideVideoPlayerControls": true});
+  chrome.storage.sync.set({"hideVideoPlayerControls": true});
 
   chrome.tabs.query({
     active: true,
@@ -255,12 +649,12 @@ function hideVideoPlayerControls() {
     });
   });
 
-  document.getElementById("hideVideoPlayerControls").style.display = "none";
-  document.getElementById("showVideoPlayerControls").style.display = "unset";
+  SB.hideVideoPlayerControls.style.display = "none";
+  SB.showVideoPlayerControls.style.display = "unset";
 }
 
 function showVideoPlayerControls() {
-  chrome.storage.local.set({"hideVideoPlayerControls": false});
+  chrome.storage.sync.set({"hideVideoPlayerControls": false});
 
   chrome.tabs.query({
     active: true,
@@ -272,15 +666,117 @@ function showVideoPlayerControls() {
     });
   });
 
-  document.getElementById("hideVideoPlayerControls").style.display = "unset";
-  document.getElementById("showVideoPlayerControls").style.display = "none";
+  SB.hideVideoPlayerControls.style.display = "unset";
+  SB.showVideoPlayerControls.style.display = "none";
+}
+
+function 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 variable
   if (!startTimeChosen) {
     startTimeChosen = true;
-  document.getElementById("sponsorStart").innerHTML = "Sponsorship Ends Now";
+  SB.sponsorStart.innerHTML = "Sponsorship Ends Now";
   } else {
     resetStartTimeChosen();
   }
@@ -289,16 +785,18 @@ function updateStartTimeChosen() {
 //set it to false
 function resetStartTimeChosen() {
   startTimeChosen = false;
-  document.getElementById("sponsorStart").innerHTML = "Sponsorship Starts Now";
+  SB.sponsorStart.innerHTML = "Sponsorship Starts Now";
 }
 
+//hides and shows the submit times button when needed
 function showSubmitTimesIfNecessary() {
   //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";
+    document.getElementById("submitTimesContainer").style.display = "unset";
   } else {
-    document.getElementById("submitTimes").style.display = "none";
+    //hide submit times button
+    document.getElementById("submitTimesContainer").style.display = "none";
   }
 }
 
@@ -314,6 +812,62 @@ function displayNoVideo() {
       "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);
@@ -328,8 +882,45 @@ function getFormattedTime(seconds) {
   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) { // 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;
-}
+}