Merge pull request #248 from ajayyy/hotfix-invidious

Fixed firefox content script registration

README.md

@@ -32,6 +32,8 @@
 
 SponsorBlock is an extension that will skip over sponsored segments of YouTube videos. SponsorBlock is a crowdsourced browser extension that lets anyone submit the start and end times of sponsored segments of YouTube videos. Once one person submits this information, everyone else with this extension will skip right over the sponsored segment.
 
+Also support Invidio.us.
+
 # Server
 
 The backend server code is available here: https://github.com/ajayyy/SponsorBlockServer

SB.js

@@ -9,49 +9,57 @@ SB = {
 
 // Function setup
 
+// Allows a map to be conveted into json form
+// Currently used for local storage
 Map.prototype.toJSON = function() {
     return Array.from(this.entries());
 };
 
+// Proxy Map changes to Map in SB.localConfig
+// Saves the changes to chrome.storage in json form
 class MapIO {
     constructor(id) {
-		this.id = id;
-		this.map = SB.localConfig[this.id];
+	// The name of the item in the array
+        this.id = id;
+	// A local copy of the map (SB.config.mapname.map)
+        this.map = SB.localConfig[this.id];
     }
-
     set(key, value) {
+	// Proxy to map
         this.map.set(key, value);
+        // Store updated map locally
+        chrome.storage.sync.set({
+            [this.id]: encodeStoredItem(this.map)
+        });
+        return this.map;
+    }
 
-        SB.config.handler.set(undefined, this.id, encodeStoredItem(this.map));
+    get(key) {
+        return this.map.get(key);
+    }
+	
+    has(key) {
+        return this.map.has(key);
+    }
+	
+    size() {
+        return this.map.size;
+    }
+	
+    delete(key) {
+	// Proxy to map
+        this.map.delete(key);
+	// Store updated map locally
+	chrome.storage.sync.set({
+            [this.id]: encodeStoredItem(this.map)
+        });
+    }
 
-		return this.map;
-    }
-	
-	get(key) {
-		return this.map.get(key);
-    }
-	
-	has(key) {
-		return this.map.has(key);
-    }
-	
-	deleteProperty(key) {
-		if (this.map.has(key)) {
-			this.map.delete(key);
-			return true;
-		} else {
-			return false;
-		}
-	}
-	
-	size() {
-		return this.map.size;
-    }
-	
-	delete(key) {
-		this.map.delete(key);
-        
-        SB.config.handler.set(undefined, this.id, encodeStoredItem(this.map));
+    clear() {
+        this.map.clear();
+	chrome.storage.sync.set({
+            [this.id]: encodeStoredItem(this.map)
+        });
     }
 }
 
@@ -62,8 +70,9 @@ class MapIO {
  * @param {*} data 
  */
 function encodeStoredItem(data) {
-	if(!(data instanceof Map)) return data;
-	return JSON.stringify(data);
+    // if data is Map convert to json for storing
+    if(!(data instanceof Map)) return data;
+    return JSON.stringify(data);
 }
 
 /**
@@ -75,11 +84,11 @@ function encodeStoredItem(data) {
 function decodeStoredItem(data) {
     if(typeof data !== "string") return data;
     
-	try {
+    try {
         let str = JSON.parse(data);
         
-		if(!Array.isArray(str)) return data;
-		return new Map(str);
+        if(!Array.isArray(str)) return data;
+        return new Map(str);
     } catch(e) {
 
         // If all else fails, return the data
@@ -99,20 +108,25 @@ function configProxy() {
     });
 	
     var handler = {
-        set: function(obj, prop, value) {
+        set(obj, prop, value) {
             SB.localConfig[prop] = value;
 
             chrome.storage.sync.set({
                 [prop]: encodeStoredItem(value)
             });
         },
-        get: function(obj, prop) {
+
+        get(obj, prop) {
             let data = SB.localConfig[prop];
             if(data instanceof Map) data = new MapIO(prop);
 
-			return obj[prop] || data;
+            return obj[prop] || data;
+        },
+	
+        deleteProperty(obj, prop) {
+	    chrome.storage.sync.remove(prop);
         }
-		
+
     };
 
     return new Proxy({handler}, handler);
@@ -128,37 +142,37 @@ function fetchConfig() {
 }
 
 function migrateOldFormats() { // Convert sponsorTimes format
-    for (key in SB.localConfig) {
+    for (const key in SB.localConfig) {
         if (key.startsWith("sponsorTimes") && key !== "sponsorTimes" && key !== "sponsorTimesContributed") {
             SB.config.sponsorTimes.set(key.substr(12), SB.config[key]);
-            chrome.storage.sync.remove(key);
+            delete SB.config[key];
         }
     }
 }
 
 async function setupConfig() {
     await fetchConfig();
-	addDefaults();
-	convertJSON();
-	SB.config = configProxy();
+    addDefaults();
+    convertJSON();
+    SB.config = configProxy();
     migrateOldFormats();
 }
 
 SB.defaults = {
-	"sponsorTimes": new Map(),
-	"startSponsorKeybind": ";",
-	"submitKeybind": "'",
-	"minutesSaved": 0,
-	"skipCount": 0,
-	"sponsorTimesContributed": 0,
-	"disableSkipping": false,
-	"disableAutoSkip": false,
-	"trackViewCount": true,
-	"dontShowNotice": false,
-	"hideVideoPlayerControls": false,
-	"hideInfoButtonPlayerControls": false,
-	"hideDeleteButtonPlayerControls": false,
-	"hideDiscordLaunches": 0,
+    "sponsorTimes": new Map(),
+    "startSponsorKeybind": ";",
+    "submitKeybind": "'",
+    "minutesSaved": 0,
+    "skipCount": 0,
+    "sponsorTimesContributed": 0,
+    "disableSkipping": false,
+    "disableAutoSkip": false,
+    "trackViewCount": true,
+    "dontShowNotice": false,
+    "hideVideoPlayerControls": false,
+    "hideInfoButtonPlayerControls": false,
+    "hideDeleteButtonPlayerControls": false,
+    "hideDiscordLaunches": 0,
     "hideDiscordLink": false,
     "invidiousInstances": ["invidio.us", "invidiou.sh", "invidious.snopyta.org"],
     "invidiousUpdateInfoShowCount": 0,
@@ -167,21 +181,21 @@ SB.defaults = {
 
 // Reset config
 function resetConfig() {
-	SB.config = SB.defaults;
+    SB.config = SB.defaults;
 };
 
 function convertJSON() {
-	Object.keys(SB.defaults).forEach(key => {
-		SB.localConfig[key] = decodeStoredItem(SB.localConfig[key], key);
-	});
+    Object.keys(SB.defaults).forEach(key => {
+        SB.localConfig[key] = decodeStoredItem(SB.localConfig[key], key);
+    });
 }
 
 // Add defaults
 function addDefaults() {
     for (const key in SB.defaults) {
         if(!SB.localConfig.hasOwnProperty(key)) {
-			SB.localConfig[key] = SB.defaults[key];
-		}
+	    SB.localConfig[key] = SB.defaults[key];
+        }
     }
 };
 

_locales/en/messages.json

@@ -349,7 +349,7 @@
         "message": "Support Invidious"
     },
     "supportInvidiousDescription": {
-        "message": "Invidious (invidio.us) is a third party YouTube client. To enable support, you must accept the extra permissions. This does NOT work in incongnito on chrome and other chromium variants."
+        "message": "Invidious (invidio.us) is a third party YouTube client. To enable support, you must accept the extra permissions. This does NOT work in incongnito on Chrome and other Chromium variants."
     },
     "optionsInfo": {
         "message": "Enable Invidious support, disable autoskip, hide buttons and more."

_locales/pl_PL/messages.json

@@ -0,0 +1,390 @@
+{
+  "Name": {
+      "message": "SponsorBlock",
+      "description": "Nazwa rozszerzenia."
+  },
+  "fullName": {
+      "message": "SponsorBlock na YouTube - Omiń reklamy sponsorów",
+      "description": "Nazwa rozszerzenia."
+  },
+
+  "Description": {
+      "message": "Przewijaj reklamy sponsorów w filmach na YouTube. Zgłaszaj reklamy w nagraniach żeby nie marnować czasu innych.",
+      "description": "Opis rozszerzenia."
+  },
+  "helpPage": {
+      "message": "index_en.html"
+  },
+  "400": {
+      "message": "Serwer odpowiedział, że to zapytanie jest niepoprawne"
+  },
+  "429": {
+      "message": "Zgłosiłeś bardzo dużo segmentów reklamowych dla tego jednego nagrania, jesteś pewien, że jest ich tak dużo?"
+  },
+  "409": {
+      "message": "Treść została już wcześniej zgłoszona"
+  },
+  "channelWhitelisted": {
+      "message": "Kanał dodany do wyjątków!"
+  },
+  "Sponsor": {
+      "message": "sponsor"
+  },
+  "Sponsors": {
+      "message": "sponsorzy"
+  },
+ "Segment": {
+      "message": "segmet sponsorowany"
+  },
+  "Segments": {
+      "message": "segmenty sponsorowane"
+  },
+  "noticeTitle": {
+      "message": "Segment przewinięty"
+  },
+  "reportButtonTitle": {
+      "message": "Zgłoś"
+  },
+  "reportButtonInfo": {
+      "message": "Zgłoś ten segment reklamowy jako nieprawidłowy."
+  },
+  "Dismiss": {
+      "message": "Odrzuć"
+  },
+  "Loading": {
+      "message": "Ładowanie..."
+  },
+  "Mins": {
+      "message": "Minuty"
+  },
+  "Secs": {
+      "message": "Sekundy"
+  },
+  "Hide": {
+      "message": "Nigdy nie pokazuj"
+  },
+  "hitGoBack": {
+      "message": "Kliknij cofnij aby przenieść się do miejsca przed przewinięciem."
+  },
+  "unskip": {
+      "message": "Cofnij"
+  },
+  "reskip": {
+      "message": "Przewiń"
+  },
+  "paused": {
+      "message": "Zatrzymany"
+  },
+  "confirmMSG": {
+      "message": "Żeby zmienić lub usunąć wartości, kliknij na guzik informacji lub otwórz okienko rozszerzenia klikając w ikonę rozszerzenia znajdującą się w prawym górnym rogu."
+  },
+  "clearThis": {
+      "message": "Jesteś pewien, że chcesz to usunąć?\n\n"
+  },
+  "Unknown": {
+      "message": "Wystąpił błąd podczas przesyłania twojego zgłoszenia, proszę spróbować ponownie później."
+  },
+  "sponsorFound": {
+      "message": "Segmenty reklamowe dla tego nagrania są już w bazie!"
+  },
+  "sponsor404": {
+      "message": "Nie znaleziono segmentów reklamowych"
+  },
+  "sponsorStart": {
+      "message": "Reklama zaczyna się teraz"
+  },
+  "sponsorEnd": {
+      "message": "Reklama kończy się teraz"
+  },
+  "noVideoID": {
+      "message": "Nie znaleziono nagrania wideo w tej karcie. Jeśli wiesz, że to karta YouTube'a, zamknij to okienko i otwórz je ponownie. Jeśli to nie zadziała spróbuj przeładować stronę."
+  },
+  "success": {
+      "message": "Sukces!"
+  },
+  "voted": {
+      "message": "Zagłosowano!"
+  },
+  "voteFail": {
+      "message": "Już na to głosowałeś."
+  },
+  "serverDown": {
+      "message": "Wygląda na to, że serwer nie działa. Skontaktuj się z dewloperem."
+  },
+  "connectionError": {
+      "message": "Błąd z połączeniem. Kod błędu: "
+  },
+  "wantToSubmit": {
+      "message": "Chcesz zgłosić segment sponsorowany dla nagrania z id"
+  },
+  "leftTimes": {
+      "message": "Wygląda na to, że masz nie wysłane segmenty reklamowe. Cofnij się do tej strony i zgłoś je (nie zostały usunięte)."
+  },
+  "clearTimes": {
+      "message": "Wyczyść segmenty reklamowe"
+  },
+  "openPopup": {
+      "message": "Otwórz okienko SponsorBlock"
+  },
+  "SubmitTimes": {
+      "message": "Zgłoś segmenty reklamowe"
+  },
+  "submitCheck": {
+      "message": "Jesteś pewien, że chcesz to zgłosić?"
+  },
+  "whitelistChannel": {
+       "message": "Dodaj kanał do wyjątków"
+  },
+  "removeFromWhitelist": {
+       "message": "Usuń kanał z listy wyjątków"
+  },
+  "voteOnTime": {
+       "message": "Głosuj na segment reklamowy"
+  },
+  "recordTimes": {
+       "message": "Nagraj czasy segmentów reklamowych"
+  },
+  "soFarUHSubmited": {
+       "message": "Jak na razie zgłosiłeś:"
+  },
+  "savedPeopleFrom": {
+       "message": "Ocaliłeś ludzi przed "
+  },
+  "viewLeaderboard": {
+       "message": "Zobacz ranking użytkowników"
+  },
+  "here": {
+      "message": "tutaj"
+  },
+  "recordTimesDescription": {
+       "message": "Kliknij guzik poniżej kiedy segment reklamowy się zaczyna i kończy żeby go oznaczyć i wysłać do bazy danych."
+  },
+  "popupHint": {
+       "message": "Podpowiedź: Klikając średnik kiedy zaznaczone jest zgłaszanie wideo możesz oznaczyć początek reklamy, znakiem cytatu oznaczysz jej koniec. (Klawisze można zmienić w opcjach)"
+  },
+  "lastTimes": {
+       "message": "Ostanie wybrane czasy reklam"
+  },
+  "clearTimesButton": {
+      "message": "Usuń czasy"
+  },
+  "submitTimesButton": {
+      "message": "Zgłoś czasy"
+  },
+  "publicStats": {
+      "message": "Ten dane są używane na naszej stronie żeby pokazać twój wkład. Zobacz to"
+  },
+  "setUsername": {
+      "message": "Ustaw nazwę użytkownika"
+  },
+  "discordAdvert": {
+      "message": "Dołącz do oficjalnego serwera na discordzie i podziel się wrażeniami i sugestiami!"
+  },
+  "hideThis": {
+      "message": "Ukryj to"
+  },
+  "Options": {
+      "message": "Opcje"
+  },
+  "showButtons": {
+      "message": "Pokaż guziki w odtwarzaczu YouTube"
+  },
+  "hideButtons": {
+      "message": "Ukryj guziki w odtwarzaczu YouTube"
+  },
+  "hideButtonsDescription": {
+      "message": "Ta opcja ukrywa guziki zgłaszania reklamy w odtwarzaczu. Wiem, że mogą one irytować niektórych. Zamiast zgłaszania bezpośrednio w odtwarzaczu możesz to zrobić w tym okienku. Zawsze możesz zmienić te opcje później."
+  },
+  "showInfoButton": {
+      "message": "Pokaż guzik informacyjny w odtwarzaczu YouTube"
+  },
+  "hideInfoButton": {
+      "message": "Ukryj guzik informacyjny w odtwarzaczu YouTube"
+  },
+  "whatInfoButton": {
+      "message": "Jest to guzik otwierający popup na stronie YouTube."
+  },
+  "hideDeleteButton": {
+      "message": "Ukryj guzik usuwania w odtwarzaczu YouTube"
+  },
+  "showDeleteButton": {
+      "message": "Pokaż guzik usuwania w odtwarzaczu YouTube"
+  },
+  "whatDeleteButton": {
+      "message": "Ten guzik pozwala ci wyczyścić wszystkie segmenty reklamowe w odtwarzaczu YouTube."
+  },
+  "disableViewTracking": {
+      "message": "Wyłącz licznik przewinięć"
+  },
+  "enableViewTracking": {
+      "message": "Włącz licznik przewinięć"
+  },
+  "whatViewTracking": {
+      "message": "Ta opcja śledzi które segmenty pominąłeś i informuje zgłaszających ile czasu Ci zaoszczędzili, też wraz systemem głosowania pomaga wykrywać spam w zgłoszeniach. Rozszerzenie wysyła zapytanie do serwera za każdym razem kiedy przewinąłeś segment reklamowy. Miejmy nadzieję, że większość ludzi tego nie wyłączy i licznik wyświetleń będzie rzetelny. :)"
+  },
+  "showNotice": {
+      "message": "Pokaż informacje ponownie"
+  },
+  "longDescription": {
+      "message": "SponsorBlock jest rozszerzeniem które przewinie segmenty sponsorów w filmach na YouTube. SponsorBlock jest opartym na crowdsourcing rozszerzeniem które pozwala każdemu zgłaszać początek i koniec segmentu reklamowego w filmach na YouTube. Kiedy ktoś zgłosi taki fragment zostanie on pominięty przez innych użytkowników rozszerzenia.",
+      "description": "Pełny opis rozszerzenia na stronie w sklepie."
+  },
+  "website": {
+      "message": "Strona",
+      "description": "Używane w sklepie Firefoxa"
+  },
+  "sourceCode": {
+      "message": "Kod źródłowy",
+      "description": "Używane w sklepie Firefoxa"
+  },
+  "noticeUpdate": {
+      "message": "Informacje zostały zaktualizowane!",
+      "description": "Pierwsza linia po aktualizacji informacji."
+  },
+  "noticeUpdate2": {
+      "message": "Jeśli nadal jej nie lubisz wybierz opcje nie pokazuj więcej.",
+      "description": "Druga linia po aktualizacji informacji."
+  },
+  "setStartSponsorShortcut": {
+      "message": "Ustaw klawisz do oznaczania początku reklamy"
+  },
+  "setSubmitKeybind": {
+      "message": "Ustaw klawisz do wysyłania czasów"
+  },
+  "keybindDescription": {
+      "message": "Wybierz klawisz klikając go na klawiaturze"
+  },
+  "keybindDescriptionComplete": {
+      "message": "Ustawiony klawisz to: "
+  },
+  "0": {
+      "message": "Połączenie przerwane z powodu braku odpowiedzi. Sprawdź swoje połączenie z internetem. Jeśli wszystko z nim w porządku oznacza to, że serwer jest prawdopodobnie przeciążony lub nie działa."
+  },
+  "disableSkipping": {
+      "message": "Wyłącz SponsorBlock"
+  },
+  "enableSkipping": {
+      "message": "Włącz SponsorBlock"
+  },
+  "yourWork": {
+      "message": "Twój wkład",
+      "description": "Nagłowek sekcji ze statystykami użytkownika."
+  },
+  "502": {
+      "message": "Serwer jest prawdopodobnie przeciążony, spróbuj ponownie za kilka sekund."
+  },
+  "errorCode": {
+      "message": "Kod błędu: "
+  },
+  "noticeTitleNotSkipped": {
+      "message": "Przewinąć reklamę?"
+  },
+  "skip": {
+      "message": "Przewiń"
+  },
+  "disableAutoSkip": {
+      "message": "Wyłącz auto przewijanie"
+  },
+  "enableAutoSkip": {
+      "message": "Włącz auto przewijanie"
+  },
+  "autoSkipDescription": {
+      "message": "Auto przewijanie przewinie segment za ciebie, wyłączone wyświetli komunikat z pytaniem czy chcesz przewinąć reklamę."
+  },
+  "youHaveSkipped": {
+      "message": "Przewinąłeś "
+  },
+  "youHaveSaved": {
+      "message": "Oszczędziłeś sobie "
+  },
+  "minLower": {
+      "message": "minuta"
+  },
+  "minsLower": {
+      "message": "minuty"
+  },
+  "hourLower": {
+      "message": "godzina"
+  },
+  "hoursLower": {
+      "message": "godziny"
+  },
+  "youHaveSavedTime": {
+      "message": "Oszczędziłeś ludziom"
+  },
+  "youHaveSavedTimeEnd": {
+      "message": " czasu."
+  },
+  "guildlinesSummary": {
+      "message": "- Upewnij się, że zgłaszany fragment zawiera tylko reklamę i nic więcej.\n- Upewnij się, że nie zostanie przewinięta wartościowa treść\n- Jeśli całe nagranie to reklama, proszę nie zgłaszaj go. Blokowanie całych nagrań pojawi się wkrótce.\n- Nie ukrywaj treści które są istotne dla użytkownika (nie ukrywaj informacji, że recenzja produktu została opłacona przez producenta)"
+  },
+  "statusReminder": {
+      "message": "Wejdź na status.sponsor.ajay.app żeby sprawdzić czy serwer działa."
+  },
+  "changeUserID": {
+      "message": "Zaimportuj/Wyeksportuj swój UserID"
+  },
+  "whatChangeUserID": {
+      "message": "Ta informacja jest poufna i działa jak hasło, użytkownik który ma do niej dostęp może zgłaszać treści jako ty."
+  },
+  "setUserID": {
+      "message": "Ustaw UserID"
+  },
+  "userIDChangeWarning": {
+      "message": "Ostrzeżenie: Zmiana UserID jest nieodwracalna. Jesteś pewien, że chcesz to zrobić? Skopiuj obecny UserID na wszelki wypadek."
+  },
+  "createdBy": {
+      "message": "Stworzony przez"
+  },
+  "autoSkip": {
+      "message": "Auto przewijanie"
+  },
+  "showSkipNotice": {
+      "message": "Pokaż informację po przewiniętym fragmencie"
+  },
+  "keybindCurrentlySet": {
+      "message": ". Jest obecnie ustawione jako:"
+  },
+  "supportInvidious": {
+      "message": "Wesprzyj Invidious"
+  },
+  "supportInvidiousDescription": {
+      "message": "Invidious (invidio.us) to nieoficjalny klient YouTube. Aby go wesprzeć musisz przyznać dodatkowe uprawnienia rozszerzeniowi. Ta opcja nie działa w incognito i innych wersjach Chromium."
+  },
+  "optionsInfo": {
+      "message": "Wesprzyj Invidious, wyłącz auto przewijanie, ukryj guziki i więcej."
+  },
+  "addInvidiousInstance": {
+      "message": "Dodaj instancje Invidious"
+  },
+  "addInvidiousInstanceDescription": {
+      "message": "Dodaj niestandardową instancje Invidious. W formie domeny. Na przykład: invidious.ajay.app"
+  },
+  "add": {
+      "message": "Dodaj"
+  },
+  "addInvidiousInstanceError": {
+      "message": "Ta domena jest nieprawidłowa. Wartość powinna zawierać TYLKO domenę. Na przykład: invidious.ajay.app"
+  },
+  "resetInvidiousInstance": {
+      "message": "Zresetuj listę instancji Invidious"
+  },
+  "resetInvidiousInstanceAlert": {
+      "message": "Zresetujesz listę instancji Invidious"
+  },
+  "currentInstances": {
+      "message": "Obecne instancje:"
+  },
+  "enableAutoUpvote": {
+      "message": "Auto potwierdzanie"
+  },
+  "whatAutoUpvote": {
+      "message": "To ustawienie sprawia, że wszystkie przewinięte przez ciebie a nie zgłoszone jako błąd segmenty reklamowe zostaną potwierdzone jako prawidłowe. Ta opcja nie działa jeśli okienko z informacją o przewinięciu jest ukryte."
+  },
+  "invidiousInfo1": {
+      "message": "Invidious (nieoficjalny klient YouTube) została dodana do wspieranych!"
+  },
+  "invidiousInfo2": {
+      "message": "Musisz odblokować to w opcjach aby móc to zrobić."
+  }
+}

background.js

@@ -18,6 +18,9 @@ chrome.tabs.onUpdated.addListener(function(tabId) {
 
 chrome.runtime.onMessage.addListener(function (request, sender, callback) {
 	switch(request.message) {
+        case "openConfig":
+            chrome.runtime.openOptionsPage();
+            return
         case "submitTimes":
             submitTimes(request.videoID, callback);
         
@@ -100,7 +103,7 @@ function registerFirefoxContentScript(options) {
         js: options.js,
         css: options.css,
         matches: options.matches
-    }).then(() => void (contentScriptRegistrations[options.id] = registration));
+    }).then((registration) => void (contentScriptRegistrations[options.id] = registration));
 }
 
 //gets the sponsor times from memory

content.js

@@ -827,8 +827,8 @@ function clearSponsorTimes() {
     let sponsorTimes = SB.config.sponsorTimes.get(currentVideoID);
 
     if (sponsorTimes != undefined && sponsorTimes.length > 0) {
-        let confirmMessage = chrome.i18n.getMessage("clearThis") + getSponsorTimesMessage(sponsorTimes);
-        confirmMessage += chrome.i18n.getMessage("confirmMSG")
+        let confirmMessage = chrome.i18n.getMessage("clearThis") + getSponsorTimesMessage(sponsorTimes)
+                                + "\n" + chrome.i18n.getMessage("confirmMSG")
         if(!confirm(confirmMessage)) return;
 
         //clear the sponsor times

crowdin.yml

@@ -3,6 +3,7 @@ files:
     translation: /_locales/%two_letters_code%/%original_file_name%
     languages_mapping:
         two_letters_code:
+           pl-PL: "pl_PL"
            pr-BR: "pt_BR"
            pr-PT: "pt_PT"
            zh-CN: "zh_CH"

help/index_en.html

@@ -1,5 +1,8 @@
+<!DOCTYPE html>
+
 <head>
   <title> SponsorBlock </title>
+  <meta charset="utf-8">
 
   <link href="styles.css" rel="stylesheet"/>
 </head>
@@ -11,7 +14,7 @@
     SponsorBlock
   </div>
 
-  <center>
+  <div class="container">
 
     <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>
 
@@ -48,7 +51,7 @@
       Whenever you skip a video, you will get a notice report that submission. If the timing seems wrong, report it! You can also vote in the popup. The extension auto upvotes it if you don't report it, so make sure to report when necessary (this can be disabled in the options).
     </p>
 
-    <center><img height="120px" src="https://user-images.githubusercontent.com/12688112/63067735-5a638700-bede-11e9-8147-f321b57527ec.gif"></center>
+    <div class="center"><img height="120px" src="https://user-images.githubusercontent.com/12688112/63067735-5a638700-bede-11e9-8147-f321b57527ec.gif"></div>
 
     <h1>Submitting</h1>
 
@@ -106,7 +109,7 @@
       Ask on Discord or make an Issue on GitHub. I am happy to hear suggestions or improvements you want. You may also contribute code or graphics if you would like.
     </p>
 
-    <h1>Where can I get the source code</h1>
+    <h1>Where can I get the source code?</h1>
 
     <h4 style="display: inline">Client:</h4>
     <!-- Github logo -->
@@ -116,7 +119,7 @@
     <!-- Github logo -->
     <a href="https://github.com/ajayyy/SponsorBlockServer"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
 
-    <h1>Credit</h1>
+    <h1>Credits</h1>
 
     <p>The awesome <a href="https://github.com/omarroth/invidious/wiki/API">Invidious API</a> is used to grab the time the video was published.</p>
 
@@ -124,6 +127,6 @@
     
     <p>Some icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</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></p>
 
-  </center>
+  </div>
 
 </body>

help/styles.css

@@ -4,6 +4,16 @@
 
 body {
   background-color: #333333;
+  font-family: sans-serif;
+}
+
+.center {
+  text-align: center;
+}
+
+.container {
+  max-width: 60%;
+  margin: auto;
 }
 
 .projectPreview {
@@ -12,24 +22,24 @@ body {
 
 .projectPreviewImage {
   position: absolute;
-  left: -90;
-  width: 80;
+  left: -90px;
+  width: 80px;
   top: 50%;
   transform: translateY(-50%);
 }
 
 .projectPreviewImageLarge {
   position: absolute;
-  left: -210;
-  width: 200;
+  left: -210px;
+  width: 200px;
   top: 50%;
   transform: translateY(-20%);
 }
 
 .projectPreviewImageLargeRight {
   position: absolute;
-  right: -210;
-  width: 200;
+  right: -210px;
+  width: 200px;
   top: 50%;
   transform: translateY(-50%);
 }
@@ -47,37 +57,27 @@ body {
   text-align: center;
   vertical-align: middle;
 
-  font-family: sans-serif;
-  font-size: 50;
+  font-size: 50px;
   color: #212121;
 
-  /* height: 100; */
-
-  padding: 20;
+  padding: 20px;
   
   text-decoration: none;
 
   transition: font-size 1s;
 }
 
-#title:hover {
-  font-size: 60;
-
-  transition: font-size 1s;
-}
-
 .subtitle {
-  font-family: sans-serif;
-  font-size: 40;
+  font-size: 40px;
   color: #dad8d8;
 
-  padding-top: 10;
+  padding-top: 10px;
 
   transition: font-size 0.4s;
 }
 
 .subtitle:hover {
-  font-size: 45;
+  font-size: 45px;
 
   transition: font-size 0.4s;
 }
@@ -99,7 +99,7 @@ a {
 }
 
 .link {
-  padding: 20;
+  padding: 20px;
 
   height: 80px;
 
@@ -113,13 +113,12 @@ a {
 }
 
 #contact,.smalllink {
-  font-family: sans-serif;
-  font-size: 25;
+  font-size: 25px;
   color: #e8e8e8;
 
   text-align: center;
   
-  padding: 10;
+  padding: 10px;
 }
 
 #contact {
@@ -127,15 +126,11 @@ a {
 }
 
 p,li,a {
-  font-family: sans-serif;
-  font-size: 20;
+  font-size: 20px;
   color: #c4c4c4;
-
-  padding: 10;
 }
 
 p,li,code,a {
-	max-width: 60%;
 	text-align: left;
 	overflow-wrap: break-word;
 }
@@ -147,7 +142,7 @@ p,li,code,a {
   
   .projectPreviewImage {
     position: unset;
-    width: 130;
+    width: 130px;
     display: block;
     margin: auto;
     transform: none;
@@ -165,20 +160,18 @@ img {
 }
 
 #recentPostTitle {
-  font-family: sans-serif;
-  font-size: 30;
+  font-size: 30px;
   color: #dad8d8;
 }
 
 #recentPostDate {
-  font-family: sans-serif;
-  font-size: 15;
+  font-size: 15px;
   color: #dad8d8;
 }
 
 h1,h2,h3,h4,h5,h6 {
-  font-family: sans-serif;
   color: #dad8d8;
+  text-align: center;
 }
 
 svg {

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "__MSG_fullName__",
   "short_name": "__MSG_Name__",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "default_locale": "en",
   "description": "__MSG_Description__",
   "content_scripts": [

options/options.css

@@ -1,6 +1,6 @@
 /* Options page CSS */
 body {
-    font-family: Sans-Serif;
+    font-family: sans-serif;
 }
 
 .center {
@@ -25,12 +25,12 @@ body {
 
 .small-description {
     color: white;
-    font-size: 13;
+    font-size: 13px;
 }
 
 .medium-description {
     color: white;
-    font-size: 15;
+    font-size: 15px;
 }
 
 .option-text-box {
@@ -151,24 +151,24 @@ body {
 
 .projectPreviewImage {
     position: absolute;
-    left: -90;
-    width: 80;
+    left: -90px;
+    width: 80px;
     top: 50%;
     transform: translateY(-50%);
 }
 
 .projectPreviewImageLarge {
     position: absolute;
-    left: -210;
-    width: 200;
+    left: -210px;
+    width: 200px;
     top: 50%;
     transform: translateY(-20%);
 }
 
 .projectPreviewImageLargeRight {
     position: absolute;
-    right: -210;
-    width: 200;
+    right: -210px;
+    width: 200px;
     top: 50%;
     transform: translateY(-50%);
 }
@@ -188,37 +188,27 @@ body {
     text-align: center;
     vertical-align: middle;
   
-    font-family: sans-serif;
-    font-size: 50;
+    font-size: 50px;
     color: #212121;
   
-    /* height: 100; */
-  
-    padding: 20;
+    padding: 20px;
   
     text-decoration: none;
   
     transition: font-size 1s;
 }
 
-#title:hover {
-    font-size: 60;
-  
-    transition: font-size 1s;
-}
-
 .subtitle {
-    font-family: sans-serif;
-    font-size: 40;
+    font-size: 40px;
     color: #dad8d8;
   
-    padding-top: 10;
+    padding-top: 10px;
   
     transition: font-size 0.4s;
 }
 
 .subtitle:hover {
-    font-size: 45;
+    font-size: 45px;
   
     transition: font-size 0.4s;
 }
@@ -240,7 +230,7 @@ a {
 }
 
 .link {
-    padding: 20;
+    padding: 20px;
   
     height: 80px;
   
@@ -254,13 +244,12 @@ a {
 }
 
 #contact,.smalllink {
-    font-family: sans-serif;
-    font-size: 25;
+    font-size: 25px;
     color: #e8e8e8;
   
     text-align: center;
   
-    padding: 10;
+    padding: 10px;
 }
 
 #contact {
@@ -268,11 +257,10 @@ a {
 }
 
 p,li {
-    font-family: sans-serif;
-    font-size: 20;
+    font-size: 20px;
     color: #c4c4c4;
   
-    padding: 10;
+    padding: 10px;
 }
 
 p,li,code,a {
@@ -288,7 +276,7 @@ p,li,code,a {
   
     .projectPreviewImage {
         position: unset;
-        width: 130;
+        width: 130px;
         display: block;
         margin: auto;
         transform: none;
@@ -306,19 +294,16 @@ img {
 }
 
 #recentPostTitle {
-    font-family: sans-serif;
-    font-size: 30;
+    font-size: 30px;
     color: #dad8d8;
 }
 
 #recentPostDate {
-    font-family: sans-serif;
-    font-size: 15;
+    font-size: 15px;
     color: #dad8d8;
 }
 
 h1,h2,h3,h4,h5,h6 {
-    font-family: sans-serif;
     color: #dad8d8;
 }
 

options/options.html

@@ -1,5 +1,8 @@
+<!DOCTYPE html>
+
 <head>
   <title>Options - SponsorBlock</title>
+  <meta charset="utf-8">
 
   <link href="options.css" rel="stylesheet"/>
 

options/options.js

@@ -234,6 +234,15 @@ function keybindKeyPressed(element, e) {
     e = e || window.event;
     var key = e.key;
 
+    let button = element.querySelector(".trigger-button");
+
+    // cancel setting a keybind
+    if (key === "Escape") {
+        element.querySelector(".option-hidden-section").classList.add("hidden");
+        button.classList.remove("disabled");
+        return;
+    }
+
     let option = element.getAttribute("sync-option");
 
     SB.config[option] = key;
@@ -244,8 +253,6 @@ function keybindKeyPressed(element, e) {
     let statusKey = element.querySelector(".option-hidden-section > .keybind-status-key");
     statusKey.innerText = key;
 
-    let button = element.querySelector(".trigger-button");
-
     button.classList.remove("disabled");
 }
 

popup.js

@@ -831,7 +831,7 @@ async function runThePopup() {
   
     //make the options div visible
     function openOptions() {
-        chrome.runtime.openOptionsPage();
+        chrome.runtime.sendMessage({"message": "openConfig"});
     }
 
     //make the options username setting option visible