Added popup as an info menu that is opened on the side.

content.css

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

content.js

@@ -32,6 +32,10 @@ var showingStartSponsor = true;
 //should the video controls buttons be added
 var hideVideoPlayerControls = false;
 
+//becomes true when isInfoFound is called
+//this is used to close the popup on YouTube when the other popup opens
+var popupInitialised = false;
+
 //should view counts be tracked
 var trackViewCount = false;
 chrome.storage.sync.get(["trackViewCount"], function(result) {
@@ -55,7 +59,6 @@ chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
 
 chrome.runtime.onMessage.addListener( // Detect URL Changes
   function(request, sender, sendResponse) {
-	  console.log(request.message)
     //message from background script
     if (request.message == "ytvideoid") { 
       videoIDChange(request.id);
@@ -63,7 +66,7 @@ chrome.runtime.onMessage.addListener( // Detect URL Changes
 
     //messages from popup script
     if (request.message == "sponsorStart") {
-      sponsorMessageStarted();
+      sponsorMessageStarted(sendResponse);
     }
 
     if (request.message == "isInfoFound") {
@@ -72,7 +75,14 @@ chrome.runtime.onMessage.addListener( // Detect URL Changes
         found: sponsorDataFound,
         sponsorTimes: sponsorTimes,
         UUIDs: UUIDs
-      })
+      });
+
+      if (popupInitialised && document.getElementById("sponsorBlockPopupContainer") != null) {
+        //the popup should be closed now that another is opening
+        closeInfoMenu();
+      }
+
+      popupInitialised = true;
     }
 
     if (request.message == "getVideoID") {
@@ -286,6 +296,7 @@ function removePlayerControlsButton() {
 //adds or removes the player controls button to what it should be
 function updateVisibilityOfPlayerControlsButton() {
   addPlayerControlsButton();
+  addInfoButton();
   addSubmitButton();
   if (hideVideoPlayerControls) {
     removePlayerControlsButton();
@@ -293,6 +304,9 @@ function updateVisibilityOfPlayerControlsButton() {
 }
 
 function startSponsorClicked() {
+  //it can't update to this info yet
+  closeInfoMenu();
+
   toggleStartSponsorButton();
 
   //send back current time with message
@@ -329,6 +343,32 @@ function toggleStartSponsorButton() {
   changeStartSponsorButton(!showingStartSponsor, true);
 }
 
+//shows the info button on the video player
+function addInfoButton() {
+  if (document.getElementById("infoButton") != null) {
+    //it's already added
+    return;
+  }
+  
+  //make a submit button
+  let infoButton = document.createElement("button");
+  infoButton.id = "infoButton";
+  infoButton.className = "ytp-button playerButton";
+  infoButton.setAttribute("title", "Open SponsorBlock Popup");
+  infoButton.addEventListener("click", openInfoMenu);
+
+  let infoImage = document.createElement("img");
+  infoImage.id = "infoButtonImage";
+  infoImage.className = "playerButtonImage";
+  infoImage.src = chrome.extension.getURL("icons/PlayerInfoIconSponsorBlocker256px.png");
+
+  //add the image to the button
+  infoButton.appendChild(infoImage);
+
+  let referenceNode = document.getElementsByClassName("ytp-right-controls")[0];
+  referenceNode.prepend(infoButton);
+}
+
 //shows the submit button on the video player
 function addSubmitButton() {
   if (document.getElementById("submitButton") != null) {
@@ -357,6 +397,50 @@ function addSubmitButton() {
   referenceNode.prepend(submitButton);
 }
 
+function openInfoMenu() {
+  if (document.getElementById("sponsorBlockPopupContainer") != null) {
+    //it's already added
+    return;
+  }
+
+  popupInitialised = false;
+
+  //hide info button
+  document.getElementById("infoButton").style.display = "none";
+
+  let popup = document.createElement("div");
+  popup.id = "sponsorBlockPopupContainer";
+
+  let popupFrame = document.createElement("iframe");
+  popupFrame.id = "sponsorBlockPopupFrame"
+  popupFrame.src = chrome.extension.getURL("popup.html");
+  popupFrame.className = "popup";
+
+  //close button
+  let closeButton = document.createElement("div");
+  closeButton.innerText = "Close Popup";
+  closeButton.classList = "smallLink";
+  closeButton.setAttribute("align", "center");
+  closeButton.addEventListener("click", closeInfoMenu);
+
+  popup.appendChild(closeButton);
+  popup.appendChild(popupFrame);
+
+  let parentNode = document.getElementById("secondary");
+
+  parentNode.prepend(popup);
+}
+
+function closeInfoMenu() {
+  let popup = document.getElementById("sponsorBlockPopupContainer");
+  if (popup != null) {
+    popup.remove();
+
+    //show info button
+    document.getElementById("infoButton").style.display = "unset";
+  }
+}
+
 //Opens the notice that tells the user that a sponsor was just skipped
 function openSkipNotice(UUID){
   if (dontShowNotice) {
@@ -593,14 +677,13 @@ function dontShowNoticeAgain() {
   closeAllSkipNotices();
 }
 
-function sponsorMessageStarted() {
+function sponsorMessageStarted(callback) {
     let v = document.querySelector('video');
 
     //send back current time
-    chrome.runtime.sendMessage({
+    callback({
-      message: "time",
       time: v.currentTime
-    });
+    })
 
     //update button
     toggleStartSponsorButton();
@@ -612,6 +695,9 @@ function submitSponsorTimes() {
     return;
   }
 
+  //it can't update to this info yet
+  closeInfoMenu();
+
   let currentVideoID = getYouTubeVideoID(document.URL);
 
   let sponsorTimeKey = 'sponsorTimes' + currentVideoID;

firefox_manifest.json

@@ -26,7 +26,8 @@
     "icons/PlayerUploadIconSponsorBlocker256px.png",
     "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
     "icons/upvote.png",
-    "icons/downvote.png"
+    "icons/downvote.png",
+    "icons/PlayerInfoIconSponsorBlocker256px.png"
   ],
   "permissions": [
     "tabs",

manifest.json

@@ -26,7 +26,9 @@
     "icons/PlayerUploadIconSponsorBlocker256px.png",
     "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
     "icons/upvote.png",
-    "icons/downvote.png"
+    "icons/downvote.png",
+    "icons/PlayerInfoIconSponsorBlocker256px.png",
+    "popup.html"
   ],
   "permissions": [
     "tabs",

popup.css

@@ -8,7 +8,7 @@ h1 {
 
 body {
   font-size: 14px;
-  width: 300px;
+  min-width: 300px;
   background-color: #ffd9d9;
 }
 

popup.js

@@ -220,35 +220,34 @@ 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) {
+function startSponsorCallback(response) {
-  if (request.message == "time") {
+  let sponsorTimesIndex = sponsorTimes.length - (startTimeChosen ? 1 : 0);
-    let sponsorTimesIndex = sponsorTimes.length - (startTimeChosen ? 1 : 0);
 
-    if (sponsorTimes[sponsorTimesIndex] == undefined) {
+  if (sponsorTimes[sponsorTimesIndex] == undefined) {
-      sponsorTimes[sponsorTimesIndex] = [];
+    sponsorTimes[sponsorTimesIndex] = [];
-    }
-
-    sponsorTimes[sponsorTimesIndex][startTimeChosen ? 1 : 0] = request.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();
   }
-});
+
+  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() {