Added basic options panel.

Co-authored-by: Official Noob <31563761+OfficialNoob@users.noreply.github.com>

_locales/en/messages.json

@@ -332,5 +332,8 @@
     },
     "userIDChangeWarning": {
         "message": "Warning: Changing the UserID is permanent. Are you sure you would like to do this? Make sure to backup your old one just in case."
+    },
+    "createdBy": {
+        "message": "Created By"
     }
 }

help/index_en.html

@@ -13,7 +13,7 @@
 
   <center>
 
-    <p class="createdBy">Created By <a href="https://ajay.app">Ajay Ramachandran</a></p>
+    <p class="createdBy">Created By <a href="https://ajay.app">Ajay Ramachandran</a> <img src="https://ajay.app/newprofilepic.jpg" height="30" class="profilepiccircle"/></p>
 
     <p>
         Thanks for installing SponsorBlock. Here are some quick tips for getting started. Please join the Discord if you have any questions or suggestions.

manifest.json

@@ -65,5 +65,6 @@
     "128": "icons/LogoSponsorBlocker128px.png",
     "256": "icons/LogoSponsorBlocker256px.png"
   },
+  "options_page": "options/options.html",
   "manifest_version": 2
 }

options/options.css

@@ -0,0 +1,261 @@
+/* Options page CSS */
+body {
+    font-family: Sans-Serif;
+}
+
+#options {
+    max-width: 60%;
+    text-align: left;
+}
+
+.switch-container:after {
+	content: attr(label-name);
+    position: absolute;
+    padding: 4px;
+    width: max-content;
+
+    font-size: 14px;
+    color: white;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    height: 24px;
+}
+
+.switch input { 
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #707070;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 16px;
+    width: 16px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: #fc0303;
+}
+
+input:checked + .slider:before {
+    -webkit-transform: translateX(16px);
+    -ms-transform: translateX(16px);
+    transform: translateX(16px);
+}
+
+/* Rounded sliders */
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
+
+/* Boilerplate CSS from https://ajay.app */
+
+body {
+    background-color: #333333;
+}
+
+.projectPreview {
+    position: relative;
+}
+
+.projectPreviewImage {
+    position: absolute;
+    left: -90;
+    width: 80;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.projectPreviewImageLarge {
+    position: absolute;
+    left: -210;
+    width: 200;
+    top: 50%;
+    transform: translateY(-20%);
+}
+
+.projectPreviewImageLargeRight {
+    position: absolute;
+    right: -210;
+    width: 200;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.createdBy {
+    font-size: 14px;
+    text-align: center;
+    padding-top: 0px;
+    padding-bottom: 0px;
+}
+
+#title {
+    background-color: #636363;
+  
+    text-align: center;
+    vertical-align: middle;
+  
+    font-family: sans-serif;
+    font-size: 50;
+    color: #212121;
+  
+    /* height: 100; */
+  
+    padding: 20;
+  
+    text-decoration: none;
+  
+    transition: font-size 1s;
+}
+
+#title:hover {
+    font-size: 60;
+  
+    transition: font-size 1s;
+}
+
+.subtitle {
+    font-family: sans-serif;
+    font-size: 40;
+    color: #dad8d8;
+  
+    padding-top: 10;
+  
+    transition: font-size 0.4s;
+}
+
+.subtitle:hover {
+    font-size: 45;
+  
+    transition: font-size 0.4s;
+}
+
+.profilepic {
+    background-color: #636363 !important;
+    vertical-align: middle;
+}
+
+.profilepiccircle {
+    vertical-align: middle;
+    overflow: hidden;
+    border-radius: 50%;
+}
+
+a {
+    text-decoration: underline;
+    color: inherit;
+}
+
+.link {
+    padding: 20;
+  
+    height: 80px;
+  
+    transition: height 0.2s;
+}
+
+.link:hover {
+    height: 95px;
+  
+    transition: height 0.2s;
+}
+
+#contact,.smalllink {
+    font-family: sans-serif;
+    font-size: 25;
+    color: #e8e8e8;
+  
+    text-align: center;
+  
+    padding: 10;
+}
+
+#contact {
+    text-decoration: none;
+}
+
+p,li {
+    font-family: sans-serif;
+    font-size: 20;
+    color: #c4c4c4;
+  
+    padding: 10;
+}
+
+p,li,code,a {
+    max-width: 60%;
+    text-align: left;
+    overflow-wrap: break-word;
+}
+
+@media screen and (orientation:portrait) {
+    p,li,code,a {
+        max-width: 100%;
+    }
+  
+    .projectPreviewImage {
+        position: unset;
+        width: 130;
+        display: block;
+        margin: auto;
+        transform: none;
+    }
+}
+
+.previewImage {
+    max-height: 200px;
+}
+
+img {
+    max-width: 100%;
+  
+    text-align: center;
+}
+
+#recentPostTitle {
+    font-family: sans-serif;
+    font-size: 30;
+    color: #dad8d8;
+}
+
+#recentPostDate {
+    font-family: sans-serif;
+    font-size: 15;
+    color: #dad8d8;
+}
+
+h1,h2,h3,h4,h5,h6 {
+    font-family: sans-serif;
+    color: #dad8d8;
+}
+
+svg {
+    text-decoration: none; 
+}

options/options.html

@@ -0,0 +1,34 @@
+<head>
+  <title>Options - SponsorBlock</title>
+
+  <link href="options.css" rel="stylesheet"/>
+
+  <script src="../utils.js"></script>
+  <script src="options.js"></script>
+</head>
+
+<body class="sponsorBlockPageBody">
+
+	<div id="title">
+		<img src="../icons/LogoSponsorBlocker256px.png" height="80" class="profilepiccircle"/>
+		SponsorBlock
+	</div>
+
+  	<center>
+		
+		<p class="createdBy">__MSG_createdBy__ <a href="https://ajay.app">Ajay Ramachandran</a> <img src="../icons/newprofilepic.jpg" height="30" class="profilepiccircle"/></p>
+
+		<h1>__MSG_Options__</h1>
+
+		<div id="options">
+			<label class="switch-container" label-name="__MSG_hideButtons__" toggle-sync-option="hideVideoPlayerControls">
+				<label class="switch">
+					<input id="buttons" type="checkbox">
+					<span class="slider round"></span>
+				</label> 
+			</label>
+		</div>
+
+	</center>
+
+</body>

options/options.js

@@ -0,0 +1,5 @@
+window.addEventListener('DOMContentLoaded', init);
+
+function init() {
+    localizeHtmlPage();
+}

popup.html

@@ -7,7 +7,7 @@
 
   <body class="popupBody">
     <center>
-      <div id="app" class="popupBody">
+      <div id="app" class="popupBody sponsorBlockPageBody">
           <h1 class="popupElement">
             <img src="icons/IconSponsorBlocker256px.png" height="32px" id="sponsorBlockPopupLogo"/>
             __MSG_Name__

utils.js

@@ -49,23 +49,34 @@ function getYouTubeVideoID(url) {
 
 function localizeHtmlPage() {
     //Localize by replacing __MSG_***__ meta tags
-    var objects = document.getElementsByClassName("popupBody")[0].children;
+    var objects = document.getElementsByClassName("sponsorBlockPageBody")[0].children;
     for (var j = 0; j < objects.length; j++) {
         var obj = objects[j];
+        
+        let localizedMessage = getLocalizedMessage(obj.innerHTML.toString());
+        if (localizedMessage) obj.innerHTML = localizedMessage;
 
-        var valStrH = obj.innerHTML.toString();
-        var valNewH = valStrH.replace(/__MSG_(\w+)__/g, function(match, v1)
-        {
-            return v1 ? chrome.i18n.getMessage(v1) : "";
-        });
-
-        if(valNewH != valStrH)
-        {
-            obj.innerHTML = valNewH;
+        // Try on each attribute
+        let attributes = obj.getAttributeNames();
+        for (const attribute of attributes) {
+            localizedMessage = getLocalizedMessage(obj.getAttribute(attribute).toString());
+            if (localizedMessage) obj.setAttribute(attribute) = localizedMessage;
         }
     }
 }
 
+function getLocalizedMessage(text) {
+    var valNewH = text.replace(/__MSG_(\w+)__/g, function(match, v1) {
+        return v1 ? chrome.i18n.getMessage(v1) : "";
+    });
+
+    if(valNewH != text) {
+        return valNewH;
+    } else {
+        return false;
+    }
+}
+
 function generateUserID(length = 36) {
     let charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
     let result = "";