Merge pull request #25 from ajayyy/experimental

Fixed old unsponsored times sometimes being used

.gitignore

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

README.md

@@ -5,6 +5,12 @@
 
 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/mnjggcdmjocbbbhaepdhchncahnbgone/
+
+Firefox: https://addons.mozilla.org/addon/sponsorblock/
+
 # Server
 
 The backend server code is available here: https://github.com/ajayyy/SponsorBlockServer
@@ -19,13 +25,9 @@ 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 `config.js.example` file to `config.js` before installing.
-
-# Firefox extension
-
-None at the moment
+You can load this project as an unpacked extension. Make sure to rename the `config.js.example` file to `config.js` before installing.
 
 # Credit
 

background.js

@@ -3,34 +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, callback);
 
     //this allows the callback to be called later by the submitTimes function
     return true;
-  } else if (request.message == "ytvideoid") {
-    if (previousVideoID != request.videoID) {
-      videoIDChange(request.videoID);
-    }
   } else if (request.message == "addSponsorTime") {
-    addSponsorTime(request.time);
+    addSponsorTime(request.time, request.videoID);
   } else if (request.message == "getSponsorTimes") {
     getSponsorTimes(request.videoID, function(sponsorTimes) {
       callback({
@@ -63,8 +69,8 @@ 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
@@ -78,7 +84,7 @@ function addSponsorTime(time) {
     }
 
     //save this info
-    let sponsorTimeKey = "sponsorTimes" + previousVideoID;
+    let sponsorTimeKey = "sponsorTimes" + videoID;
     chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
   });
 }
@@ -147,7 +153,13 @@ function submitTimes(videoID, callback) {
   });
 }
 
-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
@@ -186,6 +198,12 @@ function getUserID(callback) {
       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();
       

config.js

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

content.css

@@ -1,4 +1,4 @@
-.playerButton {
+.playerButtonImage {
 	height: 60%;
 	top: 0;
 	bottom: 0;
@@ -6,6 +6,10 @@
 	margin: auto;
 }
 
+.playerButton {
+	vertical-align: top;
+}
+
 .sponsorSkipObject {
     font-family: 'Source Sans Pro', sans-serif;
 }

content.js

@@ -1,11 +1,5 @@
 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
@@ -19,7 +13,10 @@ var UUIDs = undefined;
 var v;
 
 //the last time looked at (used to see if this time is in the interval)
-var lastTime;
+var lastTime = -1;
+
+//the actual time (not video time) that the last skip happened
+var lastUnixTimeSkipped = -1;
 
 //the last time in the video a sponsor was skipped
 //used for the go back button
@@ -33,6 +30,17 @@ var showingStartSponsor = true;
 //should the video controls buttons be added
 var hideVideoPlayerControls = false;
 
+//should view counts be tracked
+var trackViewCount = false;
+chrome.storage.sync.get(["trackViewCount"], function(result) {
+  let trackViewCountStorage = result.trackViewCount;
+  if (trackViewCountStorage != undefined) {
+    trackViewCount = trackViewCountStorage;
+  } else {
+    trackViewCount = true;
+  }
+});
+
 //if the notice should not be shown
 //happens when the user click's the "Don't show notice again" button
 var dontShowNotice = false;
@@ -83,9 +91,40 @@ chrome.runtime.onMessage.addListener( // Detect URL Changes
 
       updateVisibilityOfPlayerControlsButton();
     }
+
+    if (request.message == "trackViewCount") {
+      trackViewCount = request.value;
+    }
 });
 
+//check for hotkey pressed
+document.onkeydown = function(e){
+  e = e || window.event;
+  var key = e.which || e.keyCode;
+
+  let video = document.getElementById("movie_player");
+
+  //is the video in focus, otherwise they could be typing a comment
+  if (document.activeElement === video) {
+    if(key == 186){
+      //semicolon
+      startSponsorClicked();
+    } else if (key == 222) {
+      //single quote
+      submitSponsorTimes();
+    }
+  }
+}
+
 function videoIDChange(id) {
+  //reset last sponsor times
+  lastTime = -1;
+  lastUnixTimeSkipped = -1;
+
+  //reset sponsor times
+  sponsorTimes = undefined;
+  UUIDs = undefined;
+
   //reset sponsor data found check
   sponsorDataFound = false;
   sponsorsLookup(id);
@@ -117,7 +156,6 @@ function videoIDChange(id) {
 
 function sponsorsLookup(id) {
     v = document.querySelector('video') // Youtube video player
-    let xmlhttp = new XMLHttpRequest();
     
     //check database for sponsor times
     sendRequestToServer('GET', "/api/getVideoSponsorTimes?videoID=" + id, function(xmlhttp) {
@@ -151,28 +189,46 @@ function sponsorsLookup(id) {
 }
 
 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];
-          
-          let currentUUID =  UUIDs[i];
-          lastSponsorTimeSkippedUUID = currentUUID; 
-
-          //send out the message saying that a sponsor message was skipped
-          openSkipNotice();
-
-          setTimeout(() => closeSkipNotice(currentUUID), 7000);
-        }
-
-        lastTime = v.currentTime;
+  //see if any sponsor start time was just passed
+  for (let i = 0; i < sponsorTimes.length; i++) {
+    //this means part of the video was just skipped
+    if (Math.abs(v.currentTime - lastTime) > 1 && lastTime != -1) {
+      //make lastTime as if the video was playing normally
+      lastTime = v.currentTime - 0.0001;
     }
+
+    let currentTime = Date.now();
+
+    //If the sponsor time is in between these times, skip it
+    //Checks if the last time skipped to is not too close to now, to make sure not to get too many
+    //  sponsor times in a row (from one troll)
+    //the last term makes 0 second start times possible
+    if ((Math.abs(v.currentTime - sponsorTimes[i][0]) < 0.3 && sponsorTimes[i][0] >= lastTime && sponsorTimes[i][0] <= v.currentTime
+          && (lastUnixTimeSkipped == -1 || currentTime - lastUnixTimeSkipped > 500)) || (lastTime == -1 && sponsorTimes[i][0] == 0)) {
+      //skip it
+      v.currentTime = sponsorTimes[i][1];
+
+      lastSponsorTimeSkipped = sponsorTimes[i][0];
+      
+      let currentUUID =  UUIDs[i];
+      lastSponsorTimeSkippedUUID = currentUUID; 
+
+      //send out the message saying that a sponsor message was skipped
+      openSkipNotice(currentUUID);
+
+      setTimeout(() => closeSkipNotice(currentUUID), 7000);
+
+      //send telemetry that a this sponsor was skipped happened
+      if (trackViewCount) {
+        sendRequestToServer("GET", "/api/viewedVideoSponsorTime?UUID=" + currentUUID);
+      }
+    }
+  }
+
+  //don't keep track until they are loaded in
+  if (sponsorTimes.length > 0) {
+    lastTime = v.currentTime;
+  }
 }
 
 function goBackToPreviousTime(UUID) {
@@ -193,13 +249,13 @@ function addPlayerControlsButton() {
 
   let startSponsorButton = document.createElement("button");
   startSponsorButton.id = "startSponsorButton";
-  startSponsorButton.className = "ytp-button";
+  startSponsorButton.className = "ytp-button playerButton";
   startSponsorButton.setAttribute("title", "Sponsor Starts Now");
   startSponsorButton.addEventListener("click", startSponsorClicked);
 
   let startSponsorImage = document.createElement("img");
   startSponsorImage.id = "startSponsorImage";
-  startSponsorImage.className = "playerButton";
+  startSponsorImage.className = "playerButtonImage";
   startSponsorImage.src = chrome.extension.getURL("icons/PlayerStartIconSponsorBlocker256px.png");
 
   //add the image to the button
@@ -217,11 +273,10 @@ function removePlayerControlsButton() {
 
 //adds or removes the player controls button to what it should be
 function updateVisibilityOfPlayerControlsButton() {
+  addPlayerControlsButton();
+  addSubmitButton();
   if (hideVideoPlayerControls) {
     removePlayerControlsButton();
-  } else {
-    addPlayerControlsButton();
-    addSubmitButton();
   }
 }
 
@@ -231,7 +286,8 @@ function startSponsorClicked() {
   //send back current time with message
   chrome.runtime.sendMessage({
     message: "addSponsorTime",
-    time: v.currentTime
+    time: v.currentTime,
+    videoID: getYouTubeVideoID(document.URL)
   });
 }
 
@@ -269,7 +325,7 @@ function addSubmitButton() {
   //make a submit button
   let submitButton = document.createElement("button");
   submitButton.id = "submitButton";
-  submitButton.className = "ytp-button";
+  submitButton.className = "ytp-button playerButton";
   submitButton.setAttribute("title", "Submit Sponsor Times");
   submitButton.addEventListener("click", submitSponsorTimes);
   //hide it at the start
@@ -277,7 +333,7 @@ function addSubmitButton() {
 
   let submitImage = document.createElement("img");
   submitImage.id = "submitButtonImage";
-  submitImage.className = "playerButton";
+  submitImage.className = "playerButtonImage";
   submitImage.src = chrome.extension.getURL("icons/PlayerUploadIconSponsorBlocker256px.png");
 
   //add the image to the button
@@ -288,12 +344,35 @@ function addSubmitButton() {
 }
 
 //Opens the notice that tells the user that a sponsor was just skipped
-function openSkipNotice(){
+function openSkipNotice(UUID){
   if (dontShowNotice) {
     //don't show, return
     return;
   }
 
+  //check if page is loaded yet (for 0 second sponsors, the page might not be loaded yet)
+  //it looks for the view count div and sees if it is full yet
+  //querySelectorAll is being used like findElementById for multiple objects, because for
+  //some reason YouTube has put more than one object with one ID.
+  let viewCountNode = document.querySelectorAll("#count");
+  //check to see if the length is over zero, otherwise it's a different YouTube theme probably
+  if (viewCountNode.length > 0) {
+    //check if any of these have text
+    let viewCountVisible = false;
+    for (let i = 0; i < viewCountNode.length; i++) {
+      if (viewCountNode[i].innerText != null) {
+        viewCountVisible = true;
+        break;
+      }
+    }
+    if (!viewCountVisible) {
+      //this is the new YouTube layout and it is still loading
+      //wait a bit for opening the notice
+      setTimeout(() => openSkipNotice(UUID), 200);
+      return;
+    }
+  }
+
   let amountOfPreviousNotices = document.getElementsByClassName("sponsorSkipNotice").length;
 
   if (amountOfPreviousNotices > 0) {
@@ -303,45 +382,43 @@ function openSkipNotice(){
     previousNotice.classList.add("secondSkipNotice")
   }
 
-  let UUID = lastSponsorTimeSkippedUUID;
-
   let noticeElement = document.createElement("div");
   //what sponsor time this is about
-  noticeElement.id = "sponsorSkipNotice" + lastSponsorTimeSkippedUUID;
+  noticeElement.id = "sponsorSkipNotice" + UUID;
   noticeElement.classList.add("sponsorSkipObject");
   noticeElement.classList.add("sponsorSkipNotice");
-  noticeElement.style.zIndex = 1 + amountOfPreviousNotices;
+  noticeElement.style.zIndex = 5 + amountOfPreviousNotices;
 
   let logoElement = document.createElement("img");
-  logoElement.id = "sponsorSkipLogo" + lastSponsorTimeSkippedUUID;
+  logoElement.id = "sponsorSkipLogo" + UUID;
   logoElement.className = "sponsorSkipLogo";
   logoElement.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png");
 
   let noticeMessage = document.createElement("div");
-  noticeMessage.id = "sponsorSkipMessage" + lastSponsorTimeSkippedUUID;
+  noticeMessage.id = "sponsorSkipMessage" + UUID;
   noticeMessage.classList.add("sponsorSkipMessage");
   noticeMessage.classList.add("sponsorSkipObject");
   noticeMessage.innerText = "Hey, you just skipped a sponsor!";
   
   let noticeInfo = document.createElement("p");
-  noticeInfo.id = "sponsorSkipInfo" + lastSponsorTimeSkippedUUID;
+  noticeInfo.id = "sponsorSkipInfo" + UUID;
   noticeInfo.classList.add("sponsorSkipInfo");
   noticeInfo.classList.add("sponsorSkipObject");
   noticeInfo.innerText = "This message will disapear in 7 seconds";
   
   //thumbs up and down buttons
   let voteButtonsContainer = document.createElement("div");
-  voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + lastSponsorTimeSkippedUUID;
+  voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID;
   voteButtonsContainer.setAttribute("align", "center");
 
   let upvoteButton = document.createElement("img");
-  upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + lastSponsorTimeSkippedUUID;
+  upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
   upvoteButton.className = "sponsorSkipObject voteButton";
   upvoteButton.src = chrome.extension.getURL("icons/upvote.png");
   upvoteButton.addEventListener("click", () => vote(1, UUID));
 
   let downvoteButton = document.createElement("img");
-  downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + lastSponsorTimeSkippedUUID;
+  downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID;
   downvoteButton.className = "sponsorSkipObject voteButton";
   downvoteButton.src = chrome.extension.getURL("icons/downvote.png");
   downvoteButton.addEventListener("click", () => vote(0, UUID));

firefox_manifest.json

@@ -0,0 +1,61 @@
+{
+  "name": "SponsorBlock - YouTube Sponsorship Blocker",
+  "short_name": "SponsorBlock",
+  "version": "1.0.7",
+  "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"
+  ],
+  "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
+}

manifest.json

@@ -1,7 +1,8 @@
 {
-  "name": "YTSponsorSkip",
-  "version": "1.0",
-  "description": "Skip youtube video sponsors.",
+  "name": "SponsorBlock - YouTube Sponsorship Blocker",
+  "short_name": "SponsorBlock",
+  "version": "1.0.7",
+  "description": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.",
   "content_scripts": [
     {
       "matches": [
@@ -30,7 +31,8 @@
   "permissions": [
     "tabs",
     "storage",
-    "notifications"
+    "notifications",
+    "https://sponsor.ajay.app/*"
   ],
   "browser_action": {
     "default_title": "SponsorBlock",

popup.html

@@ -41,8 +41,26 @@
 
           <h2 class="recordingSubtitle">Record the times of a sponsorship</h2>
 
-          <p id="sponsorTimesContributionsDisplay" style="display: none">
-            So far, you've submitted no sponsor times.
+          <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> 
@@ -53,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>
@@ -94,14 +114,37 @@
     
               <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/>
+              <sub>
+                This hides the button that appears 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="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

@@ -5,6 +5,8 @@ document.getElementById("submitTimes").addEventListener("click", submitTimes);
 document.getElementById("showNoticeAgain").addEventListener("click", showNoticeAgain);
 document.getElementById("hideVideoPlayerControls").addEventListener("click", hideVideoPlayerControls);
 document.getElementById("showVideoPlayerControls").addEventListener("click", showVideoPlayerControls);
+document.getElementById("disableSponsorViewTracking").addEventListener("click", disableSponsorViewTracking);
+document.getElementById("enableSponsorViewTracking").addEventListener("click", enableSponsorViewTracking);
 document.getElementById("optionsButton").addEventListener("click", openOptions);
 document.getElementById("reportAnIssue").addEventListener("click", reportAnIssue);
 
@@ -38,20 +40,61 @@ chrome.storage.sync.get(["hideVideoPlayerControls"], function(result) {
   }
 });
 
+//show proper tracking option
+chrome.storage.sync.get(["trackViewCount"], function(result) {
+  let trackViewCount = result.trackViewCount;
+  if (trackViewCount != undefined && !trackViewCount) {
+    document.getElementById("disableSponsorViewTracking").style.display = "none";
+    document.getElementById("enableSponsorViewTracking").style.display = "unset";
+  }
+});
+
 //get the amount of times this user has contributed and display it to thank them
 chrome.storage.sync.get(["sponsorTimesContributed"], function(result) {
   if (result.sponsorTimesContributed != undefined) {
+    let sponsorTimesContributionsContainer = document.getElementById("sponsorTimesContributionsContainer");
     let sponsorTimesContributionsDisplay = document.getElementById("sponsorTimesContributionsDisplay");
+    let sponsorTimesContributionsDisplayEndWord = document.getElementById("sponsorTimesContributionsDisplayEndWord");
 
     if (result.sponsorTimesContributed > 1) {
-      sponsorTimesContributionsDisplay.innerText = "So far, you've submitted " + result.sponsorTimesContributed + " sponsor times.";
+      sponsorTimesContributionsDisplayEndWord.innerText = "sponsors."
     } else {
-      sponsorTimesContributionsDisplay.innerText = "So far, you've submitted " + result.sponsorTimesContributed + " sponsor time.";
+      sponsorTimesContributionsDisplayEndWord.innerText = "sponsor."
     }
-    sponsorTimesContributionsDisplay.style.display = "unset";
+    sponsorTimesContributionsDisplay.innerText = result.sponsorTimesContributed;
+    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) {
+              let sponsorTimesViewsContainer = document.getElementById("sponsorTimesViewsContainer");
+              let sponsorTimesViewsDisplay = document.getElementById("sponsorTimesViewsDisplay");
+              let sponsorTimesViewsDisplayEndWord = document.getElementById("sponsorTimesViewsDisplayEndWord");
+      
+              if (viewCount > 1) {
+                sponsorTimesViewsDisplayEndWord.innerText = "sponsor segments."
+              } else {
+                sponsorTimesViewsDisplayEndWord.innerText = "sponsor segment."
+              }
+              sponsorTimesViewsDisplay.innerText = viewCount;
+              sponsorTimesViewsContainer.style.display = "unset";
+            }
+          }
+        });
+      }
+    });
   }
 });
 
+
 chrome.tabs.query({
   active: true,
   currentWindow: true
@@ -309,7 +352,7 @@ function submitTimes() {
           document.getElementById("submitTimesInfoMessage").innerText = "This has already been submitted before";
           document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
         } else {
-          document.getElementById("submitTimesInfoMessage").innerText = "There was an error submitting your sponsor times, please try again later";
+          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";
         }
       }
@@ -366,6 +409,40 @@ function showVideoPlayerControls() {
   document.getElementById("showVideoPlayerControls").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
+    });
+  });
+
+  document.getElementById("disableSponsorViewTracking").style.display = "none";
+  document.getElementById("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
+    });
+  });
+
+  document.getElementById("enableSponsorViewTracking").style.display = "none";
+  document.getElementById("disableSponsorViewTracking").style.display = "unset";
+}
+
 function updateStartTimeChosen() {
   //update startTimeChosen variable
   if (!startTimeChosen) {
@@ -466,6 +543,25 @@ function getFormattedTime(seconds) {
   return formatted;
 }
 
+function sendRequestToServer(type, address, callback) {
+  let xmlhttp = new XMLHttpRequest();
+
+  xmlhttp.open(type, serverAddress + address, true);
+
+  if (callback != undefined) {
+    xmlhttp.onreadystatechange = function () {
+      callback(xmlhttp, false);
+    };
+  
+    xmlhttp.onerror = function(ev) {
+      callback(xmlhttp, true);
+    };
+  }
+
+  //submit this request
+  xmlhttp.send();
+}
+
 function getYouTubeVideoID(url) { // Return video id or false
   var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
   var match = url.match(regExp);