Added thumbs up and down buttons.

README.md

@@ -26,3 +26,7 @@ It will be on the chrome webstore soon once I get some more UI features in, such
 # Firefox extension
 
 None at the moment
+
+# Credit
+
+Some i made by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>

content.css

@@ -12,12 +12,13 @@
 }
 
 #sponsorSkipNotice {
-    min-height: 125px;
+    min-height: 165px;
     min-width: 400px;
     background-color: rgba(255, 217, 217, 0.8);
     position: absolute;
 	z-index: 1;
 	border: 3px solid rgba(0, 0, 0, 0.8);
+	margin-top: -50px;
 }
 
 #sponsorSkipMessage {
@@ -26,12 +27,23 @@
     text-align: center;
     margin-top: 10px;
 	font-weight: bold;
+	margin-top: 4px;
 }
 
 #sponsorSkipInfo {
 	font-size: 10px;
     color: #000000;
-    text-align: center;
+	text-align: center;
+	margin-top: 0px;
+}
+
+.voteButton {
+	height: 32px;
+	margin-right: 15px;
+	cursor: pointer;
+}
+.voteButton:hover {
+	filter: brightness(80%);
 }
 
 .sponsorSkipButton {
@@ -54,6 +66,12 @@
 .sponsorSkipButton:hover {
 	background-color:#bf2a2a;
 }
+
+.sponsorSkipButton:focus {
+	outline: none;
+	background-color:#bf2a2a;
+}
+
 .sponsorSkipButton:active {
 	position:relative;
 	top:1px;
@@ -79,6 +97,12 @@
 .sponsorSkipDontShowButton:hover {
 	background-color:#bc3315;
 }
+
+.sponsorSkipDontShowButton:focus {
+	outline: none;
+	background-color:#bc3315;
+}
+
 .sponsorSkipDontShowButton:active {
 	position:relative;
 	top:1px;

content.js

@@ -250,26 +250,39 @@ function openSkipNotice(){
   let noticeInfo = document.createElement("p");
   noticeInfo.id = "sponsorSkipInfo";
   noticeInfo.className = "sponsorSkipObject";
-	noticeInfo.innerText = "This message will disapear in 7 seconds";
+  noticeInfo.innerText = "This message will disapear in 7 seconds";
+  
+  //thumbs up and down buttons
+  let voteButtonsContainer = document.createElement("div");
+  voteButtonsContainer.setAttribute("align", "center");
+
+  let upvoteButton = document.createElement("img");
+  upvoteButton.className = "sponsorSkipObject voteButton";
+  upvoteButton.src = chrome.extension.getURL("icons/upvote.png");
+
+  let downvoteButton = document.createElement("img");
+  downvoteButton.className = "sponsorSkipObject voteButton";
+  downvoteButton.src = chrome.extension.getURL("icons/downvote.png");
+
+  //add thumbs up and down buttons to the container
+  voteButtonsContainer.appendChild(upvoteButton);
+  voteButtonsContainer.appendChild(downvoteButton);
 
   let buttonContainer = document.createElement("div");
   buttonContainer.setAttribute("align", "center");
 
   let goBackButton = document.createElement("button");
   goBackButton.innerText = "Go back";
-  goBackButton.className = "sponsorSkipObject";
   goBackButton.className = "sponsorSkipButton";
   goBackButton.addEventListener("click", goBackToPreviousTime);
 
   let hideButton = document.createElement("button");
   hideButton.innerText = "Dismiss";
-  hideButton.className = "sponsorSkipObject";
   hideButton.className = "sponsorSkipButton";
   hideButton.addEventListener("click", closeSkipNotice);
 
   let dontShowAgainButton = document.createElement("button");
   dontShowAgainButton.innerText = "Don't Show This Again";
-  dontShowAgainButton.className = "sponsorSkipObject";
   dontShowAgainButton.className = "sponsorSkipDontShowButton";
   dontShowAgainButton.addEventListener("click", dontShowNoticeAgain);
 
@@ -282,6 +295,7 @@ function openSkipNotice(){
   noticeElement.appendChild(logoElement);
   noticeElement.appendChild(noticeMessage);
   noticeElement.appendChild(noticeInfo);
+  noticeElement.appendChild(voteButtonsContainer);
   noticeElement.appendChild(buttonContainer);
 
   let referenceNode = document.getElementById("info");

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

@@ -21,7 +21,9 @@
     "icons/LogoSponsorBlocker256px.png",
     "icons/IconSponsorBlocker256px.png",
     "icons/PlayerStartIconSponsorBlocker256px.png",
-    "icons/PlayerStopIconSponsorBlocker256px.png"
+    "icons/PlayerStopIconSponsorBlocker256px.png",
+    "icons/upvote.png",
+    "icons/downvote.png"
   ],
   "permissions": [
     "tabs",

popup.css

@@ -29,6 +29,10 @@ body {
 .greenButton:hover {
   background-color:#bf2a2a;
 }
+.greenButton:focus {
+	outline: none;
+	background-color:#bf2a2a;
+}
 .greenButton:active {
   position:relative;
   top:1px;
@@ -54,6 +58,10 @@ body {
 .dangerButton:hover {
 	background-color:#bc3315;
 }
+.dangerButton:focus {
+	outline: none;
+	background-color:#bc3315;
+}
 .dangerButton:active {
 	position:relative;
 	top:1px;
@@ -79,6 +87,10 @@ body {
 .warningButton:hover {
 	background-color:#bc8215;
 }
+.warningButton:focus {
+	outline: none;
+	background-color:#bc8215;
+}
 .warningButton:active {
 	position:relative;
 	top:1px;
@@ -100,6 +112,10 @@ body {
 .smallButton:hover {
 	background-color:#fa9806;
 }
+.smallButton:focus {
+	outline: none;
+	background-color:#fa9806;
+}
 .smallButton:active {
 	position:relative;
 	top:1px;