Added logo and changed up colours to support logo.

Logo by @munadikieh

.gitignore

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

README.md

@@ -1,3 +1,6 @@
+![Logo](icons/LogoSponsorBlocker256px.png)
+<sub>Logo by @munadikieh</sub>
+
 # SponsorBlocker
 
 SponsorBlocker is an extension that will skip over sponsored segments of YouTube videos. SponsorBlocker is a crowdsourced browser extension that let's anyone submit the start and end time's of sponsored segments of YouTube videos. Once one person submits this information, everyone else with this extension will skip right over the sponsored segment.

background.js

@@ -69,7 +69,7 @@ function videoIDChange(currentVideoID) {
           type: "basic",
           title: "Do you want to submit the sponsor times for watch?v=" + previousVideoID + "?",
           message: "You seem to have left some sponsor times unsubmitted. Go back to that page to submit them (they are not deleted).",
-          iconUrl: "icon.png"
+          iconUrl: "./icons/LogoSponsorBlocker256px.png"
         });
       }
 

content.css

@@ -2,10 +2,18 @@
     font-family: 'Source Sans Pro', sans-serif;
 }
 
+#sponsorSkipLogo {
+	height: 64px;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto;
+}
+
 #sponsorSkipNotice {
     min-height: 120px;
     min-width: 400px;
-    background-color: rgba(217, 255, 220, 0.8);
+    background-color: rgba(255, 217, 217, 0.8);
     position: absolute;
     z-index: 1;
 }
@@ -19,24 +27,24 @@
 }
 
 .sponsorSkipButton {
-	background-color:#44c767;
+	background-color:#ec1c1c;
 	-moz-border-radius:28px;
 	-webkit-border-radius:28px;
 	border-radius:28px;
-	border:1px solid #18ab29;
+	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 #2f6627;
+    text-shadow:0px 0px 0px #662727;
     
     margin-top: 5px;
     margin-right: 15px;
 }
 .sponsorSkipButton:hover {
-	background-color:#5cbf2a;
+	background-color:#bf2a2a;
 }
 .sponsorSkipButton:active {
 	position:relative;

content.js

@@ -135,6 +135,10 @@ function openSkipNotice(){
   noticeElement.id = "sponsorSkipNotice";
   noticeElement.className = "sponsorSkipObject";
 
+  var logoElement = document.createElement("img");
+  logoElement.id = "sponsorSkipLogo";
+  logoElement.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png");
+
   var noticeMessage = document.createElement("p");
   noticeMessage.id = "sponsorSkipMessage";
   noticeMessage.className = "sponsorSkipObject";
@@ -167,6 +171,7 @@ function openSkipNotice(){
   buttonContainer.appendChild(document.createElement("br"));
   buttonContainer.appendChild(dontShowAgainButton);
 
+  noticeElement.appendChild(logoElement);
   noticeElement.appendChild(noticeMessage);
   noticeElement.appendChild(buttonContainer);
 

manifest.json

@@ -17,6 +17,9 @@
       ]
     }
   ],
+  "web_accessible_resources": [
+    "icons/LogoSponsorBlocker256px.png"
+  ],
   "permissions": [
     "tabs",
     "storage",
@@ -29,5 +32,12 @@
   "background": {
     "scripts":["background.js"]
   },
+  "icons": {
+    "16": "icons/IconSponsorBlocker16px.png",
+    "32": "icons/IconSponsorBlocker32px.png",
+    "64": "icons/LogoSponsorBlocker64px.png",
+    "128": "icons/LogoSponsorBlocker128px.png",
+    "256": "icons/LogoSponsorBlocker256px.png"
+  },
   "manifest_version": 2
 }

popup.css

@@ -4,28 +4,32 @@
   font-family: 'Source Sans Pro', sans-serif;
 }
 
+h1 {
+	margin-top: 0px;
+}
+
 body {
   font-size: 14px;
   width: 300px;
-  background-color: #d9ffdc;
+  background-color: #ffd9d9;
 }
 
 .greenButton {
-  background-color:#44c767;
+	background-color:#ec1c1c;
   -moz-border-radius:28px;
   -webkit-border-radius:28px;
   border-radius:28px;
-  border:1px solid #18ab29;
+  border:1px solid #d31919;
   display:inline-block;
   cursor:pointer;
   color:#ffffff;
   font-size:16px;
   padding:8px 37px;
   text-decoration:none;
-  text-shadow:0px 0px 0px #2f6627;
+  text-shadow:0px 0px 0px #662727;
 }
 .greenButton:hover {
-  background-color:#5cbf2a;
+  background-color:#bf2a2a;
 }
 .greenButton:active {
   position:relative;
@@ -58,11 +62,11 @@ body {
 }
 
 .smallButton {
-	background-color:#2dabf9;
+	background-color:#f9902d;
 	-moz-border-radius:3px;
 	-webkit-border-radius:3px;
 	border-radius:3px;
-	border:1px solid #2dabf9;
+	border:1px solid #f9a72d;
 	display:inline-block;
 	cursor:pointer;
 	color:#ffffff;
@@ -71,7 +75,7 @@ body {
 	text-decoration:none;
 }
 .smallButton:hover {
-	background-color:#0688fa;
+	background-color:#fa9806;
 }
 .smallButton:active {
 	position:relative;

popup.html

@@ -6,6 +6,8 @@
 
   <center>
     <div id="app">
+        <img src="icons/LogoSponsorBlocker256px.png" height="64px"/>
+
         <h1>SponsorBlock</h1>
 
         <!-- Loading text -->