Merge pull request #234 from ajayyy/hotfix-invidious

Hotfix

.github/workflows/ci.yml

@@ -0,0 +1,38 @@
+name: CI
+
+on: [push, pull_request]
+
+jobs:
+
+  build:
+    name: Create artifacts
+    runs-on: ubuntu-latest
+
+    steps:
+      # Initialization
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+      - run: npm install
+      - name: Copy configuration
+        run: cp config.js.example config.js
+
+      # Create Chrome artifacts
+      - name: Create Chrome artifacts
+        run: npm run build
+      - uses: actions/upload-artifact@v1
+        with:
+          name: Chrome Extension
+          path: web-ext-artifacts
+
+      # Create Firefox artifacts
+      - name: Move manifest
+        run: mv manifest.json manifest.json.original
+      - name: Combine manifest for Firefox
+        run: jq -s '.[0] * .[1]' manifest.json.original firefox_manifest-extra.json > manifest.json
+      - name: Create Firefox artifacts
+        run: npm run build
+      - uses: actions/upload-artifact@v1
+        with:
+          name: Firefox Extension
+          path: web-ext-artifacts
+

.gitignore

@@ -1,2 +1,6 @@
 config.js
 ignored
+.idea/
+node_modules
+web-ext-artifacts
+.vscode/

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="icons/LogoSponsorBlocker256px.png" alt="Logo"></img>
+  <a href="https://sponsor.ajay.app"><img src="icons/LogoSponsorBlocker256px.png" alt="Logo"></img></a>
   
   <br/>
   <sub>Logo by <a href="https://github.com/munadikieh">@munadikieh</a></sub>
@@ -8,13 +8,27 @@
 <h1 align="center">SponsorBlock</h1>
 
 <p align="center">
+  <b>Download:</b>
   <a href="https://chrome.google.com/webstore/detail/mnjggcdmjocbbbhaepdhchncahnbgone">Chrome/Chromium</a> |
   <a href="https://addons.mozilla.org/addon/sponsorblock/?src=external-github">Firefox</a> |
   <a href="https://sponsor.ajay.app">Website</a> |
   <a href="https://sponsor.ajay.app/stats">Stats</a>
 </p>
 
-[![](https://img.shields.io/amo/users/sponsorblock?label=Firefox%20Users)](https://addons.mozilla.org/addon/sponsorblock/?src=external-github) [![](https://img.shields.io/chrome-web-store/users/mnjggcdmjocbbbhaepdhchncahnbgone?label=Chome%20Users)](https://chrome.google.com/webstore/detail/mnjggcdmjocbbbhaepdhchncahnbgone)
+<p align="center">
+  <b>Unofficial Ports:</b>
+  <a href="https://github.com/ajayyy/SponsorBlock/wiki/Unofficial-Ports#mpv-media-player">MPV</a>
+</p>
+
+<p align="center">
+    <a href="https://addons.mozilla.org/addon/sponsorblock/?src=external-github"><img src="https://img.shields.io/amo/users/sponsorblock?label=Firefox%20Users" alt="Badge"></img></a>
+    <a href="https://chrome.google.com/webstore/detail/mnjggcdmjocbbbhaepdhchncahnbgone"><img src="https://img.shields.io/chrome-web-store/users/mnjggcdmjocbbbhaepdhchncahnbgone?label=Chome%20Users" alt="Badge"></img></a>
+    <a href="https://sponsor.ajay.app/stats"><img src="https://img.shields.io/badge/dynamic/json?label=Sponsors%20Submitted&query=totalSubmissions&suffix=%20sponsors&url=http%3A%2F%2Fsponsor.ajay.app%2Fapi%2FgetTotalStats&color=darkred" alt="Badge"></img></a>
+    <a href="https://sponsor.ajay.app/stats"><img src="https://img.shields.io/badge/dynamic/json?label=Contributing%20Users&query=userCount&url=http%3A%2F%2Fsponsor.ajay.app%2Fapi%2FgetTotalStats&color=darkblue" alt="Badge"></img></a>
+    <a href="https://sponsor.ajay.app/stats"><img src="https://img.shields.io/badge/dynamic/json?label=Time%20Saved%20From%20Skips&query=daysSaved&url=http%3A%2F%2Fsponsor.ajay.app%2Fapi%2FgetDaysSavedFormatted&color=darkgreen&suffix=%20days" alt="Badge"></img></a>
+</p>
+
+
 
 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.
 
@@ -24,7 +38,7 @@ The backend server code is available here: https://github.com/ajayyy/SponsorBloc
 
 It is a simple Sqlite database that will hold all the timing data.
 
-To make sure that this project doesn't die, I have made the database publicly downloadable at https://sponsor.ajay.app/database.db. So, you can download a backup or get archive.org to take a backup if you do desire.
+To make sure that this project doesn't die, I have made the database publicly downloadable at https://sponsor.ajay.app/database.db. So, you can download a backup or get archive.org to take a backup for you if you want.
 
 Hopefully this project can be combined with projects like [this](https://github.com/Sponsoff/sponsorship_remover) and use this data to create a neural network to predict when sponsored segments happen. That project is sadly abandoned now, so I have decided to attempt to revive this idea.
 
@@ -36,10 +50,22 @@ You can read the API docs [here](https://github.com/ajayyy/SponsorBlockServer#ap
 
 You can load this project as an unpacked extension. Make sure to rename the `config.js.example` file to `config.js` before installing.
 
+There are also other build scripts available. Install `npm`, then run `npm install` in the repository.
+
+## Developing with a clean profile
+
+Run `npm run dev` to run the extension using a clean browser profile with hot reloading [(by default Firefox)](https://hacks.mozilla.org/2019/10/developing-cross-browser-extensions-with-web-ext-3-2-0/). This uses [`web-ext run`](https://extensionworkshop.com/documentation/develop/web-ext-command-reference/#commands).
+
+## Packing
+
+Run `npm run build` to generate a packed extension.
+
 # Credit
 
 The awesome [Invidious API](https://github.com/omarroth/invidious/wiki/API) is used to grab the time the video was published.
 
+Original code from [YTSponsorSkip](https://github.com/OfficialNoob/YTSponsorSkip), but not much of the code is left.
+
 Some icons 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>
 
 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> 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>

SB.js

@@ -0,0 +1,189 @@
+SB = {
+    /**
+     * Callback function when an option is updated
+     * 
+     * @type {CallableFunction}
+     */
+    configListeners: []
+};
+
+// Function setup
+
+Map.prototype.toJSON = function() {
+    return Array.from(this.entries());
+};
+
+class MapIO {
+    constructor(id) {
+		this.id = id;
+		this.map = SB.localConfig[this.id];
+    }
+
+    set(key, value) {
+        this.map.set(key, value);
+
+        SB.config.handler.set(undefined, 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));
+    }
+}
+
+/**
+ * A Map cannot be stored in the chrome storage. 
+ * This data will be encoded into an array instead as specified by the toJSON function.
+ * 
+ * @param {*} data 
+ */
+function encodeStoredItem(data) {
+	if(!(data instanceof Map)) return data;
+	return JSON.stringify(data);
+}
+
+/**
+ * A Map cannot be stored in the chrome storage. 
+ * This data will be decoded from the array it is stored in
+ * 
+ * @param {*} data 
+ */
+function decodeStoredItem(data) {
+    if(typeof data !== "string") return data;
+    
+	try {
+        let str = JSON.parse(data);
+        
+		if(!Array.isArray(str)) return data;
+		return new Map(str);
+    } catch(e) {
+
+        // If all else fails, return the data
+        return data;
+    }
+}
+
+function configProxy() {
+    chrome.storage.onChanged.addListener((changes, namespace) => {
+        for (const key in changes) {
+            SB.localConfig[key] = decodeStoredItem(changes[key].newValue);
+        }
+
+        for (const callback of SB.configListeners) {
+            callback(changes);
+        }
+    });
+	
+    var handler = {
+        set: function(obj, prop, value) {
+            SB.localConfig[prop] = value;
+
+            chrome.storage.sync.set({
+                [prop]: encodeStoredItem(value)
+            });
+        },
+        get: function(obj, prop) {
+            let data = SB.localConfig[prop];
+            if(data instanceof Map) data = new MapIO(prop);
+
+			return obj[prop] || data;
+        }
+		
+    };
+
+    return new Proxy({handler}, handler);
+}
+
+function fetchConfig() { 
+    return new Promise((resolve, reject) => {
+        chrome.storage.sync.get(null, function(items) {
+            SB.localConfig = items;  // Data is ready
+            resolve();
+        });
+    });
+}
+
+function migrateOldFormats() { // Convert sponsorTimes format
+    for (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);
+        }
+    }
+}
+
+async function setupConfig() {
+    await fetchConfig();
+	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,
+    "hideDiscordLink": false,
+    "invidiousInstances": ["invidio.us", "invidiou.sh", "invidious.snopyta.org"],
+    "invidiousUpdateInfoShowCount": 0,
+    "autoUpvote": true
+}
+
+// Reset config
+function resetConfig() {
+	SB.config = SB.defaults;
+};
+
+function convertJSON() {
+	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];
+		}
+    }
+};
+
+// Sync config
+setupConfig();

_locales/de/messages.json

@@ -0,0 +1,318 @@
+{
+    "Name": {
+        "message": "SponsorBlock",
+        "description": "Name of the extension."
+    },
+    "fullName": {
+        "message": "SponsorBlock for YouTube - Skip Sponsorships",
+        "description": "Name of the extension."
+    },
+
+    "Description": {
+        "message": "Überspringe die gesponserten Inhalte in YouTube-Videos. Melde gesponsorte Inhalte in den von dir angesehenen Videos und erspare anderen die Zeit.",
+        "description": "Description of the extension."
+    },
+    "helpPage": {
+        "message": "index_en.html"
+    },
+    "400": {
+        "message": "Ungültige Anforderung"
+    },
+    "429": {
+        "message": "Du hast zu viele Segmente in diesem Video eingereicht. Bist du dir sicher?"
+    },
+    "409": {
+        "message": "Dieser Inhalt wurde bereits eingereicht."
+    },
+    "channelWhitelisted": {
+        "message": "Kanal auf Whitelist gesetzt!"
+    },
+    "Sponsor": {
+        "message": "Sponsor"
+    },
+    "Sponsors": {
+        "message": "Sponsoren"
+    },
+   "Segment": {
+        "message": "gesponsorter Inhalt"
+    },
+    "Segments": {
+        "message": "gesponsorte Inhalte"
+    },
+    "noticeTitle": {
+        "message": "Sponsor übersprungen"
+    },
+    "reportButtonTitle": {
+        "message": "Melden"
+    },
+    "reportButtonInfo": {
+        "message": "Melde dieses Segment als unzulässig."
+    },
+    "Dismiss": {
+        "message": "Abbrechen"
+    },
+    "Loading": {
+        "message": "Laden..."
+    },
+    "Mins": {
+        "message": "Minuten"
+    },
+    "Secs": {
+        "message": "Sekunden"
+    },
+    "Hide": {
+        "message": "Verstecken"
+    },
+    "hitGoBack": {
+        "message": "Klicke Zurück um die Aktion rückgängig zu machen."
+    },
+    "unskip": {
+        "message": "Zurück"
+    },
+    "reskip": {
+        "message": "Vorwärts"
+    },
+    "paused": {
+        "message": "Pausiert"
+    },
+    "confirmMSG": {
+        "message": "\n\nUm einzelne Werte zu löschen oder zu ändern, klicke auf den Info-Button, oder öffne die Erweiterungs-Übersicht, indem du das Erweiterungssymbol in der rechten oberen Ecke anklickst."
+    },
+    "clearThis": {
+        "message": "Bist du sicher, dass du Folgendes löschen möchtest?\n\n"
+    },
+    "Unknown": {
+        "message": "Deine Segmente konnten nicht gesendet werden, bitte versuche es später erneut."
+    },
+    "sponsorFound": {
+        "message": "Die gesponsorten Inhalte dieses Videos befinden sich bereits in der Datenbank!"
+    },
+    "sponsor404": {
+        "message": "Keine Sponsoren gefunden"
+    },
+    "sponsorStart": {
+        "message": "Gesponserter Inhalt beginnt"
+    },
+    "sponsorEnd": {
+        "message": "Gesponserter Inhalt endet"
+    },
+    "noVideoID": {
+        "message": "Keine YouTube-Videos in diesem Tab gefunden. Wenn dies ein Youtube-Tab ist, schließe dieses Pop-up und öffne es erneut. Wenn das nicht hilft, versuche den Tab neu zu laden."
+    },
+    "success": {
+        "message": "Erfolg!"
+    },
+    "voted": {
+        "message": "Abgestimmt!"
+    },
+    "voteFail": {
+        "message": "Du hast bereits so abgestimmt."
+    },
+    "serverDown": {
+        "message": "Der Server ist scheinbar offline. Bitte unverzüglich dem Entwickler melden."
+    },
+    "connectionError": {
+        "message": "Ein Verbindungsfehler ist aufgetreten. Fehlermeldung: "
+    },
+    "wantToSubmit": {
+        "message": "Möchtest du die Segmente für die Video ID senden?"
+    },
+    "leftTimes": {
+        "message": "Scheinbar hast du einige Segmente noch nicht gesendet. Kehre zur Seite zurück um sie zu senden (sie sind noch gespeichert)."
+    },
+    "clearTimes": {
+        "message": "Lösche Auswahl"
+    },
+    "openPopup": {
+        "message": "Öffne SponsorBlock-Popup"
+    },
+    "SubmitTimes": {
+        "message": "Sende Auswahl"
+    },
+    "submitCheck": {
+        "message": "Bist du sicher, dass die Auswahl abgeschickt werden soll?"
+    },
+    "whitelistChannel": {
+         "message": "Kanal auf Whitelist setzen "
+    },
+    "removeFromWhitelist": {
+         "message": "Kanal von Whitelist entfernen"
+    },
+    "voteOnTime": {
+         "message": "Stimme für Zeiten ab"
+    },
+    "recordTimes": {
+         "message": "Lege das Zeitfenster eines gesponsorten Inhalts fest"
+    },
+    "soFarUHSubmited": {
+         "message": "Gemeldet wurden von dir bisher"
+    },
+    "savedPeopleFrom": {
+         "message": "Du hast andere Benutzer bewahrt vor"
+    },
+    "viewLeaderboard": {
+         "message": "Siehe Rangliste"
+    },
+    "here": {
+        "message": "hier"
+    },
+    "recordTimesDescription": {
+         "message": "Klicke den Knopf unten, wenn der gesponsorte Inhalt beginnt und endet, um aufzunehmen und\n einzusenden"
+    },
+    "popupHint": {
+         "message": "Hinweis: In den Optionen lässt sich eine Taste für das Festlegen von Anfang/Ende des gesponsorten Inhalts, sowie für das Einsenden festlegen"
+    },
+    "lastTimes": {
+         "message": "Letzte ausgewählte Zeitabschnitte"
+    },
+    "clearTimesButton": {
+        "message": "Zeiten löschen"
+    },
+    "submitTimesButton": {
+        "message": "Zeiten einsenden"
+    },
+    "publicStats": {
+        "message": "Dies ist wichtig für die öffentliche Nutzerstatistik. Siehe"
+    },
+    "setUsername": {
+        "message": "Alias festlegen"
+    },
+    "discordAdvert": {
+        "message": "Tritt dem offiziellen Discord-Kanal bei und teile Anregungen und Feedback!"
+    },
+    "hideThis": {
+        "message": "Verstecken"
+    },
+    "Options": {
+        "message": "Optionen"
+    },
+    "showButtons": {
+        "message": "Knöpfe in YouTube-Leiste zeigen"
+    },
+    "hideButtons": {
+        "message": "Knöpfe in YouTube-Leiste verstecken"
+    },
+    "hideButtonsDescription": {
+        "message": "Die Einstellung versteckt den Einsende-Knopf in der Youtube-Leiste. Ich kann verstehen, weshalb manchen diese Funktion\n an dieser Stelle stört. Stattdessen kann dafür dieses Pop-up genutzt werden. Um die transparente Benachrichtigung zu verstecken, klicke auf den \"Verstecken\"-Knopf \n der Benachrichtigung. Diese Einstellungen können wieder rückgängig gemacht werden."
+    },
+    "showInfoButton": {
+        "message": "Zeige Info-Knopf in Youtube-Leiste"
+    },
+    "hideInfoButton": {
+        "message": "Verstecke Info-Knopf in Youtube-Leiste"
+    },
+    "whatInfoButton": {
+        "message": "Dieser Knopf öffnet ein Pop-up auf der Youtube-Seite."
+    },
+    "hideDeleteButton": {
+        "message": "Verstecke Löschen-Knopf in Youtube Leiste"
+    },
+    "showDeleteButton": {
+        "message": "Zeige Löschen-Knopf in Youtube Leiste"
+    },
+    "whatDeleteButton": {
+        "message": "Dieser Knopf entfernt sämtlich Segmente in der Youtube-Zeitleiste."
+    },
+    "disableViewTracking": {
+        "message": "Deaktiviere das Mitzählen übersprungener Sponsoren"
+    },
+    "enableViewTracking": {
+        "message": "Aktiviere das Mitzählen übersprungener Sponsoren"
+    },
+    "whatViewTracking": {
+        "message": "Diese Funktion hält fest, welche Sponsoren von dir übersprungen wurden und hilft anderen zu erfahren, was ihre Einsendungen bewirkt haben.\n Außerdem dienen die Werte zusammen mit positiven Rückmeldungen als Anti-Spam-Schutz. \n Wenn ein gesponsorter Inhalt übersprungen wird, sendet die Erweiterung eine Nachricht an den Server. \n Hoffentlich wird diese Funktion auch weiterhin genutzt, damit der Algorithmus funktioniert. :)"
+    },
+    "showNotice": {
+        "message": "Benachrichtigung wieder zeigen"
+    },
+    "longDescription": {
+        "message": "SponsorBlock ist eine Erweiterung, die gesponsorte Segmente in YouTube-Videos überspringt. SponsorBlock ist ein Benutzernetzwerk, bei dem jeder Anfang und Ende eines Werbeblocks einreichen kann. Sobald die Information von einem Nutzer eingereicht wurde, überspringen die Erweiterungen der anderen dieses Segment automatisch.",
+        "description": "Full description of the extension on the store pages."
+    },
+    "website": {
+        "message": "Webseite",
+        "description": "Used on Firefox Store Page"
+    },
+    "sourceCode": {
+        "message": "Quellcode",
+        "description": "Used on Firefox Store Page"
+    },
+    "noticeUpdate": {
+        "message": "Die Benachrichtigung wurde verbessert!",
+        "description": "The first line of the message displayed after the notice was upgraded."
+    },
+    "noticeUpdate2": {
+        "message": "Gefällt dir immer noch nicht? Dann klicke den Verstecken-Knopf.",
+        "description": "The second line of the message displayed after the notice was upgraded."
+    },
+    "setStartSponsorShortcut": {
+        "message": "Segment aufnehmen Taste festlegen"
+    },
+    "setSubmitKeybind": {
+        "message": "Segment einsenden Taste festlegen"
+    },
+    "keybindDescription": {
+        "message": "Taste drücken, um festzulegen"
+    },
+    "keybindDescriptionComplete": {
+        "message": "Die Taste wurde festgelegt auf: "
+    },
+    "0": {
+        "message": "Verbindungsüberschreibung. Überprüfe deine Internetverbindung. Bist du mit dem Internet verbunden, ist der Server wahrscheinlich offline."
+    },
+    "disableSkipping": {
+        "message": "SponsorBlock ausschalten"
+    },
+    "enableSkipping": {
+        "message": "SponsorBlock einschalten"
+    },
+    "yourWork": {
+        "message": "Deine Statistik",
+        "description": "Used to describe the section that will show you the statistics from your submissions."
+    },
+    "502": {
+        "message": "Der Server scheint überlastet zu sein. Probiere es in ein paar Sekunden erneut."
+    },
+    "errorCode": {
+        "message": "Fehlermeldung: "
+    },
+    "noticeTitleNotSkipped": {
+        "message": "Sponsor überspringen?"
+    },
+    "skip": {
+        "message": "Überspringen"
+    },
+    "disableAutoSkip": {
+        "message": "Auto-Überspringen deaktivieren"
+    },
+    "enableAutoSkip": {
+        "message": "Auto-Überspringen aktivieren"
+    },
+    "autoSkipDescription": {
+        "message": "Auto-Überspringen überspringt gesponsorte Inhalte für dich. Wenn deaktiviert, fragt die Benachrichtigung, ob übersprungen werden soll."
+    },
+    "youHaveSkipped": {
+        "message": "Du übersprangst "
+    },
+    "youHaveSaved": {
+        "message": "Du erspartest dir "
+    },
+    "minLower": {
+        "message": "Minute"
+    },
+    "minsLower": {
+        "message": "Minuten"
+    },
+    "hourLower": {
+        "message": "Stunde"
+    },
+    "hoursLower": {
+        "message": "Stunden"
+    },
+    "youHaveSavedTime": {
+        "message": "Du erspartest anderen"
+    },
+    "youHaveSavedTimeEnd": {
+        "message": " ihrer Zeit."
+    }
+}

_locales/en/messages.json

@@ -24,17 +24,14 @@
     "409": {
         "message": "This has already been submitted before"
     },
-    "502": {
-        "message": "It seems the server is down. Contact the dev to inform them."
-    },
     "channelWhitelisted": {
         "message": "Channel Whitelisted!"
     },
     "Sponsor": {
-        "message": "Sponsor"
+        "message": "sponsor"
     },
     "Sponsors": {
-        "message": "Sponsors"
+        "message": "sponsors"
     },
    "Segment": {
         "message": "sponsor segment"
@@ -79,7 +76,7 @@
         "message": "Paused"
     },
     "confirmMSG": {
-        "message": "\n\nTo edit or delete individual values, click the info button or open the extension popup by clicking the extension icon in the top right corner."
+        "message": "To edit or delete individual values, click the info button or open the extension popup by clicking the extension icon in the top right corner."
     },
     "clearThis": {
         "message": "Are you sure you want to clear this?\n\n"
@@ -87,7 +84,6 @@
     "Unknown": {
         "message": "There was an error submitting your sponsor times, please try again later."
     },
-  
     "sponsorFound": {
         "message": "This video's sponsors are in the database!"
     },
@@ -101,7 +97,7 @@
         "message": "Sponsorship Ends Now"
     },
     "noVideoID": {
-        "message": "This probably isn't a YouTube tab, or you clicked too early. \n If you know this is a YouTube tab,\n close this popup and open it again."
+        "message": "No YouTube video found at this tab. If you know this is a YouTube tab, close this popup and open it again. If that does not work, try reloading the tab."
     },
     "success": {
         "message": "Success!"
@@ -136,6 +132,99 @@
     "submitCheck": {
         "message": "Are you sure you want to submit this?"
     },
+    "whitelistChannel": {
+         "message": "Whitelist Channel"
+    },
+    "removeFromWhitelist": {
+         "message": "Remove Channel From Whitelist"
+    },
+    "voteOnTime": {
+         "message": "Vote On A Sponsor Time"
+    },
+    "recordTimes": {
+         "message": "Record the times of a sponsorship"
+    },
+    "soFarUHSubmited": {
+         "message": "So far, you've submitted"
+    },
+    "savedPeopleFrom": {
+         "message": "You have saved people from "
+    },
+    "viewLeaderboard": {
+         "message": "View the leaderboard"
+    },
+    "here": {
+        "message": "here"
+    },
+    "recordTimesDescription": {
+         "message": "Click the button below when the sponsorship starts and ends to record and\nsubmit it to the database."
+    },
+    "popupHint": {
+         "message": "Hint: Press the semicolon key while focused on a video report the start/end of a sponsor and quote to submit. (This can be changed in the options)"
+    },
+    "lastTimes": {
+         "message": "Latest Sponsor Message Times Chosen"
+    },
+    "clearTimesButton": {
+        "message": "Clear Times"
+    },
+    "submitTimesButton": {
+        "message": "Submit Times"
+    },
+    "publicStats": {
+        "message": "This is used on the public stats page to show off how much you've contributed. See it"
+    },
+    "setUsername": {
+        "message": "Set Username"
+    },
+    "discordAdvert": {
+        "message": "Come join the official discord server to give suggestions and feedback!"
+    },
+    "hideThis": {
+        "message": "Hide this"
+    },
+    "Options": {
+        "message": "Options"
+    },
+    "showButtons": {
+        "message": "Show Buttons On YouTube Player"
+    },
+    "hideButtons": {
+        "message": "Hide Buttons On YouTube Player"
+    },
+    "hideButtonsDescription": {
+        "message": "This hides the buttons that appear on the YouTube player to submit sponsors. I can see this being annoying for some\n people. Instead of using the button there, this popup can be used to submit sponsors. To hide the notice that appears, \n use the button that appears on the notice saying \"Don't show this again\". You can always enable these settings again later."
+    },
+    "showInfoButton": {
+        "message": "Show Info Button On YouTube Player"
+    },
+    "hideInfoButton": {
+        "message": "Hide Info Button On YouTube Player"
+    },
+    "whatInfoButton": {
+        "message": "This is the button that opens up a popup in the YouTube page."
+    },
+    "hideDeleteButton": {
+        "message": "Hide Delete Button On YouTube Player"
+    },
+    "showDeleteButton": {
+        "message": "Show Delete Button On YouTube Player"
+    },
+    "whatDeleteButton": {
+        "message": "This is the button that allows you to clear all sponsors on the YouTube player."
+    },
+    "disableViewTracking": {
+        "message": "Disable Sponsor Skip Count Tracking"
+    },
+    "enableViewTracking": {
+        "message": "Enable Sponsor Skip Count Tracking"
+    },
+    "whatViewTracking": {
+        "message": "This feature tracks which sponsors you have skipped to let users know how much their submission has helped others and\nused as a metric along with upvotes to ensure that spam doesn't get into the database. The extension sends a message\nto the server each time you skip a sponsor. Hopefully most people don't change this setting so that the view numbers are accurate. :)"
+    },
+    "showNotice": {
+        "message": "Show Notice Again"
+    },
     "longDescription": {
         "message": "SponsorBlock is an extension that will skip over sponsored segments of YouTube videos. SponsorBlock 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.",
         "description": "Full description of the extension on the store pages."
@@ -147,5 +236,155 @@
     "sourceCode": {
         "message": "Source Code",
         "description": "Used on Firefox Store Page"
+    },
+    "noticeUpdate": {
+        "message": "The notice has been upgraded!",
+        "description": "The first line of the message displayed after the notice was upgraded."
+    },
+    "noticeUpdate2": {
+        "message": "If you still don't like it, hit the never show button.",
+        "description": "The second line of the message displayed after the notice was upgraded."
+    },
+    "setStartSponsorShortcut": {
+        "message": "Set key for start sponsor keybind"
+    },
+    "setSubmitKeybind": {
+        "message": "Set key for submission keybind"
+    },
+    "keybindDescription": {
+        "message": "Select a key by typing it"
+    },
+    "keybindDescriptionComplete": {
+        "message": "The keybind has been set to: "
+    },
+    "0": {
+        "message": "Connection Timeout. Check your internet connection. If your internet is working, the server is probably overloaded or down."
+    },
+    "disableSkipping": {
+        "message": "Disable SponsorBlock"
+    },
+    "enableSkipping": {
+        "message": "Enable SponsorBlock"
+    },
+    "yourWork": {
+        "message": "Your Work",
+        "description": "Used to describe the section that will show you the statistics from your submissions."
+    },
+    "502": {
+        "message": "The server seems to be overloaded. Try again in a few seconds."
+    },
+    "errorCode": {
+        "message": "Error Code: "
+    },
+    "noticeTitleNotSkipped": {
+        "message": "Skip Sponsor?"
+    },
+    "skip": {
+        "message": "Skip"
+    },
+    "disableAutoSkip": {
+        "message": "Disable Auto Skip"
+    },
+    "enableAutoSkip": {
+        "message": "Enable Auto Skip"
+    },
+    "autoSkipDescription": {
+        "message": "Auto skip will skip sponsors for you. If disabled, a notice will appear asking if you'd like to skip."
+    },
+    "youHaveSkipped": {
+        "message": "You have skipped "
+    },
+    "youHaveSaved": {
+        "message": "You have saved yourself "
+    },
+    "minLower": {
+        "message": "minute"
+    },
+    "minsLower": {
+        "message": "minutes"
+    },
+    "hourLower": {
+        "message": "hour"
+    },
+    "hoursLower": {
+        "message": "hours"
+    },
+    "youHaveSavedTime": {
+        "message": "You have saved people"
+    },
+    "youHaveSavedTimeEnd": {
+        "message": " of their lives."
+    },
+    "guildlinesSummary": {
+        "message": "- Make sure your segment only contains paid promotion segment, nothing else.\n- Make sure skipping this segment will not skip valuable content\n- If the whole video is a sponsor, please do not report it. A full video reporting system will come out soon.\n- Please do not report disclaimers that could show bias (if a review video is sponsored, don't skip when they mention that)."
+    },
+    "statusReminder": {
+        "message": "Check status.sponsor.ajay.app for server status."
+    },
+    "changeUserID": {
+        "message": "Import/Export Your UserID"
+    },
+    "whatChangeUserID": {
+        "message": "This should be kept private. This is like a password and should not be shared with anyone. If someone has this, they can impersonate you."
+    },
+    "setUserID": {
+        "message": "Set UserID"
+    },
+    "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"
+    },
+    "autoSkip": {
+        "message": "Auto Skip"
+    },
+    "showSkipNotice": {
+        "message": "Show Notice After A Sponsor Is Skipped"
+    },
+    "keybindCurrentlySet": {
+        "message": ". It is currently set to:"
+    },
+    "supportInvidious": {
+        "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."
+    },
+    "optionsInfo": {
+        "message": "Enable Invidious support, disable autoskip, hide buttons and more."
+    },
+    "addInvidiousInstance": {
+        "message": "Add Invidious Instance"
+    },
+    "addInvidiousInstanceDescription": {
+        "message": "Add a custom instance of Invidious. This must be formatted with JUST the domain. Example: invidious.ajay.app"
+    },
+    "add": {
+        "message": "Add"
+    },
+    "addInvidiousInstanceError": {
+        "message": "This is an invalid domain. This should JUST include the domain part. Example: invidious.ajay.app"
+    },
+    "resetInvidiousInstance": {
+        "message": "Reset Invidious Instance List"
+    },
+    "resetInvidiousInstanceAlert": {
+        "message": "You are about to reset the Invidious instance list"
+    },
+    "currentInstances": {
+        "message": "Current Instances:"
+    },
+    "enableAutoUpvote": {
+        "message": "Auto Upvote"
+    },
+    "whatAutoUpvote": {
+        "message": "With this enabled, the extension will upvote all submissions you view if you do not report them. If the notice is disabled, this will not occur."
+    },
+    "invidiousInfo1": {
+        "message": "Invidious (the 3rd party YouTube site) support has been added!"
+    },
+    "invidiousInfo2": {
+        "message": "You MUST enable it in the options for it to work."
     }
 }

_locales/fr/messages.json

@@ -4,7 +4,7 @@
         "description": "Name of the extension."
     },
     "fullName": {
-        "message": "SponsorBlock pour YouTube - Enlève les messages commerciaux et publicités intégrées",
+        "message": "SponsorBlock pour YouTube - Supprime les messages commerciaux et publicités intégrées",
         "description": "Name of the extension."
     },
 
@@ -19,16 +19,13 @@
         "message": "Soumission invalide"
     },
     "429": {
-        "message": "Vous cherchez à envoyer beaucoup de segments, il y en a vraiment autant ?"
+        "message": "Vous cherchez à envoyer beaucoup de segments, y en a-t-il vraiment autant ?"
     },
     "409": {
         "message": "Déja soumis"
     },
-    "502": {
-        "message": "Le serveur ne fonctionne pas. Contactez le développeur."
-    },
     "channelWhitelisted": {
-        "message": "Cette chaine est sur la liste blanche !"
+        "message": "Cette chaîne est sur la liste blanche !"
     },
     "Sponsor": {
         "message": "message commercial"
@@ -37,19 +34,19 @@
         "message": "messages commerciaux"
     },
     "Segment": {
-        "message": "segment de message commercial"
+        "message": "segment commercial"
     },
     "Segments": {
-        "message": "segments de message commercial"
+        "message": "segments commerciaux"
     },
     "noticeTitle": {
-        "message": "Message passé"
+        "message": "Message commercial passé"
     },
     "reportButtonTitle": {
         "message": "Incorrect"
     },
     "reportButtonInfo": {
-        "message": "Signaler que ce segment est incorrect ou n'existe pas."
+        "message": "Signaler que ce segment commercial est incorrect ou n'existe pas."
     },
     "Dismiss": {
         "message": "Fermer"
@@ -67,7 +64,7 @@
         "message": "Ne plus montrer"
     },
     "hitGoBack": {
-        "message": "Cliquez sur revenir en arrière pour revenir avant le saut du segment"
+        "message": "Cliquez sur revenir en arrière pour revenir avant le saut du segment commercial"
     },
     "unskip": {
         "message": "Revenir en arrière"
@@ -79,28 +76,28 @@
         "message": "En pause"
     },
     "confirmMSG": {
-        "message": "\n\nPour modifier ou enlever des soumissions, cliquez sur le bouton d'info."
+        "message": "\n\nPour modifier ou supprimer des soumissions, cliquez sur le bouton d'info ou ouvrez la fenêtre de l'extension en cliquant sur son icône dans le coin en haut à droite."
     },
     "clearThis": {
-        "message": "Êtes-vous certain(e) que vous voulez enlever vos soumissions ?\n\n"
+        "message": "Êtes-vous certain(e) de vouloir supprimer vos soumissions ?\n\n"
     },
     "Unknown": {
-        "message": "Erreur, essayer plus tard."
+        "message": "Une erreur s'est produite lors de la soumission, veuillez ré-essayer plus tard."
     },
     "sponsorFound": {
         "message": "Les messages commerciaux sont déjà dans notre base de donnée pour cette vidéo !"
     },
     "sponsor404": {
-        "message": "Pas de messages trouvés"
+        "message": "Pas de messages commerciaux trouvés"
     },
     "sponsorStart": {
-        "message": "Début du message"
+        "message": "Début du message commercial"
     },
     "sponsorEnd": {
-        "message": "Fin du message"
+        "message": "Fin du message commercial"
     },
     "noVideoID": {
-        "message": "Ceci n'est pas un onglet YouTube, ou vous avez cliqué trop tôt. \n Si vous êtes sur(e) que c'est un onglet YouTube, fermez ce menu et réessayer."
+        "message": "Ceci n'est pas un onglet YouTube, ou vous avez cliqué trop tôt. \n Si vous êtes sûr(e) que c'est un onglet YouTube, fermez cette fenêtre et réessayez."
     },
     "success": {
         "message": "Succès !"
@@ -109,21 +106,158 @@
         "message": "A voté !"
     },
     "voteFail": {
-        "message": "Vous avez déjà voté pour ce choix auparavant."
+        "message": "Vous avez déjà voté pour ce choix."
     },
     "serverDown": {
         "message": "Le serveur ne fonctionne pas. Contactez le développeur."
     },
     "connectionError": {
-        "message": "Erreur de connexion, Code : "
+        "message": "Erreur de connexion. Code d'erreur : "
     },
     "wantToSubmit": {
-        "message": "Voulez-vous soumettre les messages pour cette vidéo"
+        "message": "Voulez-vous soumettre les segments commerciaux pour cette vidéo"
     },
     "leftTimes": {
-        "message": "Vous avez laissé des messages non soumis. Retournez sur la vidéo pour les soumettre (ils ont été conservés)."
+        "message": "Vous avez laissé des segments commerciaux non soumis. Retournez sur la vidéo pour les soumettre (ils ont été conservés)."
+    },
+    "clearTimes": {
+        "message": "Supprimer les segments commerciaux"
+    },
+    "openPopup": {
+        "message": "Ouvrir l'encart SponsorBlock"
+    },
+    "SubmitTimes": {
+        "message": "Soumettre les segments commerciaux"
     },
     "submitCheck": {
-        "message": "Soumettre ce(s) message(s) ?"
+        "message": "Êtes-vous sûr de vouloir soumettre ces segments?"
+    },
+    "whitelistChannel": {
+        "message": "Ajouter la chaîne à la liste blanche"
+    },
+    "removeFromWhitelist": {
+        "message": "Supprimer la chaîne de la liste blanche"
+    },
+    "whitelistDescription": {
+        "message": "Ajouter à la liste blanche les chaînes qui publient des messages commerciaux de façon éthique pour encourager les bons comportements, ou qui publient des messages commerciaux divertissants ou drôles. Ou pas, c'est votre choix."
+    },
+    "voteOnTime": {
+        "message": "Voter sur un segment commercial"
+    },
+    "recordTimes": {
+        "message": "Enregistrer un segment commercial"
+    },
+    "soFarUHSubmited": {
+        "message": "Vous avez soumis jusqu'à présent"
+    },
+    "savedPeopleFrom": {
+        "message": "Vous avez fait gagner aux autres "
+    },
+    "viewLeaderboard": {
+        "message": "Consulter le classement"
+    },
+    "here": {
+        "message": "ici"
+    },
+    "recordTimesDescription": {
+        "message": "Cliquez sur le bouton ci-dessous quand le segment commercial commence puis \nse termine pour l'enregistrer et le soumettre à la base de données."
+    },
+    "popupHint": {
+        "message": "Astuce : utilisez la touche point-virgule lorsque la vidéo est sélectionnée pour enregistrer le début et la fin d'un segment commercial; utilisez la touche guillemet pour le soumettre. (Les touches peuvent être modifiées dans les options)"
+    },
+    "lastTimes": {
+        "message": "Derniers temps choisis pour le segment commercial"
+    },
+    "clearTimesButton": {
+        "message": "Supprimer les temps"
+    },
+    "submitTimesButton": {
+        "message": "Soumettre les temps"
+    },
+    "publicStats": {
+        "message": "Affiché sur le classement public pour montrer vos contributions. Voir sur"
+    },
+    "setUsername": {
+        "message": "Choisir pseudo"
+    },
+    "discordAdvert": {
+        "message": "Rejoignez le serveur Discord officiel pour toutes suggestions ou remarques!"
+    },
+    "hideThis": {
+        "message": "Cacher"
+    },
+    "Options": {
+        "message": "Options"
+    },
+    "showButtons": {
+        "message": "Montrer les boutons sur le lecteur YouTube"
+    },
+    "hideButtons": {
+        "message": "Cacher les boutons sur le lecteur YouTube"
+    },
+    "hideButtonsDescription": {
+        "message": "Cela permet de cacher du lecteur YouTube les boutons utilisés pour soumettre des segments commerciaux. Je peux \ncomprendre que certaines personnes les trouvent perturbants. Au lieu d'utiliser ces boutons, cette fenêtre peut être utilisée \npour soumettre des segments commerciaux. Pour cacher la notification, utilisez le bouton \"Ne plus montrer\" sur la notification. Vous pouvez toujours réactiver ces paramètres plus tard."
+    },
+    "showInfoButton": {
+        "message": "Montrer le bouton Info sur le lecteur YouTube"
+    },
+    "hideInfoButton": {
+        "message": "Cacher le bouton Info sur le lecteur YouTube"
+    },
+    "whatInfoButton": {
+        "message": "Il s'agit du bouton qui ouvre l'encart sur la page YouTube."
+    },
+    "hideDeleteButton": {
+        "message": "Cacher le bouton Supprimer sur le lecteur YouTube"
+    },
+    "showDeleteButton": {
+        "message": "Montrer le bouton Supprimer sur le lecteur YouTube"
+    },
+    "whatDeleteButton": {
+        "message": "Il s'agit du bouton qui permet de supprimer tous les segments commerciaux depuis le lecteur YouTube."
+    },
+    "disableViewTracking": {
+        "message": "Désactiver le suivi des vues de segments commerciaux"
+    },
+    "enableViewTracking": {
+        "message": "Activer le suivi des vues de segments commerciaux"
+    },
+    "whatViewTracking": {
+        "message": "Cette fonctionnalité suit quels segments commerciaux vous avez sautés afin de calculer le bénéfice des soumissions des \nautres utilisateurs. Elle est également utilisée comme métrique, avec les haut-votes, afin de s'assurer que les spams \nsont ignorés. L'extension envoie un message au serveur à chauqe fois qu'un segment commercial est sauté. Avec un peu de chance, peu de personnes désactiveront cette fonctionnalité afin d'obtenir des nombres de vues exacts. :)"
+    },
+    "showNotice": {
+        "message": "Afficher la notification"
+    },
+    "longDescription": {
+        "message": "SponsorBlock est une extension qui permet de passer les messages commerciaux des vidéos YouTube. SponsorBlock est une extension pour navigateur basée sur le crowdsourcing permettant à n'importe qui de soumettre le début et la fin des segments commerciaux sur les vidéos YouTube. Dès qu'une personne a soumis ces informations, les autres utilisateurs de l'extension en bénéficieront et verront les messages commerciaux automatiquement sautés.",
+        "description": "Full description of the extension on the store pages."
+    },
+    "website": {
+        "message": "Site web",
+        "description": "Used on Firefox Store Page"
+    },
+    "sourceCode": {
+        "message": "Code source",
+        "description": "Used on Firefox Store Page"
+    },
+    "noticeUpdate": {
+        "message": "La notification a été mise à jour !",
+        "description": "The first line of the message displayed after the notice was upgraded."
+    },
+    "noticeUpdate2": {
+        "message": "Si elle ne vous plaît pas, cliquez sur le bouton \"Ne plus montrer\"",
+        "description": "The second line of the message displayed after the notice was upgraded."
+    },
+    "setStartSponsorShortcut": {
+        "message": "Changer le raccourci pour enregistrer un segment"
+    },
+    "setSubmitKeybind": {
+        "message": "Changer le raccourci pour soumettre les segments"
+    },
+    "keybindDescription": {
+        "message": "Appuyez sur une touche"
+    },
+    "keybindDescriptionComplete": {
+        "message": "Le raccourci choisi est : "
     }
 }

_locales/it/messages.json

@@ -0,0 +1,244 @@
+{
+    "Name": {
+        "message": "SponsorBlock",
+        "description": "Name of the extension."
+    },
+    "fullName": {
+        "message": "SponsorBlock per YouTube - Salta gli sponsor",
+        "description": "Name of the extension."
+    },
+
+    "Description": {
+        "message": "Salta i contenuti sponsorizzati nei video di YouTube. Segnala gli annunci incorporati nei video che guardi per far risparmiare tempo agli altri.",
+        "description": "Description of the extension."
+    },
+    "helpPage": {
+        "message": "index_en.html"
+    },
+    "400": {
+        "message": "Richiesta non valida"
+    },
+    "429": {
+        "message": "Stai inviando troppi spezzoni per questo video, sei sicuro che ce ne siano così tanti?"
+    },
+    "409": {
+        "message": "Questo spezzone è già stato inviato"
+    },
+    "channelWhitelisted": {
+        "message": "Canale aggiunto alla whitelist!"
+    },
+    "Sponsor": {
+        "message": "sponsorizzazione"
+    },
+    "Sponsors": {
+        "message": "sponsorizzazioni"
+    },
+   "Segment": {
+        "message": "spezzone sponsorizzato"
+    },
+    "Segments": {
+        "message": "spezzoni sponsorizzati"
+    },
+    "noticeTitle": {
+        "message": "Sponsorizzazione Saltata"
+    },
+    "reportButtonTitle": {
+        "message": "Segnala"
+    },
+    "reportButtonInfo": {
+        "message": "Segnala questo spezzone come non corretto."
+    },
+    "Dismiss": {
+        "message": "Chiudi"
+    },
+    "Loading": {
+        "message": "Caricamento..."
+    },
+    "Mins": {
+        "message": "Minuti"
+    },
+    "Secs": {
+        "message": "Secondi"
+    },
+    "Hide": {
+        "message": "Non mostrare più"
+    },
+    "hitGoBack": {
+        "message": "Premi non saltare per tornare da dove sei venuto."
+    },
+    "unskip": {
+        "message": "Non saltare"
+    },
+    "reskip": {
+        "message": "Salta ancora"
+    },
+    "paused": {
+        "message": "In pausa"
+    },
+    "confirmMSG": {
+        "message": "\n\nPer modificare o eliminare valori specifici, premi il pulsante delle informazioni o apri il popup cliccando l'icona dell'estensione nell'angolo in alto a destra."
+    },
+    "clearThis": {
+        "message": "Sei sicuro di volerlo cancellare?\n\n"
+    },
+    "Unknown": {
+        "message": "Si è verificato un errore durante l'invio dello spezzone sponsorizzato, per favore riprova più tardi."
+    },
+  
+    "sponsorFound": {
+        "message": "I contenuti sponsorizzati di questo video sono nel database!"
+    },
+    "sponsor404": {
+        "message": "Nessuna sponsorizzazione trovata"
+    },
+    "sponsorStart": {
+        "message": "La sponsorizzazione inizia adesso"
+    },
+    "sponsorEnd": {
+        "message": "La sponsorizzazione finisce adesso"
+    },
+    "noVideoID": {
+        "message": "Probabilmente questa non è una scheda di YouTube, oppure hai cliccato troppo presto. \nSe sei sicuro di essere in una scheda di YouTube,\n riapri questo popup."
+    },
+    "success": {
+        "message": "Successo!"
+    },
+    "voted": {
+        "message": "Votato!"
+    },
+    "voteFail": {
+        "message": "Hai già votato."
+    },
+    "serverDown": {
+        "message": "Sembra che il server non funzioni. Contatta subito lo sviluppatore."
+    },
+    "connectionError": {
+        "message": "Si è verificato un errore durante la connessione. Codice errore: "
+    },
+    "wantToSubmit": {
+        "message": "Vuoi inviare gli spezzoni sponsorizzati per il video con id"
+    },
+    "leftTimes": {
+        "message": "Sembra che tu non abbia inviato alcuni spezzoni sponsorizzati. Ritorna alla pagina precedente per inviarli (non sono stati eliminati)."
+    },
+    "clearTimes": {
+        "message": "Cancella gli Spezzoni Sponsorizzati"
+    },
+    "openPopup": {
+        "message": "Apri il Popup di SponsorBlock"
+    },
+    "SubmitTimes": {
+        "message": "Invia gli Spezzoni Sponsorizzati"
+    },
+    "submitCheck": {
+        "message": "Sei sicuro di volerlo inviare?"
+    },
+    "whitelistChannel": {
+         "message": "Aggiungi Canale alla Whitelist"
+    },
+    "removeFromWhitelist": {
+         "message": "Rimuovi Canale dalla Whitelist"
+    },
+    "whitelistDescription": {
+         "message": "Aggiungi alla whitelist i canali che sponsorizzano eticamente per incoraggiare ad un comportamento corretto, oppure se sono semplicemente intrattenenti e divertenti. Oppure non farlo, decidi tu."
+    },
+    "voteOnTime": {
+         "message": "Vota uno Spezzone Sponsorizzato"
+    },
+    "recordTimes": {
+         "message": "Registra uno Spezzone Sponsorizzato"
+    },
+    "soFarUHSubmited": {
+         "message": "Fino ad ora hai inviato"
+    },
+    "savedPeopleFrom": {
+         "message": "Hai salvato le persone da "
+    },
+    "viewLeaderboard": {
+         "message": "Guarda la classifica"
+    },
+    "here": {
+        "message": "qui"
+    },
+    "recordTimesDescription": {
+         "message": "Premi il pulsante qui sotto quando inizia e finisce la sponsorizzazione per registrarla e\ninviarla al database."
+    },
+    "popupHint": {
+         "message": "Suggerimento: Premi il tasto punto e virgola mentre il video è attivo per segnalare l'inizio/fine di una sponsorizzazione e virgolette per inviare."
+    },
+    "lastTimes": {
+         "message": "Ultimi minutaggi sponsorizzati scelti"
+    },
+    "clearTimesButton": {
+        "message": "Cancella Minutaggi"
+    },
+    "submitTimesButton": {
+        "message": "Invia Minutaggi"
+    },
+    "publicStats": {
+        "message": "Viene utilizzato nelle pagine delle statistiche pubbliche che mostrano quanto hai contribuito. Vedi"
+    },
+    "setUsername": {
+        "message": "Imposta Username"
+    },
+    "discordAdvert": {
+        "message": "Entra nel server Discord ufficiale per darci suggerimenti e feedback!"
+    },
+    "hideThis": {
+        "message": "Nascondi"
+    },
+    "Options": {
+        "message": "Opzioni"
+    },
+    "showButtons": {
+        "message": "Mostra i Pulsanti nel Lettore di YouTube"
+    },
+    "hideButtons": {
+        "message": "Nascondi i Pulsanti nel Lettore di YouTube"
+    },
+    "hideButtonsDescription": {
+		"message": "Nasconde i pulsanti che appaiono nel lettore di YouTube per inviare spezzoni sponsorizzati. Capisco che può essere fastidioso per alcune\n persone. Invece di utilizzare quei pulsanti, è possibile utilizzare questo popup per inviare gli spezzoni sponsorizzati. Per nascondere l'avviso che appare, \nusa il bottone \"Non mostrare più\" nell'avviso. Potrai sempre abilitare nuovamente queste impostazioni in futuro."
+    },
+    "showInfoButton": {
+        "message": "Mostra il Pulsante Informazioni nel Lettore di YouTube"
+    },
+    "hideInfoButton": {
+        "message": "Nascondi il Pulsante Informazioni nel Lettore di YouTube"
+    },
+    "whatInfoButton": {
+        "message": "Questo è il pulsante che apre un popup nella pagina YouTube."
+    },
+    "hideDeleteButton": {
+        "message": "Nascondi il Pulsante Elimina nel Lettore di YouTube"
+    },
+    "showDeleteButton": {
+        "message": "Mostra il Pulsante Elimina nel Lettore di YouTube"
+    },
+    "whatDeleteButton": {
+        "message": "Questo è il pulsante che ti permette di cancellare tutti gli spezzoni sponsorizzati nel lettore di YouTube."
+    },
+    "disableViewTracking": {
+        "message": "Disattiva il Monitoraggio delle Sponsorizzazioni"
+    },
+    "enableViewTracking": {
+        "message": "Disattiva il Monitoraggio delle Sponsorizzazioni"
+    },
+    "whatViewTracking": {
+        "message": "Questa funzione tiene traccia di quali sponsorizzazioni hai saltato per far sapere agli utenti quanto è stato d'aiuto agli altri il loro contributo e\nviene utilizzato come metrica assieme ai voti positivi per filtrare lo spam dal database. L'estensione invia un messaggio\nal server ogni volta che salti una sponsorizzazione. Si spera che la maggior parte delle persone non modifichi questa impostazione così i numeri sono accurati. :)"
+    },
+    "showNotice": {
+        "message": "Mostra di Nuovo l'Avviso"
+    },
+    "longDescription": {
+        "message": "SponsorBlock è un'estensione che salta gli spezzoni con contenuti sponsorizzati nei video di YouTube. SponsorBlock è un'estensione crowdsourced per i browser che permette a chiunque di inviare i minutaggi degli spezzoni sponsorizzati nei video di YouTube. Quando una persona avrà inviato questa informazione, tutti gli utenti che utilizzano questa estensione potranno saltare lo spezzone sponsorizzato.",
+        "description": "Full description of the extension on the store pages."
+    },
+    "website": {
+        "message": "Sito Web",
+        "description": "Used on Firefox Store Page"
+    },
+    "sourceCode": {
+        "message": "Codice Sorgente",
+        "description": "Used on Firefox Store Page"
+    }
+}

_locales/pt_BR/messages.json

@@ -24,11 +24,8 @@
     "409": {
         "message": "Isso já foi enviado antes"
     },
-    "502": {
-        "message": "Parece que o servidor caiu. Contate o desenvolvedor para informá-los."
-    },
     "channelWhitelisted": {
-        "message": "Canal adicionado a lista branca!"
+        "message": "Canal adicionado à lista branca!"
     },
     "Sponsor": {
         "message": "patrocinador"
@@ -40,7 +37,7 @@
         "message": "segmento de patrocinador"
     },
     "Segments": {
-        "message": "segmento de patrocinadores"
+        "message": "segmentos de patrocinadores"
     },
     "noticeTitle": {
         "message": "Patrocinador pulado"
@@ -85,7 +82,7 @@
         "message": "Tem certeza que quer limpar isso?\n\n"
     },
     "Unknown": {
-        "message": "Teve um erro ao enviar seus segmentos, tente novamente depois"
+        "message": "Teve um erro ao enviar seus segmentos, tente novamente depois."
     },
   
     "sponsorFound": {
@@ -101,7 +98,7 @@
         "message": "Patrocínio termina agora"
     },
     "noVideoID": {
-        "message": "Isso provavelmente não é uma tab do YouTube, ou você clicou muito cedo. \n Se sabe que é uma tab do YouTube,\n fecha esse popup e abre de novo."
+        "message": "Isso provavelmente não é uma tab do YouTube, ou você clicou muito cedo. \n Se sabe que é uma tab do YouTube,\n feche esse popup e abra de novo."
     },
     "success": {
         "message": "Sucesso!"
@@ -122,6 +119,126 @@
         "message": "Quer enviar os segmentos para o vídeo de ID"
     },
     "leftTimes": {
-        "message": "Parece que você esqueceu de enviar alguns segmentos. Volta pra página para enviar eles (não foram deletados)."
+        "message": "Parece que você se esqueceu de enviar alguns segmentos. Volta pra página para os enviar (não foram deletados)."
+    },
+    "clearTimes": {
+        "message": "Apagar intervalos dos patrocínios"
+    },
+    "openPopup": {
+        "message": "Abrir o Popup SponsorBlock"
+    },
+    "SubmitTimes": {
+        "message": "Submeter intervalos dos patrocínios"
+    },
+    "submitCheck": {
+        "message": "Tem a certeza que pretende submeter?"
+    },
+    "whitelistChannel": {
+         "message": "Meter canal na Whitelist"
+    },
+    "removeFromWhitelist": {
+         "message": "Remover canal da Whitelist"
+    },
+    "whitelistDescription": {
+         "message": "Colocar na Whitelist canais com patrocínios éticos que encoragem boas atitude, ou simplesmente canais com patrocínios engraçados. Ou não, é consigo."
+    },
+    "voteOnTime": {
+         "message": "Vote num intervalo de patrocínio"
+    },
+    "recordTimes": {
+         "message": "Registe um intervalo de patrocínio"
+    },
+    "soFarUHSubmited": {
+         "message": "Até agora submeteu"
+    },
+    "savedPeopleFrom": {
+         "message": "Poupaste a outros de "
+    },
+    "viewLeaderboard": {
+         "message": "Ver a leaderboard"
+    },
+    "here": {
+        "message": "aqui"
+    },
+    "recordTimesDescription": {
+         "message": "Carregue neste botão abaixo quando o patrocínio começar e quando\n acabar para registar e submetê-lo à base de dados"
+    },
+    "popupHint": {
+         "message": "Dica: Carregue na tecla ; enquanto num vídeo para registar o começo/fim de um patrocínio e \" para submeter"
+    },
+    "lastTimes": {
+         "message": "Intervalos de Patrocínios Escolhidos mais Recentemente"
+    },
+    "clearTimesButton": {
+        "message": "Limpar Intervalos"
+    },
+    "submitTimesButton": {
+        "message": "Submeter Intervalos"
+    },
+    "publicStats": {
+        "message": "Isto é usado na página pública de estatísticas que mostra o quanto já contríbuíu. Veje-a"
+    },
+    "setUsername": {
+        "message": "Criar nomde de utilizador"
+    },
+    "discordAdvert": {
+        "message": "Junte-se ao discord oficial para sugerir dicas e sugestões!"
+    },
+    "hideThis": {
+        "message": "Esconder isto"
+    },
+    "Options": {
+        "message": "Opções"
+    },
+    "showButtons": {
+        "message": "Mostrar botões no player do Youtube"
+    },
+    "hideButtons": {
+        "message": "Esconder botões no player do Youtube"
+    },
+    "hideButtonsDescription": {
+        "message": "Isto esconde os botões que aparecem no player do Youtube para submeter patrocínios. Entendemos que possa ser\n incómodo a algumas pessoas. Em vez de usar esses botões pode usar os do popup. Para esconder a mensagem que aparece, \n ususe o botão na mesma que diz \"Don't show this again\". Pode sempre reactivar estas definições novamente."
+    },
+    "showInfoButton": {
+        "message": "Mostrar botão de Informações no player do Youtube"
+    },
+    "hideInfoButton": {
+        "message": "Esconder botão de Informações no player do Youtube"
+    },
+    "whatInfoButton": {
+        "message": "Este é o botão que abre o popup na pagina do Youtube."
+    },
+    "hideDeleteButton": {
+        "message": "Esconder botão de Apagar no player do Youtube"
+    },
+    "showDeleteButton": {
+        "message": "Mostrar botão de Apagar no player do Youtube"
+    },
+    "whatDeleteButton": {
+        "message": "Este é o botão que lhe permite saltar todos os patrocínios do player do Youtube."
+    },
+    "disableViewTracking": {
+        "message": "Desactivar registo de visualização de patrocínios"
+    },
+    "enableViewTracking": {
+        "message": "Activar registo de visualização de patrocínios"
+    },
+    "whatViewTracking": {
+        "message": "Esta funcionalidade regista que patrocínios tem saltado para que outros utilizadores saibam o quanto as suas submições têm ajudado outros\n e é usado como métrica de votos para evitar spam na base de dados. A extenção \n envia uma notificação ao servidor sempre que salta um patrocínio. Quanto menos pessoas desactivarem esta funcionalidade mais precisas serão as estimativas :)"
+    },
+    "showNotice": {
+        "message": "Mostrar notificação outra vez"
+    },
+    "longDescription": {
+        "message": "SponsorBlock é uma extensão que salta segmentos patrocinados em vídeos do YouTube. SponsorBlock é uma extenção crowdfunded que permite a qualquer um submeter o início e o fim de segmentos patrocinados. Assim que uma pessoa submete essa informação todos com a extenção poderam saltar automaticamete o patrocínio.",
+        "description": "Descrição completa da extençao nas lojas dos browsers."
+    },
+    "website": {
+        "message": "Site",
+        "description": "Usado na pagina da loja do Firefox"
+    },
+    "sourceCode": {
+        "message": "Código fonte",
+        "description": "Usado na pagina da loja do Firefox"
     }
 }

_locales/pt_pt/messages.json

@@ -0,0 +1,243 @@
+{
+    "Name": {
+        "message": "SponsorBlock",
+        "description": "Nome da extensão."
+    },
+    "fullName": {
+        "message": "SponsorBlock para o YouTube - Salte patrocínios",
+        "description": "Nome da extensão."
+    },
+
+    "Description": {
+        "message": "Salte patrocinadores em vídeos do YouTube. Reporte patrocinadores em vídeos que assista para poupar tempo a outros.",
+        "description": "Descrição da extensão."
+    },
+    "helpPage": {
+        "message": "index_en.html"
+    },
+    "400": {
+        "message": "O servidor disse que este pedido foi inválido"
+    },
+    "429": {
+        "message": "Enviou muitos segmentos para este vídeo, tem certeza que tem assim tantos?"
+    },
+    "409": {
+        "message": "Isso já foi enviado antes"
+    },
+    "channelWhitelisted": {
+        "message": "Canal adicionado à whitelist!"
+    },
+    "Sponsor": {
+        "message": "patrocinador"
+    },
+    "Sponsors": {
+        "message": "patrocinadores"
+    },
+   "Segment": {
+        "message": "segmento de patrocínio"
+    },
+    "Segments": {
+        "message": "segmentos de patrocínio"
+    },
+    "noticeTitle": {
+        "message": "Patrocínio saltado"
+    },
+    "reportButtonTitle": {
+        "message": "Reportar"
+    },
+    "reportButtonInfo": {
+        "message": "Reportar subimissão como inválida."
+    },
+    "Dismiss": {
+        "message": "Ignorar"
+    },
+    "Loading": {
+        "message": "A carregar..."
+    },
+    "Mins": {
+        "message": "Minutos"
+    },
+    "Secs": {
+        "message": "Segundos"
+    },
+    "Hide": {
+        "message": "Nunca mostrar"
+    },
+    "hitGoBack": {
+        "message": "Carregue em reverter salto para voltar a onde estava"
+    },
+    "unskip": {
+        "message": "Reverter salto"
+    },
+    "reskip": {
+        "message": "Saltar novamente"
+    },
+    "paused": {
+        "message": "Pausado"
+    },
+    "confirmMSG": {
+        "message": "\n\nPara editar ou remover linhas individuais, carregue com o botão direito ou abra o popup da extensão pelo icone no canto superior direito."
+    },
+    "clearThis": {
+        "message": "Tem certeza que deseja limpar isto?\n\n"
+    },
+    "Unknown": {
+        "message": "Erro ao enviar os seus segmentos, tente novamente mais tarde."
+    },
+    "sponsorFound": {
+        "message": "Os patrocinadores desse vídeo estão no banco de dados!"
+    },
+    "sponsor404": {
+        "message": "Nenhum patrocinador encontrado"
+    },
+    "sponsorStart": {
+        "message": "Patrocínio começa agora"
+    },
+    "sponsorEnd": {
+        "message": "Patrocínio termina agora"
+    },
+    "noVideoID": {
+        "message": "Isto provavelmente não é uma tab do YouTube, ou pode ter clicado muito cedo. \n Se sabe que é uma tab do YouTube,\n feche este popup e abra de novo."
+    },
+    "success": {
+        "message": "Sucesso!"
+    },
+    "voted": {
+        "message": "Votado!"
+    },
+    "voteFail": {
+        "message": "Já votou antes."
+    },
+    "serverDown": {
+        "message": "Parece que o servidor caiu. Contacte o desenvolvedor o quanto antes."
+    },
+    "connectionError": {
+        "message": "Deu-se um erro de conecção: Código: "
+    },
+    "wantToSubmit": {
+        "message": "Quer enviar os segmentos para o vídeo de ID"
+    },
+    "leftTimes": {
+        "message": "Parece que se esqueceu de enviar alguns segmentos. Retorne à página para os enviar (não foram apagados)."
+    },
+    "clearTimes": {
+        "message": "Apagar intervalos dos patrocínios"
+    },
+    "openPopup": {
+        "message": "Abrir o Popup SponsorBlock"
+    },
+    "SubmitTimes": {
+        "message": "Submeter intervalos dos patrocínios"
+    },
+    "submitCheck": {
+        "message": "Tem a certeza que pretende submeter?"
+    },
+    "whitelistChannel": {
+         "message": "Meter canal na Whitelist"
+    },
+    "removeFromWhitelist": {
+         "message": "Remover canal da Whitelist"
+    },
+    "whitelistDescription": {
+         "message": "Colocar na Whitelist canais com patrocínios éticos que encoragem boas atitude, ou simplesmente canais com patrocínios engraçados. Ou não, é consigo."
+    },
+    "voteOnTime": {
+         "message": "Vote num intervalo de patrocínio"
+    },
+    "recordTimes": {
+         "message": "Registe um intervalo de patrocínio"
+    },
+    "soFarUHSubmited": {
+         "message": "Até agora submeteu"
+    },
+    "savedPeopleFrom": {
+         "message": "Poupaste a outros de "
+    },
+    "viewLeaderboard": {
+         "message": "Ver a leaderboard"
+    },
+    "here": {
+        "message": "aqui"
+    },
+    "recordTimesDescription": {
+         "message": "Carregue neste botão abaixo quando o patrocínio começar e quando\n acabar para registar e submetê-lo à base de dados"
+    },
+    "popupHint": {
+         "message": "Dica: Carregue na tecla ; enquanto num vídeo para registar o começo/fim de um patrocínio e \" para submeter"
+    },
+    "lastTimes": {
+         "message": "Intervalos de Patrocínios Escolhidos mais Recentemente"
+    },
+    "clearTimesButton": {
+        "message": "Limpar Intervalos"
+    },
+    "submitTimesButton": {
+        "message": "Submeter Intervalos"
+    },
+    "publicStats": {
+        "message": "Isto é usado na página pública de estatísticas que mostra o quanto já contríbuíu. Veje-a"
+    },
+    "setUsername": {
+        "message": "Criar nomde de utilizador"
+    },
+    "discordAdvert": {
+        "message": "Junte-se ao discord oficial para sugerir dicas e sugestões!"
+    },
+    "hideThis": {
+        "message": "Esconder isto"
+    },
+    "Options": {
+        "message": "Opções"
+    },
+    "showButtons": {
+        "message": "Mostrar botões no player do Youtube"
+    },
+    "hideButtons": {
+        "message": "Esconder botões no player do Youtube"
+    },
+    "hideButtonsDescription": {
+        "message": "Isto esconde os botões que aparecem no player do Youtube para submeter patrocínios. Entendemos que possa ser\n incómodo a algumas pessoas. Em vez de usar esses botões pode usar os do popup. Para esconder a mensagem que aparece, \n ususe o botão na mesma que diz \"Don't show this again\". Pode sempre reactivar estas definições novamente."
+    },
+    "showInfoButton": {
+        "message": "Mostrar botão de Informações no player do Youtube"
+    },
+    "hideInfoButton": {
+        "message": "Esconder botão de Informações no player do Youtube"
+    },
+    "whatInfoButton": {
+        "message": "Este é o botão que abre o popup na pagina do Youtube."
+    },
+    "hideDeleteButton": {
+        "message": "Esconder botão de Apagar no player do Youtube"
+    },
+    "showDeleteButton": {
+        "message": "Mostrar botão de Apagar no player do Youtube"
+    },
+    "whatDeleteButton": {
+        "message": "Este é o botão que lhe permite saltar todos os patrocínios do player do Youtube."
+    },
+    "disableViewTracking": {
+        "message": "Desactivar registo de visualização de patrocínios"
+    },
+    "enableViewTracking": {
+        "message": "Activar registo de visualização de patrocínios"
+    },
+    "whatViewTracking": {
+        "message": "Esta funcionalidade regista que patrocínios tem saltado para que outros utilizadores saibam o quanto as suas submições têm ajudado outros\n e é usado como métrica de votos para evitar spam na base de dados. A extenção \n envia uma notificação ao servidor sempre que salta um patrocínio. Quanto menos pessoas desactivarem esta funcionalidade mais precisas serão as estimativas :)"
+    },
+    "showNotice": {
+        "message": "Mostrar notificação outra vez"
+    },
+    "longDescription": {
+        "message": "SponsorBlock é uma extensão que salta segmentos patrocinados em vídeos do YouTube. SponsorBlock é uma extenção crowdfunded que permite a qualquer um submeter o início e o fim de segmentos patrocinados. Assim que uma pessoa submete essa informação todos com a extenção poderam saltar automaticamete o patrocínio.",
+        "description": "Descrição completa da extençao nas lojas dos browsers."
+    },
+    "website": {
+        "message": "Site",
+        "description": "Usado na pagina da loja do Firefox"
+    },
+    "sourceCode": {
+        "message": "Código fonte",
+        "description": "Usado na pagina da loja do Firefox"
+    }
+}

_locales/ru/messages.json

@@ -24,9 +24,6 @@
     "409": {
         "message": "Этот запрос был отправлен ранее."
     },
-    "502": {
-        "message": "Сервер недоступен. Свяжитесь с разработчиком и сообщите ему об этом."
-    },
     "channelWhitelisted": {
         "message": "Канал добавлен в белый список!"
     },

background.js

@@ -1,7 +1,19 @@
-chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
+isBackgroundScript = true;
+
+// Used only on Firefox, which does not support non persistent background pages.
+var contentScriptRegistrations = {};
+
+// Register content script if needed
+if (isFirefox()) {
+    wait(() => SB.config !== undefined).then(function() {
+        if (SB.config.supportInvidious) setupExtraSiteContentScripts();
+    });
+} 
+
+chrome.tabs.onUpdated.addListener(function(tabId) {
 	chrome.tabs.sendMessage(tabId, {
         message: 'update',
-	});
+	}, () => void chrome.runtime.lastError ); // Suppress error on Firefox
 });
 
 chrome.runtime.onMessage.addListener(function (request, sender, callback) {
@@ -16,6 +28,7 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
         
             //this allows the callback to be called later
             return true;
+        
         case "getSponsorTimes":
             getSponsorTimes(request.videoID, function(sponsorTimes) {
                 callback({
@@ -33,60 +46,73 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
         case "alertPrevious":
             chrome.notifications.create("stillThere" + Math.random(), {
                 type: "basic",
-        title: chrome.i18n.getMessage("wantToSubmit") + request.previousVideoID + "?",
+                title: chrome.i18n.getMessage("wantToSubmit") + " " + request.previousVideoID + "?",
                 message: chrome.i18n.getMessage("leftTimes"),
                 iconUrl: "./icons/LogoSponsorBlocker256px.png"
             });
+        case "registerContentScript": 
+            registerFirefoxContentScript(request);
+            return false;
+        case "unregisterContentScript": 
+            contentScriptRegistrations[request.id].unregister();
+            delete contentScriptRegistrations[request.id];
+            
+            return false;
 	}
 });
 
 //add help page on install
 chrome.runtime.onInstalled.addListener(function (object) {
-    // TODO (shownInstallPage): remove shownInstallPage logic after sufficient amount of time,
-    // so that people have time to upgrade and move to shownInstallPage-free code.
-    chrome.storage.sync.get(["userID", "shownInstallPage"], function(result) {
-        const userID = result.userID;
-        // TODO (shownInstallPage): delete row below
-        const shownInstallPage = result.shownInstallPage;
+    // This let's the config sync to run fully before checking.
+    // This is required on Firefox
+    setTimeout(function() {
+        const userID = SB.config.userID;
 
         // If there is no userID, then it is the first install.
         if (!userID){
-            // Show install page, if there is no user id
-            // and there is no shownInstallPage.
-            // TODO (shownInstallPage): remove this if statement, but leave contents
-            if (!shownInstallPage){
             //open up the install page
-                chrome.tabs.create({url: chrome.extension.getURL("/help/"+chrome.i18n.getMessage("helpPage"))});
-            }
-
-            // TODO (shownInstallPage): delete if statement and contents
-            // If shownInstallPage is set, remove it.
-            if (!!shownInstallPage){
-                chrome.storage.sync.remove("shownInstallPage");
-            }
+            chrome.tabs.create({url: chrome.extension.getURL("/help/index_en.html")});
 
             //generate a userID
             const newUserID = generateUserID();
             //save this UUID
-            chrome.storage.sync.set({
-                "userID": newUserID
-            });
+            SB.config.userID = newUserID;
+            
+            //TODO: Remove when invidious support is old
+            // Don't show this to new users
+            SB.config.invidiousUpdateInfoShowCount = 6;
         }
-    });
+    }, 1500);
 });
 
+/**
+ * Only works on Firefox.
+ * Firefox requires that it be applied after every extension restart.
+ * 
+ * @param {JSON} options 
+ */
+function registerFirefoxContentScript(options) {
+    let oldRegistration = contentScriptRegistrations[options.id];
+    if (oldRegistration) oldRegistration.unregister();
+
+    browser.contentScripts.register({
+        allFrames: options.allFrames,
+        js: options.js,
+        css: options.css,
+        matches: options.matches
+    }).then(() => void (contentScriptRegistrations[options.id] = registration));
+}
+
 //gets the sponsor times from memory
 function getSponsorTimes(videoID, callback) {
     let sponsorTimes = [];
-    let sponsorTimeKey = "sponsorTimes" + videoID;
-    chrome.storage.sync.get([sponsorTimeKey], function(result) {
-        let sponsorTimesStorage = result[sponsorTimeKey];
+    let sponsorTimesStorage = SB.config.sponsorTimes.get(videoID);
+	
     if (sponsorTimesStorage != undefined && sponsorTimesStorage.length > 0) {
         sponsorTimes = sponsorTimesStorage;
     }
 	
-        callback(sponsorTimes)
-    });
+    callback(sponsorTimes);
 }
 
 function addSponsorTime(time, videoID, callback) {
@@ -104,25 +130,22 @@ function addSponsorTime(time, videoID, callback) {
         }
 
         //save this info
-        let sponsorTimeKey = "sponsorTimes" + videoID;
-        chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}, callback);
+		SB.config.sponsorTimes.set(videoID, sponsorTimes);
+		callback();
     });
 }
 
 function submitVote(type, UUID, callback) {
-    chrome.storage.sync.get(["userID"], function(result) {
-        let userID = result.userID;
+    let userID = SB.config.userID;
 
     if (userID == undefined || userID === "undefined") {
         //generate one
         userID = generateUserID();
-            chrome.storage.sync.set({
-                "userID": userID
-            });
+        SB.config.userID = userID;
     }
 
     //publish this vote
-        sendRequestToServer("GET", "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + "&type=" + type, function(xmlhttp, error) {
+    sendRequestToServer("POST", "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + "&type=" + type, function(xmlhttp, error) {
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
             callback({
                 successType: 1
@@ -140,16 +163,14 @@ function submitVote(type, UUID, callback) {
                 statusCode: xmlhttp.status
             });
         }
-        })
-    })
+
+    });
 }
 
-function submitTimes(videoID, callback) {
+async function submitTimes(videoID, callback) {
     //get the video times from storage
-    let sponsorTimeKey = 'sponsorTimes' + videoID;
-    chrome.storage.sync.get([sponsorTimeKey, "userID"], async function(result) {
-        let sponsorTimes = result[sponsorTimeKey];
-        let userID = result.userID;
+    let sponsorTimes = SB.config.sponsorTimes.get(videoID);
+    let userID = SB.config.userID;
 		
     if (sponsorTimes != undefined && sponsorTimes.length > 0) {
         let durationResult = await new Promise((resolve, reject) => {
@@ -172,6 +193,9 @@ function submitTimes(videoID, callback) {
 
         //submit these times
         for (let i = 0; i < sponsorTimes.length; i++) {
+                //to prevent it from happeneing twice
+                let increasedContributionAmount = false;
+
                 //submit the sponsorTime
                 sendRequestToServer("GET", "/api/postVideoSponsorTimes?videoID=" + videoID + "&startTime=" + sponsorTimes[i][0] + "&endTime=" + sponsorTimes[i][1]
                 + "&userID=" + userID, function(xmlhttp, error) {
@@ -182,16 +206,12 @@ function submitTimes(videoID, callback) {
 
                     if (xmlhttp.status == 200) {
                         //add these to the storage log
-                                chrome.storage.sync.get(["sponsorTimesContributed"], function(result) {
-                                    let currentContributionAmount = 0;
-                                    if (result.sponsorTimesContributed != undefined) {
-                                        //current contribution amount is known
-                                        currentContributionAmount = result.sponsorTimesContributed;
-                                    }
-
+                                currentContributionAmount = SB.config.sponsorTimesContributed;
                                 //save the amount contributed
-                                    chrome.storage.sync.set({"sponsorTimesContributed": currentContributionAmount + sponsorTimes.length});
-                                });
+                                if (!increasedContributionAmount) {
+                                    increasedContributionAmount = true;
+                                    SB.config.sponsorTimesContributed = currentContributionAmount + sponsorTimes.length;
+                                }
                         }
                     } else if (error) {
                         callback({
@@ -201,7 +221,6 @@ function submitTimes(videoID, callback) {
             });
         }
     }
-    });
 }
 
 function sendRequestToServer(type, address, callback) {
@@ -222,21 +241,3 @@ function sendRequestToServer(type, address, callback) {
     //submit this request
     xmlhttp.send();
 }
-
-function generateUserID(length = 36) {
-        let charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-        let result = "";
-        if (window.crypto && window.crypto.getRandomValues) {
-                values = new Uint32Array(length);
-                window.crypto.getRandomValues(values);
-                for (i = 0; i < length; i++) {
-                        result += charset[values[i] % charset.length];
-                }
-                return result;
-        } else {
-                for (let i = 0; i < length; i++) {
-                    result += charset[Math.floor(Math.random() * charset.length)];
-                }
-                return result;
-        }
-}

content.css

@@ -71,7 +71,7 @@
 }
 
 .sponsorSkipNotice {
-    min-width: 300px;
+    min-width: 350px;
     background-color: rgba(28, 28, 28, 0.9);
     position: absolute;
 	right: 5px;

content.js

@@ -10,6 +10,9 @@ var sponsorVideoID = null;
 //these are sponsors that have been downvoted
 var hiddenSponsorTimes = [];
 
+/** @type {Array[boolean]} Has the sponsor been skipped */
+var sponsorSkipped = [];
+
 //the video
 var v;
 
@@ -24,6 +27,9 @@ var durationListenerSetUp = false;
 //the channel this video is about
 var channelURL;
 
+//the title of the last video loaded. Used to make sure the channel URL has been updated yet.
+var title;
+
 //is this channel whitelised from getting sponsors skipped
 var channelWhitelisted = false;
 
@@ -52,11 +58,6 @@ var lastSponsorTimeSkippedUUID = null;
 //if showing the start sponsor button or the end sponsor button on the player
 var showingStartSponsor = true;
 
-//should the video controls buttons be added
-var hideVideoPlayerControls = false;
-var hideInfoButtonPlayerControls = false;
-var hideDeleteButtonPlayerControls = false;
-
 //the sponsor times being prepared to be submitted
 var sponsorTimesSubmitting = [];
 
@@ -64,46 +65,24 @@ var sponsorTimesSubmitting = [];
 //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) {
-    let trackViewCountStorage = result.trackViewCount;
-    if (trackViewCountStorage != undefined) {
-        trackViewCount = trackViewCountStorage;
-    } else {
-        trackViewCount = true;
-    }
-});
-
-//if the notice should not be shown
-//happens when the user click's the "Don't show notice again" button
-var dontShowNotice = false;
-chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
-    let dontShowNoticeAgain = result.dontShowNoticeAgain;
-    if (dontShowNoticeAgain != undefined) {
-        dontShowNotice = dontShowNoticeAgain;
-    }
-});
-
 //get messages from the background script and the popup
 chrome.runtime.onMessage.addListener(messageListener);
   
 function messageListener(request, sender, sendResponse) {
     //messages from popup script
-  
-        if (request.message == "update") {
+    switch(request.message){
+        case "update":
             videoIDChange(getYouTubeVideoID(document.URL));
-        }
-  
-        if (request.message == "sponsorStart") {
+            break;
+        case "sponsorStart":
             sponsorMessageStarted(sendResponse);
-        }
 
-        if (request.message == "sponsorDataChanged") {
+            break;
+        case "sponsorDataChanged":
             updateSponsorTimesSubmitting();
-        }
 
-        if (request.message == "isInfoFound") {
+            break;
+        case "isInfoFound":
             //send the sponsor times along with if it's found
             sendResponse({
                 found: sponsorDataFound,
@@ -118,87 +97,90 @@ function messageListener(request, sender, sendResponse) {
             }
 
             popupInitialised = true;
-        }
-
-        if (request.message == "getVideoID") {
+            break;
+        case "getVideoID":
             sendResponse({
                 videoID: sponsorVideoID
-            })
-        }
+            });
 
-        if (request.message == "getVideoDuration") {
+            break;
+        case "getVideoDuration":
             sendResponse({
             duration: v.duration
             });
-        }
 
-        if (request.message == "skipToTime") {
+            break;
+        case "skipToTime":
             v.currentTime = request.time;
-        }
-
-        if (request.message == "getCurrentTime") {
+            return
+        case "getCurrentTime":
             sendResponse({
                 currentTime: v.currentTime
             });
-        }
 
-        if (request.message == "getChannelURL") {
+            break;
+        case "getChannelURL":
             sendResponse({
             channelURL: channelURL
-            })
-        }
+            });
 
-        if (request.message == "isChannelWhitelisted") {
+            break;
+        case "isChannelWhitelisted":
             sendResponse({
                 value: channelWhitelisted
-            })
-        }
+            });
 
-        if (request.message == "whitelistChange") {
+            break;
+        case "whitelistChange":
             channelWhitelisted = request.value;
             sponsorsLookup(sponsorVideoID);
-        }
 
-        if (request.message == "showNoticeAgain") {
-            dontShowNotice = false;
-        }
-
-        if (request.message == "changeStartSponsorButton") {
+            break;
+        case "changeStartSponsorButton":
             changeStartSponsorButton(request.showStartSponsor, request.uploadButtonVisible);
-        }
 
-        if (request.message == "changeVideoPlayerControlsVisibility") {
-            hideVideoPlayerControls = request.value;
-
-            updateVisibilityOfPlayerControlsButton();
-        } else if (request.message == "changeInfoButtonPlayerControlsVisibility") {
-            hideInfoButtonPlayerControls = request.value;
-
-            updateVisibilityOfPlayerControlsButton();
-        } else if (request.message == "changeDeleteButtonPlayerControlsVisibility") {
-            hideDeleteButtonPlayerControls = request.value;
-
-            updateVisibilityOfPlayerControlsButton();
-        }
-
-        if (request.message == "trackViewCount") {
-            trackViewCount = request.value;
+            break;
     }
 }
 
+/**
+ * Called when the config is updated
+ * 
+ * @param {String} changes 
+ */
+function contentConfigUpdateListener(changes) {
+    for (const key in changes) {
+        switch(key) {
+            case "hideVideoPlayerControls":
+            case "hideInfoButtonPlayerControls":
+            case "hideDeleteButtonPlayerControls":
+                updateVisibilityOfPlayerControlsButton()
+                break;
+        }
+    }
+}
+
+if (!SB.configListeners.includes(contentConfigUpdateListener)) {
+    SB.configListeners.push(contentConfigUpdateListener);
+}
+
 //check for hotkey pressed
-document.onkeydown = function(e){
+document.onkeydown = async function(e){
     e = e || window.event;
-    var key = e.which || e.keyCode;
+    var key = e.key;
 
     let video = document.getElementById("movie_player");
 
+    let startSponsorKey = SB.config.startSponsorKeybind;
+
+    let submitKey = SB.config.submitKeybind;
+
     //is the video in focus, otherwise they could be typing a comment
     if (document.activeElement === video) {
-        if(key == 186){
+        if(key == startSponsorKey.startSponsorKeybind){
             //semicolon
             startSponsorClicked();
-        } else if (key == 222) {
+        } else if (key == submitKey.submitKeybind) {
             //single quote
             submitSponsorTimes();
         }
@@ -235,22 +217,36 @@ function videoIDChange(id) {
 	//id is not valid
     if (!id) return;
 
+    let channelIDPromise = wait(getChannelID);
+    channelIDPromise.then(() => channelIDPromise.isFulfilled = true).catch(() => channelIDPromise.isRejected  = true);
+
     //setup the preview bar
     if (previewBar == null) {
         //create it
         wait(getControls).then(result => {
-            let progressBar = document.getElementsByClassName("ytp-progress-bar-container")[0] || document.getElementsByClassName("no-model cue-range-markers")[0];
-            previewBar = new PreviewBar(progressBar);
+            const progressElementSelectors = [
+                // For YouTube
+                "ytp-progress-bar-container",
+                "no-model cue-range-markers",
+                // For Invidious/VideoJS
+                "vjs-progress-holder"
+            ];
+
+            for (const selector of progressElementSelectors) {
+                const el = document.getElementsByClassName(selector);
+
+                if (el && el.length && el[0]) {
+                    previewBar = new PreviewBar(el[0]);
+                    break;
+                }
+            }
         });
     }
 
     //warn them if they had unsubmitted times
     if (previousVideoID != null) {
         //get the sponsor times from storage
-        let sponsorTimeKey = 'sponsorTimes' + previousVideoID;
-        chrome.storage.sync.get([sponsorTimeKey], function(result) {
-            let sponsorTimes = result[sponsorTimeKey];
-
+        let sponsorTimes = SB.config.sponsorTimes.get(previousVideoID);
         if (sponsorTimes != undefined && sponsorTimes.length > 0) {
             //warn them that they have unsubmitted sponsor times
                 chrome.runtime.sendMessage({
@@ -261,7 +257,6 @@ function videoIDChange(id) {
 
         //set the previous video id to the currentID
         previousVideoID = id;
-        });
     } else {
         //set the previous id now, don't wait for chrome.storage.get
         previousVideoID = id;
@@ -270,7 +265,7 @@ function videoIDChange(id) {
     //close popup
     closeInfoMenu();
 	
-    sponsorsLookup(id);
+    sponsorsLookup(id, channelIDPromise);
 
     //make sure everything is properly added
     updateVisibilityOfPlayerControlsButton();
@@ -303,33 +298,13 @@ function videoIDChange(id) {
 			}
 		});
 	});
-
     //see if video controls buttons should be added
-    chrome.storage.sync.get(["hideVideoPlayerControls"], function(result) {
-        if (result.hideVideoPlayerControls != undefined) {
-            hideVideoPlayerControls = result.hideVideoPlayerControls;
-        }
-
+    if (!onInvidious) {
         updateVisibilityOfPlayerControlsButton();
-    });
-    chrome.storage.sync.get(["hideInfoButtonPlayerControls"], function(result) {
-        if (result.hideInfoButtonPlayerControls != undefined) {
-            hideInfoButtonPlayerControls = result.hideInfoButtonPlayerControls;
     }
-
-        updateVisibilityOfPlayerControlsButton();
-    });
-    chrome.storage.sync.get(["hideDeleteButtonPlayerControls"], function(result) {
-        if (result.hideDeleteButtonPlayerControls != undefined) {
-            hideDeleteButtonPlayerControls = result.hideDeleteButtonPlayerControls;
-        }
-
-        updateVisibilityOfPlayerControlsButton(false);
-    });
-  
 }
 
-function sponsorsLookup(id) {
+function sponsorsLookup(id, channelIDPromise) {
     v = document.querySelector('video') // Youtube video player
     //there is no video here
     if (v == null) {
@@ -344,8 +319,19 @@ function sponsorsLookup(id) {
         v.addEventListener('durationchange', updatePreviewBar);
     }
 
-    //check database for sponsor times
+    if (channelIDPromise != null) {
+        if (channelIDPromise.isFulfilled) {
+            whitelistCheck();
+        } else if (channelIDPromise.isRejected) {
+            //try again
+            wait(getChannelID).then(whitelistCheck).catch();
+        } else {
+            //add it as a then statement
+            channelIDPromise.then(whitelistCheck);
+        }
+    }
 
+    //check database for sponsor times
     //made true once a setTimeout has been created to try again after a server error
     let recheckStarted = false;
     sendRequestToServer('GET', "/api/getVideoSponsorTimes?videoID=" + id, function(xmlhttp) {
@@ -355,6 +341,9 @@ function sponsorsLookup(id) {
             sponsorTimes = JSON.parse(xmlhttp.responseText).sponsorTimes;
             UUIDs = JSON.parse(xmlhttp.responseText).UUIDs;
 
+            // Reset skip save
+            sponsorSkipped = [];
+
             //update the preview bar
             //leave the type blank for now until categories are added
             if (lastPreviewBarUpdate == id || (lastPreviewBarUpdate == null && !isNaN(v.duration))) {
@@ -363,21 +352,20 @@ function sponsorsLookup(id) {
                 updatePreviewBar();
             }
 
-            getChannelID();
-
             sponsorLookupRetries = 0;
         } else if (xmlhttp.readyState == 4 && xmlhttp.status == 404) {
             sponsorDataFound = false;
 
             //check if this video was uploaded recently
             //use the invidious api to get the time published
-            sendRequestToCustomServer('GET', "https://invidio.us/api/v1/videos/" + id, function(xmlhttp, error) {
+            sendRequestToCustomServer('GET', "https://invidio.us/api/v1/videos/" + id + '?fields=published', function(xmlhttp, error) {
                 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                     let unixTimePublished = JSON.parse(xmlhttp.responseText).published;
 
                     //if less than 3 days old
                     if ((Date.now() / 1000) - unixTimePublished < 259200) {
-                        setTimeout(() => sponsorsLookup(id), 10000);
+                        //TODO lower when server becomes better
+                        setTimeout(() => sponsorsLookup(id), 180000);
                     }
                 }
             });
@@ -386,17 +374,20 @@ function sponsorsLookup(id) {
         } else if (xmlhttp.readyState == 4 && sponsorLookupRetries < 90 && !recheckStarted) {
             recheckStarted = true;
 
+            //TODO lower when server becomes better (back to 1 second)
             //some error occurred, try again in a second
-            setTimeout(() => sponsorsLookup(id), 1000);
+            setTimeout(() => sponsorsLookup(id), 10000);
 
             sponsorLookupRetries++;
         }
     });
 
     //add the event to run on the videos "ontimeupdate"
+    if (!SB.config.disableSkipping) {
         v.ontimeupdate = function () { 
             sponsorCheck();
         };
+    }
 }
 
 function updatePreviewBar() {
@@ -408,7 +399,12 @@ function updatePreviewBar() {
     //create an array of the sponsor types
     let types = [];
     for (let i = 0; i < localSponsorTimes.length; i++) {
+        if (!hiddenSponsorTimes.includes(i)) {
             types.push("sponsor");
+        } else {
+            // Don't show this sponsor
+            types.push(null);
+        }
     }
     for (let i = 0; i < sponsorTimesSubmitting.length; i++) {
         types.push("previewSponsor");
@@ -422,47 +418,73 @@ function updatePreviewBar() {
 
 function getChannelID() {
     //get channel id
-    let channelContainers = document.querySelectorAll("#owner-name");
     let channelURLContainer = null;
 
-    for (let i = 0; i < channelContainers.length; i++) {
-        if (channelContainers[i].firstElementChild != null) {
-            channelURLContainer = channelContainers[i].firstElementChild;
-        }
-    }
-
-    if (channelContainers.length == 0) {
+    channelURLContainer = document.querySelector("#channel-name > #container > #text-container > #text");
+    if (channelURLContainer !== null) {
+        channelURLContainer = channelURLContainer.firstElementChild;
+    } else if (onInvidious) {
+        // Unfortunately, the Invidious HTML doesn't have much in the way of element identifiers...
+        channelURLContainer = document.querySelector("body > div > div.pure-u-1.pure-u-md-20-24 div.pure-u-1.pure-u-lg-3-5 > div > a");
+    } else {
         //old YouTube theme
-        channelContainers = document.getElementsByClassName("yt-user-info");
+        let channelContainers = document.getElementsByClassName("yt-user-info");
         if (channelContainers.length != 0) {
             channelURLContainer = channelContainers[0].firstElementChild;
         }
     }
 
-    if (channelURLContainer == null) {
+    if (channelURLContainer === null) {
         //try later
-        setTimeout(getChannelID, 100);
-        return;
+        return false;
     }
 
+    //first get the title to make sure a title change has occurred (otherwise the next video might still be loading)
+    let titleInfoContainer = document.getElementById("info-contents");
+    let currentTitle = "";
+    if (titleInfoContainer != null) {
+        currentTitle = titleInfoContainer.firstElementChild.firstElementChild.querySelector(".title").firstElementChild.innerText;
+    } else if (onInvidious) {
+        // Unfortunately, the Invidious HTML doesn't have much in the way of element identifiers...
+        currentTitle = document.querySelector("body > div > div.pure-u-1.pure-u-md-20-24 div.pure-u-1.pure-u-lg-3-5 > div > a > div > span").textContent;
+    } else {
+        //old YouTube theme
+        currentTitle = document.getElementById("eow-title").innerText;
+    }
+
+    if (title == currentTitle) {
+        //video hasn't changed yet, wait
+        //try later
+        return false;
+    }
+    title = currentTitle;
+
     channelURL = channelURLContainer.getAttribute("href");
 
+    //reset variables
+    channelWhitelisted = false;
+}
+
+//checks if this channel is whitelisted, should be done only after the channelID has been loaded
+function whitelistCheck() {
     //see if this is a whitelisted channel
-    chrome.storage.sync.get(["whitelistedChannels"], function(result) {
-        let whitelistedChannels = result.whitelistedChannels;
+    let whitelistedChannels = SB.config.whitelistedChannels;
 
     if (whitelistedChannels != undefined && whitelistedChannels.includes(channelURL)) {
-            //reset sponsor times to nothing
-            sponsorTimes = [];
-            UUIDs = [];
-
         channelWhitelisted = true;
     }
-    });
 }
 
 //video skipping
 function sponsorCheck() {
+    if (SB.config.disableSkipping) {
+        // Make sure this isn't called again
+        v.ontimeupdate = null;
+        return;
+    } else if (channelWhitelisted) {
+        return;
+    }
+
     let skipHappened = false;
 
     if (sponsorTimes != null) {
@@ -521,7 +543,9 @@ function checkIfTimeToSkip(currentVideoTime, startTime, endTime) {
 
 //skip fromt he start time to the end time for a certain index sponsor time
 function skipToTime(v, index, sponsorTimes, openNotice) {
+    if (!SB.config.disableAutoSkip) {
         v.currentTime = sponsorTimes[index][1];
+    }
 
     lastSponsorTimeSkipped = sponsorTimes[index][0];
   
@@ -530,19 +554,33 @@ function skipToTime(v, index, sponsorTimes, openNotice) {
 
     if (openNotice) {
         //send out the message saying that a sponsor message was skipped
-        if (!dontShowNotice) {
-            new SkipNotice(this, currentUUID);
+        if (!SB.config.dontShowNotice) {
+            let skipNotice = new SkipNotice(this, currentUUID, SB.config.disableAutoSkip);
+
+            //TODO: Remove this when Invidious support is old
+            if (SB.config.invidiousUpdateInfoShowCount < 5) {
+                skipNotice.addNoticeInfoMessage(chrome.i18n.getMessage("invidiousInfo1"), chrome.i18n.getMessage("invidiousInfo2"));
+
+                SB.config.invidiousUpdateInfoShowCount += 1;
+            }
 
             //auto-upvote this sponsor
-            if (trackViewCount) {
+            if (SB.config.trackViewCount && !SB.config.disableAutoSkip && SB.config.autoUpvote) {
                 vote(1, currentUUID, null);
             }
         }
     }
 
-    //send telemetry that a this sponsor was skipped happened
-    if (trackViewCount) {
-        sendRequestToServer("GET", "/api/viewedVideoSponsorTime?UUID=" + currentUUID);
+    //send telemetry that a this sponsor was skipped
+    if (SB.config.trackViewCount && !sponsorSkipped[index]) {
+        sendRequestToServer("POST", "/api/viewedVideoSponsorTime?UUID=" + currentUUID);
+
+        if (!SB.config.disableAutoSkip) {
+            // Count this as a skip
+            SB.config.minutesSaved = SB.config.minutesSaved + (sponsorTimes[index][1] - sponsorTimes[index][0]) / 60;
+            SB.config.skipCount = SB.config.skipCount + 1;
+            sponsorSkipped[index] = true;
+        }
     }
 }
 
@@ -560,13 +598,6 @@ function reskipSponsorTime(UUID) {
     }
 }
 
-function removePlayerControlsButton() {
-    if (!sponsorVideoID) return;
-
-    document.getElementById("startSponsorButton").style.display = "none";
-    document.getElementById("submitButton").style.display = "none";
-}
-
 function createButton(baseID, title, callback, imageName, isDraggable=false) {
     if (document.getElementById(baseID + "Button") != null) return;
 
@@ -594,12 +625,20 @@ function createButton(baseID, title, callback, imageName, isDraggable=false) {
 
 function getControls() {
     let controls = document.getElementsByClassName("ytp-right-controls");
-    return (!controls || controls.length === 0) ? false : controls[controls.length - 1]
+
+    if (!controls || controls.length === 0) {
+        // The invidious video element's controls element
+        controls = document.getElementsByClassName("vjs-control-bar");
+        return (!controls || controls.length === 0) ? false : controls[controls.length - 1];
+    } else {
+        return controls[controls.length - 1];
+    }
 };
 
 //adds all the player controls buttons
-function createButtons() {
-    wait(getControls).then(result => {
+async function createButtons() {
+    let result = await wait(getControls).catch();
+
     //set global controls variable
     controls = result;
 
@@ -608,22 +647,29 @@ function createButtons() {
     createButton("info", "openPopup", openInfoMenu, "PlayerInfoIconSponsorBlocker256px.png")
     createButton("delete", "clearTimes", clearSponsorTimes, "PlayerDeleteIconSponsorBlocker256px.png");
     createButton("submit", "SubmitTimes", submitSponsorTimes, "PlayerUploadIconSponsorBlocker256px.png");
-    });
 }
 //adds or removes the player controls button to what it should be
-function updateVisibilityOfPlayerControlsButton() {
+async function updateVisibilityOfPlayerControlsButton() {
     //not on a proper video yet
     if (!sponsorVideoID) return;
 
-    createButtons();
+    await createButtons();
 	
-    if (hideVideoPlayerControls) {
-        removePlayerControlsButton();
+    if (SB.config.hideVideoPlayerControls || onInvidious) {
+        document.getElementById("startSponsorButton").style.display = "none";
+        document.getElementById("submitButton").style.display = "none";
+    } else {
+        document.getElementById("startSponsorButton").style.removeProperty("display");
     }
-    if (hideInfoButtonPlayerControls) {
+
+    //don't show the info button on embeds
+    if (SB.config.hideInfoButtonPlayerControls || document.URL.includes("/embed/") || onInvidious) {
         document.getElementById("infoButton").style.display = "none";
+    } else {
+        document.getElementById("infoButton").style.removeProperty("display");
     }
-    if (hideDeleteButtonPlayerControls) {
+    
+    if (SB.config.hideDeleteButtonPlayerControls || onInvidious) {
         document.getElementById("deleteButton").style.display = "none";
     }
 }
@@ -675,7 +721,7 @@ async function changeStartSponsorButton(showStartSponsor, uploadButtonVisible) {
     await wait(isSubmitButtonLoaded);
     
     //if it isn't visible, there is no data
-    let shouldHide = (uploadButtonVisible && !hideDeleteButtonPlayerControls) ? "unset" : "none"
+    let shouldHide = (uploadButtonVisible && !(SB.config.hideDeleteButtonPlayerControls || onInvidious)) ? "unset" : "none"
     document.getElementById("deleteButton").style.display = shouldHide;
 
     if (showStartSponsor) {
@@ -683,7 +729,7 @@ async function changeStartSponsorButton(showStartSponsor, uploadButtonVisible) {
         document.getElementById("startSponsorImage").src = chrome.extension.getURL("icons/PlayerStartIconSponsorBlocker256px.png");
         document.getElementById("startSponsorButton").setAttribute("title", chrome.i18n.getMessage("sponsorStart"));
 
-        if (document.getElementById("startSponsorImage").style.display != "none" && uploadButtonVisible && !hideInfoButtonPlayerControls) {
+        if (document.getElementById("startSponsorImage").style.display != "none" && uploadButtonVisible && !SB.config.hideInfoButtonPlayerControls) {
             document.getElementById("submitButton").style.display = "unset";
         } else if (!uploadButtonVisible) {
             //disable submit button
@@ -730,12 +776,19 @@ function openInfoMenu() {
             //add the close button
             popup.prepend(closeButton);
     
-            let parentNode = document.getElementById("secondary");
+            let parentNodes = document.querySelectorAll("#secondary");
+            let parentNode = null;
+            for (let i = 0; i < parentNodes.length; i++) {
+                if (parentNodes[i].firstElementChild !== null) {
+                    parentNode = parentNodes[i];
+                }
+            }
             if (parentNode == null) {
                 //old youtube theme
                 parentNode = document.getElementById("watch7-sidebar-contents");
             }
                 
+
             //make the logo source not 404
             //query selector must be used since getElementByID doesn't work on a node and this isn't added to the document yet
             let logo = popup.querySelector("#sponsorBlockPopupLogo");
@@ -758,9 +811,11 @@ function closeInfoMenu() {
     if (popup != null) {
         popup.remove();
 
-        //show info button
+        //show info button if it's not an embed
+        if (!document.URL.includes("/embed/")) {
             document.getElementById("infoButton").style.display = "unset";
         }
+    }
 }
 
 function clearSponsorTimes() {
@@ -769,9 +824,7 @@ function clearSponsorTimes() {
 
     let currentVideoID = sponsorVideoID;
 
-    let sponsorTimeKey = 'sponsorTimes' + currentVideoID;
-    chrome.storage.sync.get([sponsorTimeKey], function(result) {
-        let sponsorTimes = result[sponsorTimeKey];
+    let sponsorTimes = SB.config.sponsorTimes.get(currentVideoID);
 
     if (sponsorTimes != undefined && sponsorTimes.length > 0) {
         let confirmMessage = chrome.i18n.getMessage("clearThis") + getSponsorTimesMessage(sponsorTimes);
@@ -779,8 +832,7 @@ function clearSponsorTimes() {
         if(!confirm(confirmMessage)) return;
 
         //clear the sponsor times
-            let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-            chrome.storage.sync.set({[sponsorTimeKey]: []});
+        SB.config.sponsorTimes.delete(currentVideoID);
 
         //clear sponsor times submitting
         sponsorTimesSubmitting = [];
@@ -790,7 +842,6 @@ function clearSponsorTimes() {
         //set buttons to be correct
         changeStartSponsorButton(true, false);
     }
-    });
 }
 
 //if skipNotice is null, it will not affect the UI
@@ -801,6 +852,25 @@ function vote(type, UUID, skipNotice) {
         skipNotice.resetNoticeInfoMessage.bind(skipNotice)();
     }
 
+    let sponsorIndex = UUIDs.indexOf(UUID);
+
+    // See if the local time saved count and skip count should be saved
+    if (type == 0 && sponsorSkipped[sponsorIndex] || type == 1 && !sponsorSkipped[sponsorIndex]) {
+        let factor = 1;
+        if (type == 0) {
+            factor = -1;
+
+            sponsorSkipped[sponsorIndex] = false;
+        }
+
+            // Count this as a skip
+            SB.config.minutesSaved = SB.config.minutesSaved + factor * (sponsorTimes[sponsorIndex][1] - sponsorTimes[sponsorIndex][0]) / 60;
+		
+            SB.config.skipCount = 0;
+
+            SB.config.skipCount = SB.config.skipCount + factor * 1;
+    }
+ 
     chrome.runtime.sendMessage({
         message: "submitVote",
         type: type,
@@ -809,8 +879,8 @@ function vote(type, UUID, skipNotice) {
         if (response != undefined) {
             //see if it was a success or failure
             if (skipNotice != null) {
-                if (response.successType == 1) {
-                    //success
+                if (response.successType == 1 || (response.successType == -1 && response.statusCode == 429)) {
+                    //success (treat rate limits as a success)
                     if (type == 0) {
                         skipNotice.afterDownvote.bind(skipNotice)();
                     }
@@ -819,14 +889,8 @@ function vote(type, UUID, skipNotice) {
                     skipNotice.addNoticeInfoMessage.bind(skipNotice)(chrome.i18n.getMessage("voteFail"))
                     skipNotice.resetVoteButtonInfo.bind(skipNotice)();
                 } else if (response.successType == -1) {
-                    if (response.statusCode == 502) {
-                        skipNotice.addNoticeInfoMessage.bind(skipNotice)(chrome.i18n.getMessage("serverDown"))
+                    skipNotice.addNoticeInfoMessage.bind(skipNotice)(getErrorMessage(response.statusCode))
                     skipNotice.resetVoteButtonInfo.bind(skipNotice)();
-                    } else {
-                        //failure: unknown error
-                        skipNotice.addNoticeInfoMessage.bind(skipNotice)(chrome.i18n.getMessage("connectionError") + response.statusCode);
-                        skipNotice.resetVoteButtonInfo.bind(skipNotice)();
-                    }
                 }
             }
         }
@@ -842,10 +906,7 @@ function closeAllSkipNotices(){
 }
 
 function dontShowNoticeAgain() {
-    chrome.storage.sync.set({"dontShowNoticeAgain": true});
-
-    dontShowNotice = true;
-
+    SB.config.dontShowNotice = true;
     closeAllSkipNotices();
 }
 
@@ -872,9 +933,7 @@ function submitSponsorTimes() {
 
     let currentVideoID = sponsorVideoID;
 
-    let sponsorTimeKey = 'sponsorTimes' + currentVideoID;
-    chrome.storage.sync.get([sponsorTimeKey], function(result) {
-        let sponsorTimes = result[sponsorTimeKey];
+    let sponsorTimes =  SB.config.sponsorTimes.get(currentVideoID);
 
     if (sponsorTimes != undefined && sponsorTimes.length > 0) {
         //check if a sponsor exceeds the duration of the video
@@ -884,15 +943,17 @@ function submitSponsorTimes() {
             }
         }
         //update sponsorTimes
-            chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
+        SB.config.sponsorTimes.set(currentVideoID, sponsorTimes);
 
-            let confirmMessage = chrome.i18n.getMessage("submitCheck") + "\n\n" + getSponsorTimesMessage(sponsorTimes);
-            confirmMessage += "\n\n" + chrome.i18n.getMessage("confirmMSG");
+        //update sponsorTimesSubmitting
+        sponsorTimesSubmitting = sponsorTimes;
+
+        let confirmMessage = chrome.i18n.getMessage("submitCheck") + "\n\n" + getSponsorTimesMessage(sponsorTimes)
+                                + "\n\n" + chrome.i18n.getMessage("confirmMSG")  + "\n\n" + chrome.i18n.getMessage("guildlinesSummary");
         if(!confirm(confirmMessage)) return;
 
         sendSubmitMessage();
     }
-    });
 
 }
 
@@ -927,21 +988,25 @@ function sendSubmitMessage(){
                 submitButton.addEventListener("animationend", animationEndListener);
 
                 //clear the sponsor times
-                let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-                chrome.storage.sync.set({[sponsorTimeKey]: []});
+                SB.config.sponsorTimes.delete(currentVideoID);
 
-                //request the sponsors from the server again
-                sponsorsLookup(currentVideoID);
+                //add submissions to current sponsors list
+                sponsorTimes = sponsorTimes.concat(sponsorTimesSubmitting);
+                for (let i = 0; i < sponsorTimesSubmitting.length; i++) {
+                    // Add some random IDs
+                    UUIDs.push(generateUserID());
+                }
+
+                // Empty the submitting times
+                sponsorTimesSubmitting = [];
+
+                updatePreviewBar();
             } else {
                 //show that the upload failed
                 document.getElementById("submitButton").style.animation = "unset";
                 document.getElementById("submitImage").src = chrome.extension.getURL("icons/PlayerUploadFailedIconSponsorBlocker256px.png");
 
-                if([400,429,409,502].includes(response.statusCode)) {
-                    alert(chrome.i18n.getMessage(response.statusCode));
-                } else {
-                    alert(chrome.i18n.getMessage("connectionError") + response.statusCode);
-                }
+                alert(getErrorMessage(response.statusCode));
             }
         }
     });

crowdin.yml

@@ -0,0 +1,9 @@
+files:
+  - source: /_locales/en/*
+    translation: /_locales/%two_letters_code%/%original_file_name%
+    languages_mapping:
+        two_letters_code:
+           pr-BR: "pt_BR"
+           pr-PT: "pt_PT"
+           zh-CN: "zh_CH"
+           zh-TW: "zh_TW"

firefox_manifest-extra.json

@@ -1,8 +1,7 @@
 {
   "browser_specific_settings": {
     "gecko": {
-      "id": "sponsorBlocker@ajay.app",
-      "strict_min_version": "57.0"
+      "id": "sponsorBlocker@ajay.app"
     }
   }
 }

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.
@@ -27,6 +27,12 @@
 	  Come contribute, make some suggestions and help out in the Discord: <a href="https://discord.gg/QnmVMpU">https://discord.gg/QnmVMpU</a>
     </p>
 
+    <a class="bigText" href="/options/options.html">Enable Invidious Support</a>
+
+    <p>
+      Invidious is a third-party YouTube viewer. SponsorBlock now supports invidious along with YouTube. Please visit the options page to make sure everything is how you want it to be.
+    </p>
+
     <h1>How skipping works</h1>
 
     <p class="projectPreview">
@@ -39,7 +45,7 @@
       <br/>
       <br/>
 
-      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.
+      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>

help/styles.css

@@ -1,4 +1,8 @@
-:not(.hljs-keyword):not(.hljs-comment):not(.hljs-number):not(.hljs-string):not(pre):not(code) {
+.bigText {
+  font-size: 50px;
+}
+
+body {
   background-color: #333333;
 }
 
@@ -83,6 +87,12 @@
   vertical-align: middle;
 }
 
+.profilepiccircle {
+  vertical-align: middle;
+  overflow: hidden;
+  border-radius: 50%;
+}
+
 a {
   text-decoration: underline;
   color: inherit;
@@ -116,7 +126,7 @@ a {
   text-decoration: none;
 }
 
-p,li {
+p,li,a {
   font-family: sans-serif;
   font-size: 20;
   color: #c4c4c4;

manifest.json

@@ -1,11 +1,12 @@
 {
   "name": "__MSG_fullName__",
   "short_name": "__MSG_Name__",
-  "version": "1.1.7",
+  "version": "1.2.4",
   "default_locale": "en",
   "description": "__MSG_Description__",
   "content_scripts": [
     {
+      "run_at": "document_start",
       "matches": [
         "https://*.youtube.com/*",
         "https://www.youtube-nocookie.com/embed/*"
@@ -13,6 +14,7 @@
       "all_frames": true,
       "js": [
         "config.js",
+		    "SB.js",
         "utils/previewBar.js",
         "utils/skipNotice.js",
         "utils.js",
@@ -46,14 +48,19 @@
     "notifications",
     "https://sponsor.ajay.app/*"
   ],
+  "optional_permissions": [
+      "*://*/*",
+      "declarativeContent"
+  ],
   "browser_action": {
     "default_title": "__MSG_Name__",
     "default_popup": "popup.html"
   }, 
   "background": {
     "scripts":[
-      "utils.js",
       "config.js",
+      "SB.js",
+      "utils.js",
       "background.js"
     ],
     "persistent": false
@@ -65,5 +72,9 @@
     "128": "icons/LogoSponsorBlocker128px.png",
     "256": "icons/LogoSponsorBlocker256px.png"
   },
+  "options_ui": {
+    "page": "options/options.html",
+    "open_in_tab": true
+  },
   "manifest_version": 2
 }

options/options.css

@@ -0,0 +1,327 @@
+/* Options page CSS */
+body {
+    font-family: Sans-Serif;
+}
+
+.center {
+    text-align: center;
+}
+
+.inline {
+    display: inline-block;
+}
+
+.bold {
+    font-weight: bold;
+}
+
+.hidden {
+    display: none !important;
+}
+
+.keybind-status {
+    display: inline;
+}
+
+.small-description {
+    color: white;
+    font-size: 13;
+}
+
+.medium-description {
+    color: white;
+    font-size: 15;
+}
+
+.option-text-box {
+    width: 300px;
+}
+
+.option-button {
+    cursor: pointer;
+
+    background-color: #c00000;
+    padding: 10px;
+    color: white;
+    border-radius: 5px;
+    font-size: 14px;
+
+    width: max-content;
+}
+
+.option-button:hover {
+    background-color: #fc0303;
+}
+
+.option-button.disabled {
+    cursor: default;
+
+    background-color: #520000;
+    color: grey;
+}
+
+#options {
+    max-width: 60%;
+    text-align: left;
+    display: inline-block;
+}
+
+.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;
+}
+
+.animated * {
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 16px;
+    width: 16px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+}
+
+.animated .slider:before {
+    -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;
+
+    display: inline-block;
+}
+
+#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,260 @@
+<head>
+  <title>Options - SponsorBlock</title>
+
+  <link href="options.css" rel="stylesheet"/>
+
+  <script src="../utils.js"></script>
+  <script src="../SB.js"></script>
+  <script src="options.js"></script>
+</head>
+
+<body class="sponsorBlockPageBody">
+
+	<div id="title">
+		<img src="../icons/LogoSponsorBlocker256px.png" height="80" class="profilepic"/>
+		SponsorBlock
+	</div>
+
+	<div class="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" class="hidden">
+
+			<div id="support-invidious" option-type="toggle" sync-option="supportInvidious">
+				<label class="switch-container" label-name="__MSG_supportInvidious__">
+					<label class="switch">
+						<input type="checkbox">
+						<span class="slider round"></span>
+					</label>
+				</label>
+	
+				<br/>
+				<br/>
+	
+				<div class="small-description">__MSG_supportInvidiousDescription__</div>
+			</div>
+
+			<br/>
+			<br/>
+	
+			<div option-type="text-change" sync-option="invidiousInstances">
+				<div class="option-button trigger-button">
+					__MSG_addInvidiousInstance__
+				</div>
+	
+				<br/>
+	
+				<div class="small-description">__MSG_addInvidiousInstanceDescription__</div>
+	
+				<div class="option-hidden-section hidden">
+					<br/>
+	
+					<input class="option-text-box" type="text">
+	
+					<br/>
+					<br/>
+	
+					<div class="option-button text-change-set inline">
+						__MSG_add__
+					</div>
+
+					<div class="option-button invidious-instance-reset inline">
+						__MSG_resetInvidiousInstance__
+					</div>
+					
+					<br/>
+					<br/>
+
+					<span class="small-description">__MSG_currentInstances__</span>
+					<span class="small-description" option-type="display" sync-option="invidiousInstances"></span>
+				</div>
+			</div>
+
+			<br/>
+			<br/>
+	
+			<div option-type="toggle" toggle-type="reverse" sync-option="disableAutoSkip">
+				<label class="switch-container" label-name="__MSG_autoSkip__">
+					<label class="switch">
+						<input type="checkbox" checked>
+						<span class="slider round"></span>
+					</label>
+				</label>
+	
+				<br/>
+				<br/>
+	
+				<div class="small-description">__MSG_autoSkipDescription__</div>
+			</div>
+
+			<br/>
+			<br/>
+	
+			<div option-type="keybind-change" sync-option="startSponsorKeybind">
+				<div class="option-button trigger-button">
+					__MSG_setStartSponsorShortcut__
+				</div>
+	
+				<div class="option-hidden-section hidden">
+					<br/>
+	
+					<div class="medium-description keybind-status">
+						__MSG_keybindDescription__
+					</div>
+
+					<span class="medium-description bold keybind-status-key">
+						
+					</span>
+				</div>
+			</div>
+
+			<br/>
+			<br/>
+	
+			<div option-type="keybind-change" sync-option="submitKeybind">
+				<div class="option-button trigger-button">
+						__MSG_setSubmitKeybind__
+				</div>
+	
+				<div class="option-hidden-section hidden">
+					<br/>
+	
+					<div class="medium-description keybind-status">
+						__MSG_keybindDescription__
+					</div>
+
+					<span class="medium-description bold keybind-status-key">
+						
+					</span>
+				</div>
+			</div>
+	
+			<br/>
+			<br/>
+	
+			<div option-type="toggle" toggle-type="reverse" sync-option="hideVideoPlayerControls">
+				<label class="switch-container" label-name="__MSG_showButtons__">
+					<label class="switch">
+						<input type="checkbox" checked>
+						<span class="slider round"></span>
+					</label>
+				</label>
+	
+				<br/>
+				<br/>
+	
+				<div class="small-description">__MSG_hideButtonsDescription__</div>
+			</div>
+	
+			<br/>
+			<br/>
+	
+			<div option-type="toggle" toggle-type="reverse" sync-option="hideInfoButtonPlayerControls">
+				<label class="switch-container" label-name="__MSG_showInfoButton__">
+					<label class="switch">
+						<input type="checkbox" checked>
+						<span class="slider round"></span>
+					</label>
+				</label>
+	
+				<br/>
+				<br/>
+	
+				<div class="small-description">__MSG_whatInfoButton__</div>
+			</div>
+	
+			<br/>
+			<br/>
+	
+			<div option-type="toggle" toggle-type="reverse" sync-option="hideDeleteButtonPlayerControls">
+				<label class="switch-container" label-name="__MSG_showDeleteButton__">
+					<label class="switch">
+						<input type="checkbox" checked>
+						<span class="slider round"></span>
+					</label>
+				</label>
+	
+				<br/>
+				<br/>
+	
+				<div class="small-description">__MSG_whatDeleteButton__</div>
+			</div>
+
+			<br/>
+			<br/>
+	
+			<div option-type="toggle" sync-option="autoUpvote">
+				<label class="switch-container" label-name="__MSG_enableAutoUpvote__">
+					<label class="switch">
+						<input type="checkbox" checked>
+						<span class="slider round"></span>
+					</label>
+				</label>
+	
+				<br/>
+				<br/>
+	
+				<div class="small-description">__MSG_whatAutoUpvote__</div>
+			</div>
+	
+			<br/>
+			<br/>
+	
+			<div option-type="toggle" sync-option="trackViewCount">
+				<label class="switch-container" label-name="__MSG_enableViewTracking__">
+					<label class="switch">
+						<input type="checkbox" checked>
+						<span class="slider round"></span>
+					</label>
+				</label>
+	
+				<br/>
+				<br/>
+	
+				<div class="small-description">__MSG_whatViewTracking__</div>
+			</div>
+	
+			<br/>
+			<br/>
+	
+			<div option-type="text-change" sync-option="userID" confirm-message="userIDChangeWarning">
+				<div class="option-button trigger-button">
+					__MSG_changeUserID__
+				</div>
+	
+				<br/>
+	
+				<div class="small-description">__MSG_whatChangeUserID__</div>
+	
+				<div class="option-hidden-section hidden">
+					<br/>
+	
+					<input class="option-text-box" type="text">
+	
+					<br/>
+					<br/>
+	
+					<div class="option-button text-change-set">
+						__MSG_setUserID__
+					</div>
+				</div>
+			</div>
+	
+			<br/>
+			<br/>
+	
+			<div option-type="toggle" toggle-type="reverse" sync-option="dontShowNotice">
+				<label class="switch-container" label-name="__MSG_showSkipNotice__">
+					<label class="switch">
+						<input type="checkbox" checked>
+						<span class="slider round"></span>
+					</label>
+				</label>
+			</div>
+			
+		</div>
+	</div>
+
+</body>

options/options.js

@@ -0,0 +1,285 @@
+window.addEventListener('DOMContentLoaded', init);
+
+async function init() {
+    localizeHtmlPage();
+
+    if (!SB.configListeners.includes(optionsConfigUpdateListener)) {
+        SB.configListeners.push(optionsConfigUpdateListener);
+    }
+
+    await wait(() => SB.config !== undefined);
+
+    // Set all of the toggle options to the correct option
+    let optionsContainer = document.getElementById("options");
+    let optionsElements = optionsContainer.querySelectorAll("*");
+
+    for (let i = 0; i < optionsElements.length; i++) {
+        switch (optionsElements[i].getAttribute("option-type")) {
+            case "toggle": 
+                let option = optionsElements[i].getAttribute("sync-option");
+                let optionResult = SB.config[option];
+
+                let checkbox = optionsElements[i].querySelector("input");
+                let reverse = optionsElements[i].getAttribute("toggle-type") === "reverse";
+
+                if (optionResult != undefined) {
+                    checkbox.checked = optionResult;
+
+                    if (reverse) {
+                        optionsElements[i].querySelector("input").checked = !optionResult;
+                    }
+                }
+
+                // See if anything extra should be run first time
+                switch (option) {
+                    case "supportInvidious":
+                        invidiousInit(checkbox, option);
+                        break;
+                }
+
+                // Add click listener
+                checkbox.addEventListener("click", () => {
+                    SB.config[option] = reverse ? !checkbox.checked : checkbox.checked;
+
+                    // See if anything extra must be run
+                    switch (option) {
+                        case "supportInvidious":
+                            invidiousOnClick(checkbox, option);
+                            break;
+                    }
+                });
+                break;
+            case "text-change":
+                let button = optionsElements[i].querySelector(".trigger-button");
+                button.addEventListener("click", () => activateTextChange(optionsElements[i]));
+
+                let textChangeOption = optionsElements[i].getAttribute("sync-option");
+                // See if anything extra must be done
+                switch (textChangeOption) {
+                    case "invidiousInstances":
+                        invidiousInstanceAddInit(optionsElements[i], textChangeOption);
+                }
+
+                break;
+            case "keybind-change":
+                let keybindButton = optionsElements[i].querySelector(".trigger-button");
+                keybindButton.addEventListener("click", () => activateKeybindChange(optionsElements[i]));
+
+                break;
+            case "display":
+                updateDisplayElement(optionsElements[i])
+        }
+    }
+
+    optionsContainer.classList.remove("hidden");
+    optionsContainer.classList.add("animated");
+}
+
+/**
+ * Called when the config is updated
+ * 
+ * @param {String} element 
+ */
+function optionsConfigUpdateListener(changes) {
+    let optionsContainer = document.getElementById("options");
+    let optionsElements = optionsContainer.querySelectorAll("*");
+
+    for (let i = 0; i < optionsElements.length; i++) {
+        switch (optionsElements[i].getAttribute("option-type")) {
+            case "display":
+                updateDisplayElement(optionsElements[i])
+        }
+    }
+}
+
+/**
+ * Will set display elements to the proper text
+ * 
+ * @param {HTMLElement} element 
+ */
+function updateDisplayElement(element) {
+    let displayOption = element.getAttribute("sync-option")
+    let displayText = SB.config[displayOption];
+    element.innerText = displayText;
+
+    // See if anything extra must be run
+    switch (displayOption) {
+        case "invidiousInstances":
+            element.innerText = displayText.join(', ');
+            break;
+    }
+}
+
+/**
+ * Initializes the option to add Invidious instances
+ * 
+ * @param {HTMLElement} element 
+ * @param {String} option 
+ */
+function invidiousInstanceAddInit(element, option) {
+    let textBox = element.querySelector(".option-text-box");
+    let button = element.querySelector(".trigger-button");
+
+    let setButton = element.querySelector(".text-change-set");
+    setButton.addEventListener("click", async function(e) {
+        if (textBox.value == "" || textBox.value.includes("/") || textBox.value.includes("http") || textBox.value.includes(":")) {
+            alert(chrome.i18n.getMessage("addInvidiousInstanceError"));
+        } else {
+            // Add this
+            let instanceList = SB.config[option];
+            if (!instanceList) instanceList = [];
+
+            instanceList.push(textBox.value);
+
+            SB.config[option] = instanceList;
+
+            let checkbox = document.querySelector("#support-invidious input");
+            checkbox.checked = true;
+
+            invidiousOnClick(checkbox, "supportInvidious");
+
+            textBox.value = "";
+
+            // Hide this section again
+            element.querySelector(".option-hidden-section").classList.add("hidden");
+            button.classList.remove("disabled");
+        }
+    });
+
+    let resetButton = element.querySelector(".invidious-instance-reset");
+    resetButton.addEventListener("click", function(e) {
+        if (confirm(chrome.i18n.getMessage("resetInvidiousInstanceAlert"))) {
+            // Set to a clone of the default
+            SB.config[option] = SB.defaults[option].slice(0);
+        }
+    });
+}
+
+/**
+ * Run when the invidious button is being initialized
+ * 
+ * @param {HTMLElement} checkbox 
+ * @param {string} option 
+ */
+function invidiousInit(checkbox, option) {
+    let permissions = ["declarativeContent"];
+    if (isFirefox()) permissions = [];
+
+    chrome.permissions.contains({
+        origins: getInvidiousInstancesRegex(),
+        permissions: permissions
+    }, function (result) {
+        if (result != checkbox.checked) {
+            SB.config[option] = result;
+
+            checkbox.checked = result;
+        }
+    });
+}
+
+/**
+ * Run whenever the invidious checkbox is clicked
+ * 
+ * @param {HTMLElement} checkbox 
+ * @param {string} option 
+ */
+function invidiousOnClick(checkbox, option) {
+    if (checkbox.checked) {
+        setupExtraSitePermissions(function (granted) {
+            if (!granted) {
+                SB.config[option] = false;
+                checkbox.checked = false;
+            }
+        });
+    } else {
+        removeExtraSiteRegistration();
+    }
+}
+
+/**
+ * Will trigger the container to ask the user for a keybind.
+ * 
+ * @param {HTMLElement} element 
+ */
+function activateKeybindChange(element) {
+    let button = element.querySelector(".trigger-button");
+    if (button.classList.contains("disabled")) return;
+
+    button.classList.add("disabled");
+
+    let option = element.getAttribute("sync-option");
+
+    let currentlySet = SB.config[option] !== null ? chrome.i18n.getMessage("keybindCurrentlySet") : "";
+    
+    let status = element.querySelector(".option-hidden-section > .keybind-status");
+    status.innerText = chrome.i18n.getMessage("keybindDescription") + currentlySet;
+
+    if (SB.config[option] !== null) {
+        let statusKey = element.querySelector(".option-hidden-section > .keybind-status-key");
+        statusKey.innerText = SB.config[option];
+    }
+
+    element.querySelector(".option-hidden-section").classList.remove("hidden");
+    
+    document.addEventListener("keydown", (e) => keybindKeyPressed(element, e), {once: true});
+}
+
+/**
+ * Called when a key is pressed in an activiated keybind change option.
+ * 
+ * @param {HTMLElement} element 
+ * @param {KeyboardEvent} e
+ */
+function keybindKeyPressed(element, e) {
+    e = e || window.event;
+    var key = e.key;
+
+    let option = element.getAttribute("sync-option");
+
+    SB.config[option] = key;
+
+    let status = element.querySelector(".option-hidden-section > .keybind-status");
+    status.innerText = chrome.i18n.getMessage("keybindDescriptionComplete");
+
+    let statusKey = element.querySelector(".option-hidden-section > .keybind-status-key");
+    statusKey.innerText = key;
+
+    let button = element.querySelector(".trigger-button");
+
+    button.classList.remove("disabled");
+}
+
+/**
+ * Will trigger the textbox to appear to be able to change an option's text.
+ * 
+ * @param {HTMLElement} element 
+ */
+function activateTextChange(element) {
+    let button = element.querySelector(".trigger-button");
+    if (button.classList.contains("disabled")) return;
+
+    button.classList.add("disabled");
+
+    let textBox = element.querySelector(".option-text-box");
+    let option = element.getAttribute("sync-option");
+
+    // See if anything extra must be done
+    switch (option) {
+        case "invidiousInstances":
+            element.querySelector(".option-hidden-section").classList.remove("hidden");
+            return;
+    }
+	
+    textBox.value = SB.config[option];
+    
+    let setButton = element.querySelector(".text-change-set");
+    setButton.addEventListener("click", () => {
+        let confirmMessage = element.getAttribute("confirm-message");
+
+        if (confirmMessage === null || confirm(chrome.i18n.getMessage(confirmMessage))) {
+            SB.config[option] = textBox.value;
+        }
+    });
+
+    element.querySelector(".option-hidden-section").classList.remove("hidden");
+}

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "sponsorblock",
+  "version": "1.0.0",
+  "description": "",
+  "main": "background.js",
+  "dependencies": {},
+  "devDependencies": {
+    "web-ext": "^4.0.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "web-ext run --start-url https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm",
+    "build": "web-ext build --overwrite-dest -i \"*(package-lock.json|README.md|package.json|config.js.example|firefox_manifest-extra.json|manifest.json.original|ignored|crowdin.yml)\""
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ajayyy/SponsorBlock.git"
+  },
+  "author": "Ajay Ramachandran",
+  "license": "GPL-3.0-only",
+  "private": true
+}

popup.css

@@ -35,6 +35,10 @@ sub.popupElement {
 }
 /* end reset */
 
+#sponsorBlockPopupLogo {
+	vertical-align: text-bottom;
+}
+
 .popupElement {
     font-family: 'Source Sans Pro', sans-serif;
 
@@ -43,12 +47,13 @@ sub.popupElement {
 
 h1.popupElement {
 	margin-top: 0px;
+	margin-bottom: 10px;
 }
 
 .popupBody {
 	font-size: 14px;
 	background-color: #ffd9d9;
-	padding: 5px;
+	padding: 0px 5px;
 }
 
 .discreteLink.popupElement {

popup.html

@@ -1,19 +1,21 @@
 <html>
   <head>
-    <title>SponsorBlock Popup</title>
+    <title>__MSG_openPopup__</title>
+    <script src="SB.js"></script>
     <link id="sponorBlockPopupFont" rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css"/>
     <link id="sponorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css"/>
   </head>
 
   <body class="popupBody">
     <center>
-      <div id="app" class="popupBody">
-          <img src="icons/LogoSponsorBlocker256px.png" height="64px" id="sponsorBlockPopupLogo"/>
-
-          <h1 class="popupElement">SponsorBlock</h1>
+      <div id="app" class="popupBody sponsorBlockPageBody">
+          <h1 class="popupElement">
+            <img src="icons/IconSponsorBlocker256px.png" height="32px" id="sponsorBlockPopupLogo"/>
+            __MSG_Name__
+          </h1>
 
           <!-- Loading text -->
-          <p id="loadingIndicator" class="popupElement">Loading...</p>
+          <p id="loadingIndicator" class="popupElement">__MSG_noVideoID__</p>
           
           <!-- Hidden until loading complete -->
           <div id="mainControls" class="main popupElement" style="display: none">
@@ -26,72 +28,18 @@
   
             </div>
 
-            <br/>
-
-            <div>
-              <button id="whitelistChannel" class="whitelistButton popupElement">Whitelist Channel</button>
-              <button id="unwhitelistChannel" class="whitelistButton popupElement" style="display: none">Remove Channel From Whitelist</button>
-            </div>
-            <sub class="popupElement">
-              Whitelist the channels who do sponsorships ethically to encourage good behavior, or maybe if they are just entertaining and funny. Or don't, that's your call.
-            </sub>
-
-            <br/>
-            <br/>
-
-            <button id="reportAnIssue" class="dangerButton popupElement">Vote On A Sponsor Time</button>
-
-            <div id="issueReporterContainer"  class="popupElement" style="display: none">
-
-              <h3 style="margin-top: 0px" class="popupElement">Vote On A Sponsor Time</h3>
-
-              <div id="issueReporterTimeButtons" class="popupElement">
-
-              </div>
-
-            </div>
-
-            <h2 class="recordingSubtitle popupElement">Record the times of a sponsorship</h2>
-
             <p class="popupElement"> 
-              <span id=sponsorTimesContributionsContainer  class="popupElement" style="display: none">
-                  So far, you've submitted
-                  <span id="sponsorTimesContributionsDisplay" class="popupElement">
-                    0
-                  </span>
-                  <span id="sponsorTimesContributionsDisplayEndWord" class="popupElement">
-                    sponsors.
-                  </span>
-              </span>
-
-              <span id=sponsorTimesViewsContainer  class="popupElement" style="display: none">
-                  You have saved people from 
-                  <span id="sponsorTimesViewsDisplay" class="popupElement">
-                    0
-                  </span>
-                  <span id="sponsorTimesViewsDisplayEndWord" class="popupElement">
-                    sponsor segments.
-                  </span>
-              </span>
-
-              <div class="popupElement">
-                View the leaderboard <a class="popupElement discreteLink" href="https://sponsor.ajay.app/stats" target="_blank">here</a>.
-              </div>
-            </p>
-
-            <p class="popupElement"> 
-              Click the button below when the sponsorship starts and ends to record and 
-              submit it to the database.
+              __MSG_recordTimesDescription__
             </p>
   
             <div>
-              <button id="sponsorStart" class="greenButton popupElement">Sponsorship Starts Now</button>
+              <button id="sponsorStart" class="greenButton popupElement">__MSG_sponsorStart__</button>
             </div>
   
-            <sub class="popupElement">Hint: Press the semicolon key while focused on a video report the start/end of a sponsor and quote to submit.</sub>
+            <sub class="popupElement">__MSG_popupHint__</sub>
 
             <div id="submissionSection"  class="popupElement" style="display: none">
-              <h3 class="popupElement">Latest Sponsor Message Times Chosen</h3>
+              <h3 class="popupElement">__MSG_lastTimes__</h3>
               <b>
                 <div id="sponsorMessageTimes" class="popupElement">
         
@@ -100,13 +48,14 @@
 
               <br/>
       
-              <button id="clearTimes" class="smallButton popupElement">Clear Times</button>
-      
-              <br/>
-              <br/>
+              <button id="clearTimes" class="smallButton popupElement">__MSG_clearTimesButton__</button>
       
               <div id="submitTimesContainer" class="popupElement" style="display: none">
-                <button id="submitTimes" class="smallButton popupElement">Submit Times</button>
+
+                <br/>
+                <br/>
+
+                <button id="submitTimes" class="smallButton popupElement">__MSG_submitTimesButton__</button>
 
                 <div id="submitTimesInfoMessageContainer" class="popupElement" style="display: none">
                   <h3 id="submitTimesInfoMessage" class="popupElement">
@@ -118,35 +67,6 @@
 
             </div>
 
-            <div id="setUsernameContainer" class="popupElement">
-              <br/>
-              <br/>
-    
-              <button id="setUsernameButton" class="warningButton popupElement">Set Username</button>
-              <br/>
-              <sub class="popupElement">
-                This is used on the public stats page to show off how much you've contributed. See it <a class="popupElement discreteLink" href="https://sponsor.ajay.app/stats" target="_blank">here</a>.
-              </sub>
-            </div>
-
-            <div id="setUsername" class="popupElement" style="display: none">
-                <br/>
-
-                <h3>Set Username</h3>
-
-                <div id="setUsernameStatusContainer" style="display: none">
-                    <h2 id="setUsernameStatus"></h2>
-                </div>
-
-
-                <input id="usernameInput" hint="Username"></input>
-
-                <br/>
-                <br/>
-
-                <button id="submitUsername" class="warningButton popupElement">Submit Username</button>
-            </div>
-
             <div id="discordButtonContainer" class="popupElement" style="display: none">
               <br/>
 
@@ -154,74 +74,137 @@
 
               <br/>
 
-                Come join the official discord server to give suggestions and feedback!
+                __MSG_discordAdvert__
 
               <br/>
 
-              <span id="hideDiscordButton" class="smallLink popupElement">Hide this</span>
+              <span id="hideDiscordButton" class="smallLink popupElement">__MSG_hideThis__</span>
+            </div>
+
+            <div>
+              <br/>
+
+              <button id="whitelistChannel" class="whitelistButton popupElement">__MSG_whitelistChannel__</button>
+              <button id="unwhitelistChannel" class="whitelistButton popupElement" style="display: none">__MSG_removeFromWhitelist__</button>
+            </div>
+
+            <br/>
+
+            <button id="reportAnIssue" class="dangerButton popupElement">__MSG_voteOnTime__</button>
+
+            <div id="issueReporterContainer"  class="popupElement" style="display: none">
+
+              <h3 style="margin-top: 0px" class="popupElement">__MSG_voteOnTime__</h3>
+
+              <div id="issueReporterTimeButtons" class="popupElement">
+
+              </div>
+
+            </div>
+
+            <br/>
+            <br/>
+
+          </div>
+
+          <div>
+            <button id="disableSkipping" class="greenButton popupElement">__MSG_disableSkipping__</button>
+            <button id="enableSkipping" class="whitelistButton popupElement" style="display: none">__MSG_enableSkipping__</button>
+          </div>
+
+          <h2 class="recordingSubtitle popupElement">__MSG_yourWork__</h2>
+
+          <p class="popupElement">
+            <span id="sponsorTimesContributionsContainer"  class="popupElement" style="display: none">
+                __MSG_soFarUHSubmited__
+                <span id="sponsorTimesContributionsDisplay" class="popupElement">
+                  0
+                </span>
+                <span id="sponsorTimesContributionsDisplayEndWord" class="popupElement">__MSG_Sponsors__</span>.
+            </span>
+
+            <span id="sponsorTimesViewsContainer"  class="popupElement" style="display: none">
+                __MSG_savedPeopleFrom__
+                <span id="sponsorTimesViewsDisplay" class="popupElement">
+                  0
+                </span>
+                <span id="sponsorTimesViewsDisplayEndWord" class="popupElement">__MSG_Segments__</span>.
+            </span>
+
+            <span id="sponsorTimesOthersTimeSavedContainer"  class="popupElement" style="display: none">
+              __MSG_youHaveSavedTime__
+              <span id="sponsorTimesOthersTimeSavedDisplay" class="popupElement">
+                0
+              </span>
+              <span id="sponsorTimesOthersTimeSavedEndWord" class="popupElement">__MSG_minsLower__</span>
+
+              <span class="popupElement">__MSG_youHaveSavedTimeEnd__</span>
+            </span>
+
+            <div id="sponsorTimesSkipsDoneContainer"  class="popupElement" style="display: none">
+              __MSG_youHaveSkipped__
+              <span id="sponsorTimesSkipsDoneDisplay" class="popupElement">
+                0
+              </span>
+              <span id="sponsorTimesSkipsDoneEndWord" class="popupElement">__MSG_Segments__</span> since December 5th.
+            </div>
+
+            <div id="sponsorTimeSavedContainer"  class="popupElement" style="display: none">
+              __MSG_youHaveSaved__
+              <span id="sponsorTimeSavedDisplay" class="popupElement">
+                0
+              </span>
+              <span id="sponsorTimeSavedEndWord" class="popupElement">__MSG_minsLower__</span> since December 5th.
+
+              </br/>
+              </br/>
+            </div>
+
+            <div class="popupElement">
+              __MSG_viewLeaderboard__ <a class="popupElement discreteLink" href="https://sponsor.ajay.app/stats" target="_blank">__MSG_here__</a>.
+            </div>
+          </p>
+
+          <div id="setUsernameContainer" class="popupElement">
+  
+            <button id="setUsernameButton" class="warningButton popupElement">__MSG_setUsername__</button>
+            <br/>
+            <sub class="popupElement">
+              __MSG_publicStats__ <a class="popupElement discreteLink" href="https://sponsor.ajay.app/stats" target="_blank">__MSG_here__</a>.
+            </sub>
+          </div>
+
+          <div id="setUsername" class="popupElement" style="display: none">
+              <h3>__MSG_setUsername__</h3>
+
+              <div id="setUsernameStatusContainer" style="display: none">
+                  <h2 id="setUsernameStatus"></h2>
+              </div>
+
+              <input id="usernameInput" hint="Username"></input>
+
+              <br/>
+              <br/>
+
+              <button id="submitUsername" class="warningButton popupElement">__MSG_setUsername__</button>
           </div>
 
           <div id="optionsButtonContainer" class="popupElement">
               <br/>
               <br/>
     
-                <button id="optionsButton" class="dangerButton popupElement">Options</button>
+              <button id="optionsButton" class="dangerButton popupElement">__MSG_Options__</button>
+
+              <br/>
+              
+              <sub class="popupElement">
+                __MSG_optionsInfo__
+              </sub>
+
+              <br/>
           </div>
 
-            <div id="options" class="popupElement" style="display: none">
-                <br/>
-
-                <h3>Options</h3>
-      
-                <button id="hideVideoPlayerControls" class="warningButton popupElement">Hide Buttons On YouTube Player</button>
-                <button id="showVideoPlayerControls" style="display: none" class="warningButton popupElement">Show Buttons On YouTube Player</button>
-                <br/>
-                <sub class="popupElement">
-                  This hides the buttons that appear on the YouTube player to submit sponsors. I can see this being annoying for some 
-                  people. Instead of using the button there, this popup can be used to submit sponsors. To hide the notice that appears, 
-                  use the button that appears on the notice saying "Don't show this again". You can always enable these settings again 
-                  later.
-                </sub>
-
-                <br/>
-                <br/>
-
-                <button id="hideInfoButtonPlayerControls" class="warningButton popupElement">Hide Info Button On YouTube Player</button>
-                <button id="showInfoButtonPlayerControls" style="display: none" class="warningButton popupElement">Show Info Button On YouTube Player</button>
-                <br/>
-                <sub class="popupElement">
-                  This is the button that opens up a popup in the YouTube page.
-                </sub>
-
-                <br/>
-                <br/>
-
-                <button id="hideDeleteButtonPlayerControls" class="warningButton popupElement">Hide Delete Button On YouTube Player</button>
-                <button id="showDeleteButtonPlayerControls" style="display: none" class="warningButton popupElement">Show Delete Button On YouTube Player</button>
-                <br/>
-                <sub class="popupElement">
-                  This is the button that allows you to clear all sponsors on the YouTube player.
-                </sub>
-
-                <br/>
-                <br/>
-
-                <button id="disableSponsorViewTracking" class="warningButton popupElement">Disable Sponsor View Tracking</button>
-                <button id="enableSponsorViewTracking" style="display: none" class="warningButton popupElement">Enable Sponsor View Tracking</button>
-                <br/>
-                <sub class="popupElement">
-                  This feature tracks which sponsors you have skipped to let users know how much their submission has helped others and
-                  used as a metric along with upvotes to ensure that spam doesn't get into the database. The extension sends a message
-                  to the server each time you skip a sponsor. Hopefully most people don't change this setting so that the view numbers
-                  are accurate. :)
-                </sub>
-      
-                <br/>
-                <br/>
-
-                <button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">Show Notice Again</button>
-            </div>
-          </div>
+          <button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">__MSG_showNotice__</button>
         </div>
     </center>
   </body>

popup.js

@@ -1,7 +1,6 @@
-
 //make this a function to allow this to run on the content page
-function runThePopup() {
-
+async function runThePopup() {
+    localizeHtmlPage();
     //is it in the popup or content script
     var inPopup = true;
     if (chrome.tabs == undefined) {
@@ -22,23 +21,20 @@ function runThePopup() {
         inPopup = false;
     }
 
-    var SB = {};
+    await wait(() => SB.config !== undefined);
 
     ["sponsorStart",
+    // Top toggles
     "whitelistChannel",
     "unwhitelistChannel",
+    "disableSkipping",
+    "enableSkipping",
+    // Options
+    "showNoticeAgain",
+    "optionsButton",
+    // More controls
     "clearTimes",
     "submitTimes",
-    "showNoticeAgain",
-    "hideVideoPlayerControls",
-    "showVideoPlayerControls",
-    "hideInfoButtonPlayerControls",
-    "showInfoButtonPlayerControls",
-    "hideDeleteButtonPlayerControls",
-    "showDeleteButtonPlayerControls",
-    "disableSponsorViewTracking",
-    "enableSponsorViewTracking",
-    "optionsButton",
     "reportAnIssue",
     // sponsorTimesContributions
     "sponsorTimesContributionsContainer",
@@ -48,6 +44,18 @@ function runThePopup() {
     "sponsorTimesViewsContainer",
     "sponsorTimesViewsDisplay",
     "sponsorTimesViewsDisplayEndWord",
+    // sponsorTimesOthersTimeSaved
+    "sponsorTimesOthersTimeSavedContainer",
+    "sponsorTimesOthersTimeSavedDisplay",
+    "sponsorTimesOthersTimeSavedEndWord",
+    // sponsorTimesSkipsDone
+    "sponsorTimesSkipsDoneContainer",
+    "sponsorTimesSkipsDoneDisplay",
+    "sponsorTimesSkipsDoneEndWord",
+    // sponsorTimeSaved
+    "sponsorTimeSavedContainer",
+    "sponsorTimeSavedDisplay",
+    "sponsorTimeSavedEndWord",
     // discordButtons
     "discordButtonContainer",
     "hideDiscordButton",
@@ -75,17 +83,11 @@ function runThePopup() {
     SB.sponsorStart.addEventListener("click", sendSponsorStartMessage);
     SB.whitelistChannel.addEventListener("click", whitelistChannel);
     SB.unwhitelistChannel.addEventListener("click", unwhitelistChannel);
+    SB.disableSkipping.addEventListener("click", () => toggleSkipping(true));
+    SB.enableSkipping.addEventListener("click", () => toggleSkipping(false));
     SB.clearTimes.addEventListener("click", clearTimes);
     SB.submitTimes.addEventListener("click", submitTimes);
     SB.showNoticeAgain.addEventListener("click", showNoticeAgain);
-    SB.hideVideoPlayerControls.addEventListener("click", hideVideoPlayerControls);
-    SB.showVideoPlayerControls.addEventListener("click", showVideoPlayerControls);
-    SB.hideInfoButtonPlayerControls.addEventListener("click", hideInfoButtonPlayerControls);
-    SB.showInfoButtonPlayerControls.addEventListener("click", showInfoButtonPlayerControls);
-    SB.hideDeleteButtonPlayerControls.addEventListener("click", hideDeleteButtonPlayerControls);
-    SB.showDeleteButtonPlayerControls.addEventListener("click", showDeleteButtonPlayerControls);
-    SB.disableSponsorViewTracking.addEventListener("click", disableSponsorViewTracking);
-    SB.enableSponsorViewTracking.addEventListener("click", enableSponsorViewTracking);
     SB.setUsernameButton.addEventListener("click", setUsernameButton);
     SB.submitUsername.addEventListener("click", submitUsername);
     SB.optionsButton.addEventListener("click", openOptions);
@@ -101,84 +103,47 @@ function runThePopup() {
     //current video ID of this tab
     let currentVideoID = null;
   
-    //is this a YouTube tab?
-    let isYouTubeTab = false;
-  
     //see if discord link can be shown
-    chrome.storage.sync.get(["hideDiscordLink"], function(result) {
-        let hideDiscordLink = result.hideDiscordLink;
+    let hideDiscordLink = SB.config.hideDiscordLink;
     if (hideDiscordLink == undefined || !hideDiscordLink) {
-            chrome.storage.sync.get(["hideDiscordLaunches"], function(result) {
-                let hideDiscordLaunches = result.hideDiscordLaunches;
-                //only if less than 5 launches
+            let hideDiscordLaunches = SB.config.hideDiscordLaunches;
+            //only if less than 10 launches
             if (hideDiscordLaunches == undefined || hideDiscordLaunches < 10) {
                 SB.discordButtonContainer.style.display = null;
         
                 if (hideDiscordLaunches == undefined) {
-                        hideDiscordButton = 1;
+                    hideDiscordLaunches = 1;
+                }
+                SB.config.hideDiscordLaunches = hideDiscordLaunches + 1;
+            }
     }
 
-                    chrome.storage.sync.set({"hideDiscordLaunches": hideDiscordButton + 1});
+    //show proper disable skipping button
+    let disableSkipping = SB.config.disableSkipping;
+    if (disableSkipping != undefined && disableSkipping) {
+        SB.disableSkipping.style.display = "none";
+        SB.enableSkipping.style.display = "unset";
     }
-            });
-        }
-    });
 
-    //if the don't show notice again letiable is true, an option to 
+    //if the don't show notice again variable is true, an option to 
     //  disable should be available
-    chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
-        let dontShowNoticeAgain = result.dontShowNoticeAgain;
-        if (dontShowNoticeAgain != undefined && dontShowNoticeAgain) {
+    let dontShowNotice = SB.config.dontShowNotice;
+    if (dontShowNotice != undefined && dontShowNotice) {
         SB.showNoticeAgain.style.display = "unset";
     }
-    });
-  
-    //show proper video player controls options
-    chrome.storage.sync.get(["hideVideoPlayerControls"], function(result) {
-        let hideVideoPlayerControls = result.hideVideoPlayerControls;
-        if (hideVideoPlayerControls != undefined && hideVideoPlayerControls) {
-            SB.hideVideoPlayerControls.style.display = "none";
-            SB.showVideoPlayerControls.style.display = "unset";
-        }
-    });
-    chrome.storage.sync.get(["hideInfoButtonPlayerControls"], function(result) {
-        let hideInfoButtonPlayerControls = result.hideInfoButtonPlayerControls;
-        if (hideInfoButtonPlayerControls != undefined && hideInfoButtonPlayerControls) {
-            SB.hideInfoButtonPlayerControls.style.display = "none";
-            SB.showInfoButtonPlayerControls.style.display = "unset";
-        }
-    });
-    chrome.storage.sync.get(["hideDeleteButtonPlayerControls"], function(result) {
-        let hideDeleteButtonPlayerControls = result.hideDeleteButtonPlayerControls;
-        if (hideDeleteButtonPlayerControls != undefined && hideDeleteButtonPlayerControls) {
-            SB.hideDeleteButtonPlayerControls.style.display = "none";
-            SB.showDeleteButtonPlayerControls.style.display = "unset";
-        }
-    });
-  
-    //show proper tracking option
-    chrome.storage.sync.get(["trackViewCount"], function(result) {
-        let trackViewCount = result.trackViewCount;
-        if (trackViewCount != undefined && !trackViewCount) {
-            SB.disableSponsorViewTracking.style.display = "none";
-            SB.enableSponsorViewTracking.style.display = "unset";
-        }
-    });
 
     //get the amount of times this user has contributed and display it to thank them
-    chrome.storage.sync.get(["sponsorTimesContributed"], function(result) {
-        if (result.sponsorTimesContributed != undefined) {
-            if (result.sponsorTimesContributed > 1) {
+    if (SB.config.sponsorTimesContributed != undefined) {
+        if (SB.config.sponsorTimesContributed > 1) {
             SB.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsors");
         } else {
             SB.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsor");
         }
-            SB.sponsorTimesContributionsDisplay.innerText = result.sponsorTimesContributed;
+        SB.sponsorTimesContributionsDisplay.innerText = SB.config.sponsorTimesContributed;
         SB.sponsorTimesContributionsContainer.style.display = "unset";
 
         //get the userID
-            chrome.storage.sync.get(["userID"], function(result) {
-                let userID = result.userID;
+            let userID = SB.config.userID;
             if (userID != undefined) {
                 //there are probably some views on these submissions then
                 //get the amount of views from the sponsors submitted
@@ -197,10 +162,49 @@ function runThePopup() {
                         }
                     }
                 });
+
+                //get this time in minutes
+                sendRequestToServer("GET", "/api/getSavedTimeForUser?userID=" + userID, function(xmlhttp) {
+                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+                        let minutesSaved = JSON.parse(xmlhttp.responseText).timeSaved;
+                        if (minutesSaved != 0) {
+                            if (minutesSaved != 1) {
+                                SB.sponsorTimesOthersTimeSavedEndWord.innerText = chrome.i18n.getMessage("minsLower");
+                            } else {
+                                SB.sponsorTimesOthersTimeSavedEndWord.innerText = chrome.i18n.getMessage("minLower");
+                            }
+
+                            SB.sponsorTimesOthersTimeSavedDisplay.innerText = getFormattedHours(minutesSaved);
+                            SB.sponsorTimesOthersTimeSavedContainer.style.display = "unset";
+                        }
                     }
                 });
             }
-    });
+    }
+
+    //get the amount of times this user has skipped a sponsor
+    if (SB.config.skipCount != undefined) {
+        if (SB.config.skipCount != 1) {
+            SB.sponsorTimesSkipsDoneEndWord.innerText = chrome.i18n.getMessage("Sponsors");
+        } else {
+            SB.sponsorTimesSkipsDoneEndWord.innerText = chrome.i18n.getMessage("Sponsor");
+        }
+
+        SB.sponsorTimesSkipsDoneDisplay.innerText = SB.config.skipCount;
+        SB.sponsorTimesSkipsDoneContainer.style.display = "unset";
+    }
+
+    //get the amount of time this user has saved.
+    if (SB.config.minutesSaved != undefined) {
+        if (SB.config.minutesSaved != 1) {
+            SB.sponsorTimeSavedEndWord.innerText = chrome.i18n.getMessage("minsLower");
+        } else {
+            SB.sponsorTimeSavedEndWord.innerText = chrome.i18n.getMessage("minLower");
+        }
+
+        SB.sponsorTimeSavedDisplay.innerText = getFormattedHours(SB.config.minutesSaved);
+        SB.sponsorTimeSavedContainer.style.display = "unset";
+    }
   
     chrome.tabs.query({
             active: true,
@@ -227,9 +231,7 @@ function runThePopup() {
         }
   
         //load video times for this video 
-        let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-        chrome.storage.sync.get([sponsorTimeKey], function(result) {
-            let sponsorTimesStorage = result[sponsorTimeKey];
+        let sponsorTimesStorage = SB.config.sponsorTimes.get(currentVideoID);
         if (sponsorTimesStorage != undefined && sponsorTimesStorage.length > 0) {
             if (sponsorTimesStorage[sponsorTimesStorage.length - 1] != undefined && sponsorTimesStorage[sponsorTimesStorage.length - 1].length < 2) {
                 startTimeChosen = true;
@@ -245,7 +247,6 @@ function runThePopup() {
 
             showSubmitTimesIfNecessary();
         }
-        });
   
         //check if this video's sponsors are known
         chrome.tabs.sendMessage(
@@ -270,7 +271,7 @@ function runThePopup() {
   
             //remove loading text
             SB.mainControls.style.display = "unset"
-            SB.loadingIndicator.innerHTML = "";
+            SB.loadingIndicator.style.display = "none";
 
             if (request.found) {
                 SB.videoFound.innerHTML = chrome.i18n.getMessage("sponsorFound");
@@ -294,7 +295,7 @@ function runThePopup() {
                         SB.whitelistChannel.style.display = "none";
                         SB.unwhitelistChannel.style.display = "unset";
 
-                        SB.downloadedSponsorMessageTimes.innerText = "Channel Whitelisted!";
+                        SB.downloadedSponsorMessageTimes.innerText = chrome.i18n.getMessage("channelWhitelisted");
                         SB.downloadedSponsorMessageTimes.style.fontWeight = "bold";
                     }
                 });
@@ -302,13 +303,6 @@ function runThePopup() {
         );
     }
   
-    function setVideoID(request) {
-        //if request is undefined, then the page currently being browsed is not YouTube
-        if (request != undefined) {
-            videoID = request.videoID;
-        }
-    }
-  
     function sendSponsorStartMessage() {
             //the content script will get the message if a YouTube page is open
             chrome.tabs.query({
@@ -332,9 +326,8 @@ function runThePopup() {
   
         sponsorTimes[sponsorTimesIndex][startTimeChosen ? 1 : 0] = response.time;
 
-        let sponsorTimeKey = "sponsorTimes" + currentVideoID;
         let localStartTimeChosen = startTimeChosen;
-        chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}, function() {
+        SB.config.sponsorTimes.set(currentVideoID, sponsorTimes);
             //send a message to the client script
             if (localStartTimeChosen) {
                 chrome.tabs.query({
@@ -347,7 +340,6 @@ function runThePopup() {
                     );
                 });
             }
-        });
   
         updateStartTimeChosen();
   
@@ -644,8 +636,8 @@ function runThePopup() {
                 tabs[0].id,
                 {message: "getCurrentTime"},
                 function (response) {
-                    let minutes = document.getElementById(idStartName + chrome.i18n.getMessage("Mins") + index);
-                    let seconds = document.getElementById(idStartName + chrome.i18n.getMessage("Secs") + index);
+                    let minutes = document.getElementById(idStartName + "Minutes" + index);
+                    let seconds = document.getElementById(idStartName + "Seconds" + index);
     
                     minutes.value = getTimeInMinutes(response.currentTime);
                     seconds.value = getTimeInFormattedSeconds(response.currentTime);
@@ -656,8 +648,8 @@ function runThePopup() {
     //id start name is whether it is the startTime or endTime
     //gives back the time in seconds
     function getSponsorTimeEditTimes(idStartName, index) {
-        let minutes = document.getElementById(idStartName + chrome.i18n.getMessage("Mins") + index);
-        let seconds = document.getElementById(idStartName + chrome.i18n.getMessage("Secs") + index);
+        let minutes = document.getElementById(idStartName + "Minutes" + index);
+        let seconds = document.getElementById(idStartName + "Seconds" + index);
 
         return parseInt(minutes.value) * 60 + parseFloat(seconds.value);
     }
@@ -667,8 +659,7 @@ function runThePopup() {
         sponsorTimes[index][1] = getSponsorTimeEditTimes("endTime", index);
   
         //save this
-        let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-        chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}, function() {
+		SB.config.sponsorTimes.set(currentVideoID, sponsorTimes);
             chrome.tabs.query({
                 active: true,
                 currentWindow: true
@@ -678,7 +669,6 @@ function runThePopup() {
                     {message: "sponsorDataChanged"}
                 );
             });
-        });
   
         if (closeEditMode) {
             displaySponsorTimes();
@@ -708,8 +698,7 @@ function runThePopup() {
         sponsorTimes.splice(index, 1);
   
         //save this
-        let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-        chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}, function() {
+		SB.config.sponsorTimes.set(currentVideoID, sponsorTimes);
             chrome.tabs.query({
                 active: true,
                 currentWindow: true
@@ -719,7 +708,6 @@ function runThePopup() {
                     {message: "sponsorDataChanged"}
                 );
             });
-        });
   
         //update display
         displaySponsorTimes();
@@ -761,8 +749,7 @@ function runThePopup() {
         //reset sponsorTimes
         sponsorTimes = [];
 
-        let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-        chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes}, function() {
+		SB.config.sponsorTimes.set(currentVideoID, sponsorTimes);
             chrome.tabs.query({
                 active: true,
                 currentWindow: true
@@ -772,7 +759,6 @@ function runThePopup() {
                     {message: "sponsorDataChanged"}
                 );
             });
-        });
   
         displaySponsorTimes();
   
@@ -799,15 +785,7 @@ function runThePopup() {
 
                         clearTimes();
                     } else {
-                        let errorMessage = "";
-                        
-                        if([400,429,409,502].includes(response.statusCode)) {
-                            errorMessage = chrome.i18n.getMessage(response.statusCode);
-                        } else {
-                            errorMessage = chrome.i18n.getMessage("connectionError") + response.statusCode;
-                        }
-
-                        document.getElementById("submitTimesInfoMessage").innerText = errorMessage;
+                        document.getElementById("submitTimesInfoMessage").innerText = getErrorMessage(response.statusCode);
                         document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
 
                         SB.submitTimesInfoMessageContainer.style.display = "unset";
@@ -818,156 +796,11 @@ function runThePopup() {
     }
   
     function showNoticeAgain() {
-        chrome.storage.sync.set({"dontShowNoticeAgain": false});
-  
-        chrome.tabs.query({
-            active: true,
-            currentWindow: true
-        }, function(tabs) {
-            chrome.tabs.sendMessage(tabs[0].id, {
-                message: "showNoticeAgain"
-            });
-        });
+        SB.config.dontShowNotice = false;
   
         SB.showNoticeAgain.style.display = "none";
     }
 
-    function hideVideoPlayerControls() {
-        chrome.storage.sync.set({"hideVideoPlayerControls": true});
-  
-        chrome.tabs.query({
-            active: true,
-            currentWindow: true
-        }, function(tabs) {
-            chrome.tabs.sendMessage(tabs[0].id, {
-                message: "changeVideoPlayerControlsVisibility",
-                value: true
-            });
-        });
-  
-        SB.hideVideoPlayerControls.style.display = "none";
-        SB.showVideoPlayerControls.style.display = "unset";
-    }
-  
-    function showVideoPlayerControls() {
-        chrome.storage.sync.set({"hideVideoPlayerControls": false});
-  
-        chrome.tabs.query({
-            active: true,
-            currentWindow: true
-        }, function(tabs) {
-            chrome.tabs.sendMessage(tabs[0].id, {
-                message: "changeVideoPlayerControlsVisibility",
-                value: false
-            });
-        });
-  
-        SB.hideVideoPlayerControls.style.display = "unset";
-        SB.showVideoPlayerControls.style.display = "none";
-    }
-  
-    function hideInfoButtonPlayerControls() {
-        chrome.storage.sync.set({"hideInfoButtonPlayerControls": true});
-  
-        chrome.tabs.query({
-            active: true,
-            currentWindow: true
-        }, function(tabs) {
-            chrome.tabs.sendMessage(tabs[0].id, {
-                message: "changeInfoButtonPlayerControlsVisibility",
-                value: true
-            });
-        });
-  
-        SB.hideInfoButtonPlayerControls.style.display = "none";
-        SB.showInfoButtonPlayerControls.style.display = "unset";
-    }
-  
-    function showInfoButtonPlayerControls() {
-        chrome.storage.sync.set({"hideInfoButtonPlayerControls": false});
-  
-        chrome.tabs.query({
-            active: true,
-            currentWindow: true
-        }, function(tabs) {
-            chrome.tabs.sendMessage(tabs[0].id, {
-                message: "changeVideoPlayerCochangeInfoButtonPlayerControlsVisibilityntrolsVisibility",
-                value: false
-            });
-        });
-  
-        SB.hideInfoButtonPlayerControls.style.display = "unset";
-        SB.showInfoButtonPlayerControls.style.display = "none";
-    }
-  
-    function hideDeleteButtonPlayerControls() {
-        chrome.storage.sync.set({"hideDeleteButtonPlayerControls": true});
-  
-        chrome.tabs.query({
-            active: true,
-            currentWindow: true
-        }, function(tabs) {
-            chrome.tabs.sendMessage(tabs[0].id, {
-                message: "changeDeleteButtonPlayerControlsVisibility",
-                value: true
-            });
-        });
-  
-        SB.hideDeleteButtonPlayerControls.style.display = "none";
-        SB.showDeleteButtonPlayerControls.style.display = "unset";
-    }
-  
-    function showDeleteButtonPlayerControls() {
-        chrome.storage.sync.set({"hideDeleteButtonPlayerControls": false});
-  
-        chrome.tabs.query({
-            active: true,
-            currentWindow: true
-        }, function(tabs) {
-            chrome.tabs.sendMessage(tabs[0].id, {
-                message: "changeVideoPlayerCochangeDeleteButtonPlayerControlsVisibilityntrolsVisibility",
-                value: false
-            });
-        });
-  
-        SB.hideDeleteButtonPlayerControls.style.display = "unset";
-        SB.showDeleteButtonPlayerControls.style.display = "none";
-    }
-  
-    function disableSponsorViewTracking() {
-        chrome.storage.sync.set({"trackViewCount": false});
-  
-        chrome.tabs.query({
-            active: true,
-            currentWindow: true
-        }, function(tabs) {
-            chrome.tabs.sendMessage(tabs[0].id, {
-                message: "trackViewCount",
-                value: false
-            });
-        });
-  
-        SB.disableSponsorViewTracking.style.display = "none";
-        SB.enableSponsorViewTracking.style.display = "unset";
-    }
-  
-    function enableSponsorViewTracking() {
-        chrome.storage.sync.set({"trackViewCount": true});
-  
-        chrome.tabs.query({
-            active: true,
-            currentWindow: true
-        }, function(tabs) {
-            chrome.tabs.sendMessage(tabs[0].id, {
-                message: "trackViewCount",
-                value: true
-            });
-        });
-  
-        SB.enableSponsorViewTracking.style.display = "none";
-        SB.disableSponsorViewTracking.style.display = "unset";
-    }
-  
     function updateStartTimeChosen() {
         //update startTimeChosen letiable
         if (!startTimeChosen) {
@@ -998,16 +831,13 @@ function runThePopup() {
   
     //make the options div visible
     function openOptions() {
-        document.getElementById("optionsButtonContainer").style.display = "none";
-        document.getElementById("options").style.display = "unset";
+        chrome.runtime.openOptionsPage();
     }
 
     //make the options username setting option visible
     function setUsernameButton() {
-        //get the userID
-        chrome.storage.sync.get(["userID"], function(result) {
             //get username from the server
-            sendRequestToServer("GET", "/api/getUsername?userID=" + result.userID, function (xmlhttp, error) {
+            sendRequestToServer("GET", "/api/getUsername?userID=" + SB.config.userID, function (xmlhttp, error) {
                 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                     SB.usernameInput.value = JSON.parse(xmlhttp.responseText).userName;
 
@@ -1024,10 +854,9 @@ function runThePopup() {
                     SB.usernameInput.style.display = "none";
 
                     SB.setUsernameStatusContainer.style.display = "unset";
-                    SB.setUsernameStatus.innerText = "Couldn't connect to server. Error code: " + xmlhttp.status;
+                    SB.setUsernameStatus.innerText = getErrorMessage(xmlhttp.status);
                 }
             });
-        });
     }
 
     //submit the new username
@@ -1037,8 +866,7 @@ function runThePopup() {
         SB.setUsernameStatus.innerText = "Loading...";
 
         //get the userID
-        chrome.storage.sync.get(["userID"], function(result) {
-            sendRequestToServer("POST", "/api/setUsername?userID=" + result.userID + "&username=" + SB.usernameInput.value, function (xmlhttp, error) {
+            sendRequestToServer("POST", "/api/setUsername?userID=" + SB.config.userID + "&username=" + SB.usernameInput.value, function (xmlhttp, error) {
                 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                     //submitted
                     SB.submitUsername.style.display = "none";
@@ -1046,17 +874,8 @@ function runThePopup() {
 
                     SB.setUsernameStatus.innerText = chrome.i18n.getMessage("success");
                 } else if (xmlhttp.readyState == 4) {
-                    let errorMessage = "";
-                        
-                    if([400, 429, 409, 502].includes(xmlhttp.status)) {
-                        errorMessage = chrome.i18n.getMessage(xmlhttp.status);
-                    } else {
-                        errorMessage = chrome.i18n.getMessage("connectionError") + xmlhttp.status;
+                    SB.setUsernameStatus.innerText = getErrorMessageI(xmlhttp.status);
                 }
-
-                    SB.setUsernameStatus.innerText = errorMessage;
-                }
-            });
             });
 
 
@@ -1101,27 +920,21 @@ function runThePopup() {
         }, function(response) {
             if (response != undefined) {
                 //see if it was a success or failure
-                if (response.successType == 1) {
-                    //success
+                if (response.successType == 1 || (response.successType == -1 && response.statusCode == 429)) {
+                    //success (treat rate limits as a success)
                     addVoteMessage(chrome.i18n.getMessage("voted"), UUID)
                 } else if (response.successType == 0) {
                     //failure: duplicate vote
                     addVoteMessage(chrome.i18n.getMessage("voteFail"), UUID)
                 } else if (response.successType == -1) {
-                    if (response.statusCode == 502) {
-                        addVoteMessage(chrome.i18n.getMessage("serverDown"), UUID)
-                    } else {
-                        //failure: unknown error
-                        addVoteMessage(chrome.i18n.getMessage("connectionError") + response.statusCode, UUID)
-                    }
+                    addVoteMessage(getErrorMessage(response.statusCode), UUID)
                 }
             }
         });
     }
   
     function hideDiscordButton() {
-        chrome.storage.sync.set({"hideDiscordLink": false});
-  
+        SB.config.hideDiscordLink = true;
         SB.discordButtonContainer.style.display = "none";
     }
   
@@ -1150,8 +963,7 @@ function runThePopup() {
                 {message: 'getChannelURL'},
                 function(response) {
                     //get whitelisted channels
-                    chrome.storage.sync.get(["whitelistedChannels"], function(result) {
-                        let whitelistedChannels = result.whitelistedChannels;
+                        let whitelistedChannels = SB.config.whitelistedChannels;
                         if (whitelistedChannels == undefined) {
                             whitelistedChannels = [];
                         }
@@ -1163,11 +975,11 @@ function runThePopup() {
                         SB.whitelistChannel.style.display = "none";
                         SB.unwhitelistChannel.style.display = "unset";
 
-                        SB.downloadedSponsorMessageTimes.innerText = "Channel Whitelisted!";
+                        SB.downloadedSponsorMessageTimes.innerText = chrome.i18n.getMessage("channelWhitelisted");
                         SB.downloadedSponsorMessageTimes.style.fontWeight = "bold";
 
                         //save this
-                        chrome.storage.sync.set({whitelistedChannels: whitelistedChannels});
+                        SB.config.whitelistedChannels = whitelistedChannels;
 
                         //send a message to the client
                         chrome.tabs.query({
@@ -1181,7 +993,6 @@ function runThePopup() {
                                 });
                             }
                         );
-                    });
                 }
             );
         });
@@ -1198,8 +1009,7 @@ function runThePopup() {
                 {message: 'getChannelURL'},
                 function(response) {
                     //get whitelisted channels
-                    chrome.storage.sync.get(["whitelistedChannels"], function(result) {
-                        let whitelistedChannels = result.whitelistedChannels;
+                        let whitelistedChannels = SB.config.whitelistedChannels;
                         if (whitelistedChannels == undefined) {
                             whitelistedChannels = [];
                         }
@@ -1216,7 +1026,7 @@ function runThePopup() {
                         SB.downloadedSponsorMessageTimes.style.fontWeight = "unset";
 
                         //save this
-                        chrome.storage.sync.set({whitelistedChannels: whitelistedChannels});
+                        SB.config.whitelistedChannels = whitelistedChannels;
 
                         //send a message to the client
                         chrome.tabs.query({
@@ -1230,12 +1040,29 @@ function runThePopup() {
                                 });
                             }
                         );
-                    });
                 }
             );
         });
     }
 
+    /**
+     * Should skipping be disabled (visuals stay)
+     */
+    function toggleSkipping(disabled) {
+		SB.config.disableSkipping = disabled;
+
+        let hiddenButton = SB.disableSkipping;
+        let shownButton = SB.enableSkipping;
+
+        if (!disabled) {
+            hiddenButton = SB.enableSkipping;
+            shownButton = SB.disableSkipping;
+        }
+
+        shownButton.style.display = "unset";
+        hiddenButton.style.display = "none";
+    }
+
     //converts time in seconds to minutes
     function getTimeInMinutes(seconds) {
         let minutes = Math.floor(seconds / 60);
@@ -1273,13 +1100,24 @@ function runThePopup() {
         xmlhttp.send();
     }
 
+    /**
+     * Converts time in hours to 5h 25.1
+     * If less than 1 hour, just returns minutes
+     * 
+     * @param {float} seconds 
+     * @returns {string}
+     */
+    function getFormattedHours(minues) {
+        let hours = Math.floor(minues / 60);
+        return (hours > 0 ? hours + "h " : "") + (minues % 60).toFixed(1);
+    }
+  
 //end of function
 }
 
 if (chrome.tabs != undefined) {
     //add the width restriction (because Firefox)
     document.getElementById("sponorBlockStyleSheet").sheet.insertRule('.popupBody { width: 325 }', 0);
-
     //this means it is actually opened in the popup
     runThePopup();
 }

utils.js

@@ -1,3 +1,6 @@
+var isBackgroundScript = false;
+var onInvidious = false;
+
 // Function that can be used to wait for a condition before returning
 async function wait(condition, timeout = 5000, check = 100) { 
     return await new Promise((resolve, reject) => {
@@ -19,6 +22,9 @@ async function wait(condition, timeout = 5000, check = 100) {
 }
 
 function getYouTubeVideoID(url) {
+    // For YouTube TV support
+    if(url.startsWith("https://www.youtube.com/tv#/")) url = url.replace("#", "");
+	
     //Attempt to parse url
     let urlObject = null;
     try { 
@@ -29,10 +35,19 @@ function getYouTubeVideoID(url) {
     }
 
     //Check if valid hostname
-    if(!["www.youtube.com","www.youtube-nocookie.com"].includes(urlObject.host)) return false; 
+    if (SB.config && SB.config.invidiousInstances.includes(urlObject.host)) {
+        onInvidious = true;
+    } else if (!["www.youtube.com", "www.youtube-nocookie.com"].includes(urlObject.host)) {
+        if (!SB.config) {
+            // Call this later, in case this is an Invidious tab
+            wait(() => SB.config !== undefined).then(() => videoIDChange(getYouTubeVideoID(url)));
+        }
+
+        return false
+    }
 
     //Get ID from searchParam
-    if ((urlObject.pathname == "/watch" || urlObject.pathname == "/watch/") && urlObject.searchParams.has("v")) {
+    if (urlObject.searchParams.has("v") && ["/watch", "/watch/"].includes(urlObject.pathname) || urlObject.pathname.startsWith("/tv/watch")) {
         id = urlObject.searchParams.get("v");
         return id.length == 11 ? id : false;
     } else if (urlObject.pathname.startsWith("/embed/")) {
@@ -43,6 +58,214 @@ function getYouTubeVideoID(url) {
             return false;
         }
     } 
-
 	return false;
 }
+
+/**
+ * Asks for the optional permissions required for all extra sites.
+ * It also starts the content script registrations.
+ * 
+ * For now, it is just SB.config.invidiousInstances.
+ * 
+ * @param {CallableFunction} callback
+ */
+function setupExtraSitePermissions(callback) {
+    // Request permission
+    let permissions = ["declarativeContent"];
+    if (isFirefox()) permissions = [];
+
+    chrome.permissions.request({
+        origins: getInvidiousInstancesRegex(),
+        permissions: permissions
+    }, async function (granted) {
+        if (granted) {
+            setupExtraSiteContentScripts();
+        } else {
+            removeExtraSiteRegistration();
+        }
+
+        callback(granted);
+    });
+}
+
+/**
+ * Registers the content scripts for the extra sites.
+ * Will use a different method depending on the browser.
+ * This is called by setupExtraSitePermissions().
+ * 
+ * For now, it is just SB.config.invidiousInstances.
+ */
+function setupExtraSiteContentScripts() {
+    let js = [
+        "config.js",
+        "SB.js",
+        "utils/previewBar.js",
+        "utils/skipNotice.js",
+        "utils.js",
+        "content.js",
+        "popup.js"
+    ];
+    let css = [
+        "content.css",
+        "./libs/Source+Sans+Pro.css",
+        "popup.css"
+    ];
+
+    if (isFirefox()) {
+        let firefoxJS = [];
+        for (const file of js) {
+            firefoxJS.push({file});
+        }
+        let firefoxCSS = [];
+        for (const file of css) {
+            firefoxCSS.push({file});
+        }
+
+        let registration = {
+            message: "registerContentScript",
+            id: "invidious",
+            allFrames: true,
+            js: firefoxJS,
+            css: firefoxCSS,
+            matches: getInvidiousInstancesRegex()
+        };
+
+        if (isBackgroundScript) {
+            registerFirefoxContentScript(registration);
+        } else {
+            chrome.runtime.sendMessage(registration);
+        }
+    } else {
+        chrome.declarativeContent.onPageChanged.removeRules(["invidious"], function() {
+            let conditions = [];
+            for (const regex of getInvidiousInstancesRegex()) {
+                conditions.push(new chrome.declarativeContent.PageStateMatcher({
+                    pageUrl: { urlMatches: regex }
+                }));
+            }
+
+            // Add page rule
+            let rule = {
+                id: "invidious",
+                conditions,
+                actions: [new chrome.declarativeContent.RequestContentScript({
+                    allFrames: true,
+                    js,
+                    css
+                })]
+            };
+            
+            chrome.declarativeContent.onPageChanged.addRules([rule]);
+        });
+    }
+}
+
+/**
+ * Removes the permission and content script registration.
+ */
+function removeExtraSiteRegistration() {
+    if (isFirefox()) {
+        let id = "invidious";
+
+        if (isBackgroundScript) {
+            if (contentScriptRegistrations[id]) {
+                contentScriptRegistrations[id].unregister();
+                delete contentScriptRegistrations[id];
+            }
+        } else {
+            chrome.runtime.sendMessage({
+                message: "unregisterContentScript",
+                id: id
+            });
+        }
+    } else {
+        chrome.declarativeContent.onPageChanged.removeRules(["invidious"]);
+    }
+
+    chrome.permissions.remove({
+        origins: getInvidiousInstancesRegex()
+    });
+}
+
+function localizeHtmlPage() {
+    //Localize by replacing __MSG_***__ meta tags
+    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;
+    }
+}
+
+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;
+    }
+}
+
+/**
+ * @returns {String[]} Invidious Instances in regex form
+ */
+function getInvidiousInstancesRegex() {
+    var invidiousInstancesRegex = [];
+    for (const url of SB.config.invidiousInstances) {
+        invidiousInstancesRegex.push("https://*." + url + "/*");
+        invidiousInstancesRegex.push("http://*." + url + "/*");
+    }
+
+    return invidiousInstancesRegex;
+}
+
+function generateUserID(length = 36) {
+    let charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    let result = "";
+    if (window.crypto && window.crypto.getRandomValues) {
+            values = new Uint32Array(length);
+            window.crypto.getRandomValues(values);
+            for (i = 0; i < length; i++) {
+                    result += charset[values[i] % charset.length];
+            }
+            return result;
+    } else {
+            for (let i = 0; i < length; i++) {
+                result += charset[Math.floor(Math.random() * charset.length)];
+            }
+            return result;
+    }
+}
+
+/**
+ * Gets the error message in a nice string
+ * 
+ * @param {int} statusCode 
+ * @returns {string} errorMessage
+ */
+function getErrorMessage(statusCode) {
+    let errorMessage = "";
+                        
+    if([400, 429, 409, 502, 0].includes(statusCode)) {
+        //treat them the same
+        if (statusCode == 503) statusCode = 502;
+
+        errorMessage = chrome.i18n.getMessage(statusCode + "") + " " + chrome.i18n.getMessage("errorCode") + statusCode
+                        + "\n\n" + chrome.i18n.getMessage("statusReminder");
+    } else {
+        errorMessage = chrome.i18n.getMessage("connectionError") + statusCode;
+    }
+
+    return errorMessage;
+}
+
+/**
+ * Is this Firefox (web-extensions)
+ */
+function isFirefox() {
+    return typeof(browser) !== "undefined";
+}

utils/previewBar.js

@@ -59,6 +59,8 @@ class PreviewBar {
 		duration = Math.floor(duration * 100) / 100;
 		let width;
 		for (let i = 0; i < timestamps.length; i++) {
+			if (types[i] == null) continue;
+
 			width = (timestamps[i][1] - timestamps[i][0]) / duration * 100;
 			width = Math.floor(width * 100) / 100;
 

utils/skipNotice.js

@@ -1,10 +1,25 @@
 'use strict';
 
-//The notice that tells the user that a sponsor was just skipped
+/**
+ * The notice that tells the user that a sponsor was just skipped
+ */
 class SkipNotice {
-	constructor(parent, UUID) {
+    /**
+     * @param {HTMLElement} parent
+     * @param {String} UUID 
+     * @param {String} noticeTitle 
+     * @param {boolean} manualSkip 
+     */
+	constructor(parent, UUID, manualSkip = false) {
         this.parent = parent;
         this.UUID = UUID;
+        this.manualSkip = manualSkip;
+
+        let noticeTitle = chrome.i18n.getMessage("noticeTitle");
+
+        if (manualSkip) {
+            noticeTitle = chrome.i18n.getMessage("noticeTitleNotSkipped");
+        }
 
         this.maxCountdownTime = () => 4;
         //the countdown until this notice closes
@@ -54,7 +69,7 @@ class SkipNotice {
         noticeMessage.id = "sponsorSkipMessage" + this.idSuffix;
         noticeMessage.classList.add("sponsorSkipMessage");
         noticeMessage.classList.add("sponsorSkipObject");
-        noticeMessage.innerText = chrome.i18n.getMessage("noticeTitle");
+        noticeMessage.innerText = noticeTitle;
 
         //create the first column
         logoColumn.appendChild(logoElement);
@@ -136,7 +151,10 @@ class SkipNotice {
         dontShowAgainButton.className = "sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton";
         dontShowAgainButton.addEventListener("click", dontShowNoticeAgain);
 
+        // Don't let them hide it if manually skipping
+        if (!this.manualSkip) {
             dontshowContainer.appendChild(dontShowAgainButton);
+        }
 
         //add to row
         secondRow.appendChild(voteButtonsContainer);
@@ -148,7 +166,7 @@ class SkipNotice {
         noticeElement.appendChild(secondRow);
 
         //get reference node
-        let referenceNode = document.getElementById("movie_player");
+        let referenceNode = document.getElementById("movie_player") || document.querySelector("#player-container .video-js");
         if (referenceNode == null) {
             //for embeds
             let player = document.getElementById("player");
@@ -165,6 +183,10 @@ class SkipNotice {
 
         referenceNode.prepend(noticeElement);
 
+        if (manualSkip) {
+            this.unskippedMode(chrome.i18n.getMessage("skip"));
+        }
+
         this.startCountdown();
     }
 
@@ -228,10 +250,13 @@ class SkipNotice {
     unskip() {
         unskipSponsorTime(this.UUID);
 
+        this.unskippedMode(chrome.i18n.getMessage("reskip"));
+    }
+
+    /** Sets up notice to be not skipped yet */
+    unskippedMode(buttonText) {
         //change unskip button to a reskip button
-        let unskipButton = document.getElementById("sponsorSkipUnskipButton" + this.idSuffix);
-        unskipButton.innerText = chrome.i18n.getMessage("reskip");
-        unskipButton.removeEventListener("click", this.unskipCallback);
+        let unskipButton = this.changeUnskipButton(buttonText);
 
         //setup new callback
         this.unskipCallback = this.reskip.bind(this);
@@ -252,10 +277,8 @@ class SkipNotice {
     reskip() {
         reskipSponsorTime(this.UUID);
 
-        //change unskip button to a reskip button
-        let unskipButton = document.getElementById("sponsorSkipUnskipButton" + this.idSuffix);
-        unskipButton.innerText = chrome.i18n.getMessage("unskip");
-        unskipButton.removeEventListener("click", this.unskipCallback);
+        //change reskip button to a unskip button
+        let unskipButton = this.changeUnskipButton(chrome.i18n.getMessage("unskip"));
 
         //setup new callback
         this.unskipCallback = this.unskip.bind(this);
@@ -265,6 +288,27 @@ class SkipNotice {
         this.maxCountdownTime = () => 4;
         this.countdownTime = this.maxCountdownTime();
         this.updateTimerDisplay();
+
+        // See if the title should be changed
+        if (this.manualSkip) {
+            this.changeNoticeTitle(chrome.i18n.getMessage("noticeTitle"));
+
+            vote(1, this.UUID, this);
+        }
+    }
+
+    /**
+     * Changes the text on the reskip button
+     * 
+     * @param {string} text 
+     * @returns {HTMLElement} unskipButton
+     */
+    changeUnskipButton(text) {
+        let unskipButton = document.getElementById("sponsorSkipUnskipButton" + this.idSuffix);
+        unskipButton.innerText = text;
+        unskipButton.removeEventListener("click", this.unskipCallback);
+
+        return unskipButton;
     }
 
     afterDownvote() {
@@ -280,27 +324,31 @@ class SkipNotice {
                 //add this as a hidden sponsorTime
                 hiddenSponsorTimes.push(i);
             
-                let sponsorTimesLeft = sponsorTimes.slice();
-                for (let j = 0; j < hiddenSponsorTimes.length; j++) {
-                    //remove this sponsor time
-                    sponsorTimesLeft.splice(hiddenSponsorTimes[j], 1);
-                }
-            
-                //update the preview
-                previewBar.set(sponsorTimesLeft, [], v.duration);
-            
+                updatePreviewBar();
                 break;
             }
         }
     }
 
-    addNoticeInfoMessage(message) {
+    changeNoticeTitle(title) {
+        let noticeElement = document.getElementById("sponsorSkipMessage" + this.idSuffix);
+
+        noticeElement.innerText = title;
+    }
+    
+    addNoticeInfoMessage(message, message2) {
         let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + this.idSuffix);
         if (previousInfoMessage != null) {
             //remove it
             document.getElementById("sponsorSkipNotice" + this.idSuffix).removeChild(previousInfoMessage);
         }
 
+        let previousInfoMessage2 = document.getElementById("sponsorTimesInfoMessage" + this.idSuffix + "2");
+        if (previousInfoMessage2 != null) {
+            //remove it
+            document.getElementById("sponsorSkipNotice" + this.idSuffix).removeChild(previousInfoMessage2);
+        }
+        
         //add info
         let thanksForVotingText = document.createElement("p");
         thanksForVotingText.id = "sponsorTimesInfoMessage" + this.idSuffix;
@@ -309,6 +357,16 @@ class SkipNotice {
 
         //add element to div
         document.getElementById("sponsorSkipNotice" + this.idSuffix).insertBefore(thanksForVotingText, document.getElementById("sponsorSkipNoticeSpacer" + this.idSuffix));
+    
+        if (message2 !== undefined) {
+            let thanksForVotingText2 = document.createElement("p");
+            thanksForVotingText2.id = "sponsorTimesInfoMessage" + this.idSuffix + "2";
+            thanksForVotingText2.className = "sponsorTimesInfoMessage";
+            thanksForVotingText2.innerText = message2;
+
+            //add element to div
+            document.getElementById("sponsorSkipNotice" + this.idSuffix).insertBefore(thanksForVotingText2, document.getElementById("sponsorSkipNoticeSpacer" + this.idSuffix));
+        }
     }
     
     resetNoticeInfoMessage() {
@@ -355,6 +413,9 @@ class SkipNotice {
     
     //close this notice
     close() {
+        //reset message
+        this.resetNoticeInfoMessage();
+
         let notice = document.getElementById("sponsorSkipNotice" + this.idSuffix);
         if (notice != null) {
             notice.remove();