Merge pull request #229 from ajayyy/experimental-ajay

Increase version number

.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,3 +1,6 @@
 config.js
 ignored
-.idea/
+.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,12 +8,18 @@
 <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>
 
+<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>
@@ -44,6 +50,16 @@ 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.

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]);
+            delete SB.config[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() {
+	Object.keys(SB.defaults).forEach(key => {
+		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,9 +24,6 @@
     "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!"
     },
@@ -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"
@@ -100,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.\n\nYou must refresh your YouTube tab after installing or updating (even auto-update) the extension."
+        "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!"
@@ -141,9 +138,6 @@
     "removeFromWhitelist": {
          "message": "Remove Channel From Whitelist"
     },
-    "whitelistDescription": {
-         "message": "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."
-    },
     "voteOnTime": {
          "message": "Vote On A Sponsor Time"
     },
@@ -193,10 +187,10 @@
         "message": "Options"
     },
     "showButtons": {
-        "message": "Hide Buttons On YouTube Player"
+        "message": "Show Buttons On YouTube Player"
     },
     "hideButtons": {
-        "message": "Show Buttons On YouTube Player"
+        "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."
@@ -220,10 +214,10 @@
         "message": "This is the button that allows you to clear all sponsors on the YouTube player."
     },
     "disableViewTracking": {
-        "message": "Disable Sponsor View Tracking"
+        "message": "Disable Sponsor Skip Count Tracking"
     },
     "enableViewTracking": {
-        "message": "Enable Sponsor View Tracking"
+        "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. :)"
@@ -265,5 +259,132 @@
     },
     "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

@@ -24,9 +24,6 @@
     "409": {
         "message": "Déja soumis"
     },
-    "502": {
-        "message": "Le serveur ne fonctionne pas. Contactez le développeur."
-    },
     "channelWhitelisted": {
         "message": "Cette chaîne est sur la liste blanche !"
     },
@@ -193,10 +190,10 @@
         "message": "Options"
     },
     "showButtons": {
-        "message": "Cacher les boutons sur le lecteur YouTube"
+        "message": "Montrer les boutons sur le lecteur YouTube"
     },
     "hideButtons": {
-        "message": "Montrer les boutons sur le lecteur YouTube"
+        "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."

_locales/it/messages.json

@@ -24,9 +24,6 @@
     "409": {
         "message": "Questo spezzone è già stato inviato"
     },
-    "502": {
-        "message": "Sembra che il server non funzioni. Contatta lo sviluppatore."
-    },
     "channelWhitelisted": {
         "message": "Canale aggiunto alla whitelist!"
     },
@@ -194,10 +191,10 @@
         "message": "Opzioni"
     },
     "showButtons": {
-        "message": "Nascondi i Pulsanti nel Lettore di YouTube"
+        "message": "Mostra i Pulsanti nel Lettore di YouTube"
     },
     "hideButtons": {
-        "message": "Mostra i Pulsanti nel Lettore di YouTube"
+        "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."

_locales/pt_BR/messages.json

@@ -24,9 +24,6 @@
     "409": {
         "message": "Isso já foi enviado antes"
     },
-    "502": {
-        "message": "Parece que o servidor caiu. Contate o desenvolvedor para informá-los."
-    },
     "channelWhitelisted": {
         "message": "Canal adicionado à lista branca!"
     },
@@ -194,10 +191,10 @@
         "message": "Opções"
     },
     "showButtons": {
-        "message": "Esconder botões no player do Youtube"
+        "message": "Mostrar botões no player do Youtube"
     },
     "hideButtons": {
-        "message": "Mostrar botões no player do Youtube"
+        "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."

_locales/pt_pt/messages.json

@@ -24,9 +24,6 @@
     "409": {
         "message": "Isso já foi enviado antes"
     },
-    "502": {
-        "message": "Parece que o servidor caiu. Contacte o desenvolvedor para o informar."
-    },
     "channelWhitelisted": {
         "message": "Canal adicionado à whitelist!"
     },
@@ -193,10 +190,10 @@
         "message": "Opções"
     },
     "showButtons": {
-        "message": "Esconder botões no player do Youtube"
+        "message": "Mostrar botões no player do Youtube"
     },
     "hideButtons": {
-        "message": "Mostrar botões no player do Youtube"
+        "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."

_locales/ru/messages.json

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

background.js

@@ -1,3 +1,15 @@
+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',
@@ -6,74 +18,101 @@ chrome.tabs.onUpdated.addListener(function(tabId) {
 
 chrome.runtime.onMessage.addListener(function (request, sender, callback) {
 	switch(request.message) {
-    case "submitTimes":
-        submitTimes(request.videoID, callback);
-    
-        //this allows the callback to be called later by the submitTimes function
-        return true; 
-    case "addSponsorTime":
-        addSponsorTime(request.time, request.videoID, callback);
-    
-        //this allows the callback to be called later
-        return true; 
-    case "getSponsorTimes":
-        getSponsorTimes(request.videoID, function(sponsorTimes) {
-            callback({
-                        sponsorTimes: sponsorTimes
-            })
-        });
-    
-        //this allows the callback to be called later
-        return true;
-    case "submitVote":
-        submitVote(request.type, request.UUID, callback);
-    
-        //this allows the callback to be called later
-        return true;
-    case "alertPrevious":
-			chrome.notifications.create("stillThere" + Math.random(), {
-        type: "basic",
-        title: chrome.i18n.getMessage("wantToSubmit") + request.previousVideoID + "?",
-        message: chrome.i18n.getMessage("leftTimes"),
-        iconUrl: "./icons/LogoSponsorBlocker256px.png"
-			});
+        case "submitTimes":
+            submitTimes(request.videoID, callback);
+        
+            //this allows the callback to be called later by the submitTimes function
+            return true; 
+        case "addSponsorTime":
+            addSponsorTime(request.time, request.videoID, callback);
+        
+            //this allows the callback to be called later
+            return true;
+        
+        case "getSponsorTimes":
+            getSponsorTimes(request.videoID, function(sponsorTimes) {
+                callback({
+                    sponsorTimes: sponsorTimes
+                })
+            });
+        
+            //this allows the callback to be called later
+            return true;
+        case "submitVote":
+            submitVote(request.type, request.UUID, callback);
+        
+            //this allows the callback to be called later
+            return true;
+        case "alertPrevious":
+            chrome.notifications.create("stillThere" + Math.random(), {
+                type: "basic",
+                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) {
+    // This let's the config sync to run fully before checking.
+    // This is required on Firefox
     setTimeout(function() {
-        chrome.storage.sync.get(["userID"], function(result) {
-            const userID = result.userID;
+        const userID = SB.config.userID;
 
-            // If there is no userID, then it is the first install.
-            if (!userID){
-                //open up the install page
-                chrome.tabs.create({url: chrome.extension.getURL("/help/index_en.html")});
+        // If there is no userID, then it is the first install.
+        if (!userID){
+            //open up the install page
+            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
-                });
-            }
-        });
+            //generate a userID
+            const newUserID = generateUserID();
+            //save this UUID
+            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];
-        if (sponsorTimesStorage != undefined && sponsorTimesStorage.length > 0) {
-            sponsorTimes = sponsorTimesStorage;
-        }
-
-        callback(sponsorTimes)
-    });
+    let sponsorTimesStorage = SB.config.sponsorTimes.get(videoID);
+	
+    if (sponsorTimesStorage != undefined && sponsorTimesStorage.length > 0) {
+        sponsorTimes = sponsorTimesStorage;
+    }
+	
+    callback(sponsorTimes);
 }
 
 function addSponsorTime(time, videoID, callback) {
@@ -91,111 +130,97 @@ 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
+    if (userID == undefined || userID === "undefined") {
+        //generate one
+        userID = generateUserID();
+        SB.config.userID = userID;
+    }
+
+    //publish this vote
+    sendRequestToServer("POST", "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + "&type=" + type, function(xmlhttp, error) {
+        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+            callback({
+                successType: 1
+            });
+        } else if (xmlhttp.readyState == 4 && xmlhttp.status == 405) {
+            //duplicate vote
+            callback({
+                successType: 0,
+                statusCode: xmlhttp.status
+            });
+        } else if (error) {
+            //error while connect
+            callback({
+                successType: -1,
+                statusCode: xmlhttp.status
             });
         }
 
-        //publish this vote
-        sendRequestToServer("GET", "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + "&type=" + type, function(xmlhttp, error) {
-            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-                callback({
-                    successType: 1
-                });
-            } else if (xmlhttp.readyState == 4 && xmlhttp.status == 405) {
-                //duplicate vote
-                callback({
-                    successType: 0,
-                    statusCode: xmlhttp.status
-                });
-            } else if (error) {
-                //error while connect
-                callback({
-                    successType: -1,
-                    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;
-
-        if (sponsorTimes != undefined && sponsorTimes.length > 0) {
-            let durationResult = await new Promise((resolve, reject) => {
-                chrome.tabs.query({
-                    active: true,
-                    currentWindow: true
-                }, function(tabs) {
-                    chrome.tabs.sendMessage(tabs[0].id, {
-                        message: "getVideoDuration"
-                    }, (response) => resolve(response));
-                });
+    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) => {
+            chrome.tabs.query({
+                active: true,
+                currentWindow: true
+            }, function(tabs) {
+                chrome.tabs.sendMessage(tabs[0].id, {
+                    message: "getVideoDuration"
+                }, (response) => resolve(response));
             });
+        });
 
-            //check if a sponsor exceeds the duration of the video
-            for (let i = 0; i < sponsorTimes.length; i++) {
-                if (sponsorTimes[i][1] > durationResult.duration) {
-                    sponsorTimes[i][1] = durationResult.duration;
-                }
-            }
-
-            //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) {
-                        if (xmlhttp.readyState == 4 && !error) {
-                            callback({
-                                statusCode: xmlhttp.status
-                            });
-
-                            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;
-                                    }
-
-                                    //save the amount contributed
-                                    if (!increasedContributionAmount) {
-                                        increasedContributionAmount = true;
-                                        
-                                        chrome.storage.sync.set({"sponsorTimesContributed": currentContributionAmount + sponsorTimes.length});
-                                    }
-                                });
-                            }
-                        } else if (error) {
-                            callback({
-                                statusCode: -1
-                            });
-                        }
-                });
+        //check if a sponsor exceeds the duration of the video
+        for (let i = 0; i < sponsorTimes.length; i++) {
+            if (sponsorTimes[i][1] > durationResult.duration) {
+                sponsorTimes[i][1] = durationResult.duration;
             }
         }
-    });
+
+        //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) {
+					if (xmlhttp.readyState == 4 && !error) {
+                        callback({
+                            statusCode: xmlhttp.status
+                        });
+
+                    if (xmlhttp.status == 200) {
+                        //add these to the storage log
+                                currentContributionAmount = SB.config.sponsorTimesContributed;
+                                //save the amount contributed
+                                if (!increasedContributionAmount) {
+                                    increasedContributionAmount = true;
+                                    SB.config.sponsorTimesContributed = currentContributionAmount + sponsorTimes.length;
+                                }
+                        }
+                    } else if (error) {
+                        callback({
+                            statusCode: -1
+                        });
+                    }
+            });
+        }
+    }
 }
 
 function sendRequestToServer(type, address, callback) {
@@ -216,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;
 
@@ -55,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 = [];
 
@@ -67,140 +65,103 @@ 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
-//option renamed when new notice was made
-var dontShowNotice = false;
-chrome.storage.sync.get(["dontShowNotice"], function(result) {
-    let dontShowNoticeAgain = result.dontShowNotice;
-    if (dontShowNoticeAgain != undefined) {
-        dontShowNotice = dontShowNoticeAgain;
-    }
-});
-//load the legacy option to hide the notice
-var dontShowNoticeOld = false;
-chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
-    let dontShowNoticeAgain = result.dontShowNoticeAgain;
-    if (dontShowNoticeAgain != undefined) {
-        dontShowNoticeOld = dontShowNoticeAgain;
-    }
-});
-
 //get messages from the background script and the popup
 chrome.runtime.onMessage.addListener(messageListener);
   
 function messageListener(request, sender, sendResponse) {
-        //messages from popup script
-        switch(request.message){
-            case "update":
-                videoIDChange(getYouTubeVideoID(document.URL));
+    //messages from popup script
+    switch(request.message){
+        case "update":
+            videoIDChange(getYouTubeVideoID(document.URL));
+            break;
+        case "sponsorStart":
+            sponsorMessageStarted(sendResponse);
 
-                break;
-            case "sponsorStart":
-                sponsorMessageStarted(sendResponse);
+            break;
+        case "sponsorDataChanged":
+            updateSponsorTimesSubmitting();
 
-                break;
-            case "sponsorDataChanged":
-                updateSponsorTimesSubmitting();
+            break;
+        case "isInfoFound":
+            //send the sponsor times along with if it's found
+            sendResponse({
+                found: sponsorDataFound,
+                sponsorTimes: sponsorTimes,
+                hiddenSponsorTimes: hiddenSponsorTimes,
+                UUIDs: UUIDs
+            });
 
-                break;
-            case "isInfoFound":
-                //send the sponsor times along with if it's found
-                sendResponse({
-                    found: sponsorDataFound,
-                    sponsorTimes: sponsorTimes,
-                    hiddenSponsorTimes: hiddenSponsorTimes,
-                    UUIDs: UUIDs
-                });
+            if (popupInitialised && document.getElementById("sponsorBlockPopupContainer") != null) {
+                //the popup should be closed now that another is opening
+                closeInfoMenu();
+            }
 
-                if (popupInitialised && document.getElementById("sponsorBlockPopupContainer") != null) {
-                    //the popup should be closed now that another is opening
-                    closeInfoMenu();
-                }
+            popupInitialised = true;
+            break;
+        case "getVideoID":
+            sendResponse({
+                videoID: sponsorVideoID
+            });
 
-                popupInitialised = true;
-                break;
-            case "getVideoID":
-                sendResponse({
-                    videoID: sponsorVideoID
-                });
+            break;
+        case "getVideoDuration":
+            sendResponse({
+            duration: v.duration
+            });
 
-                break;
-            case "getVideoDuration":
-                sendResponse({
-                duration: v.duration
-                });
+            break;
+        case "skipToTime":
+            v.currentTime = request.time;
+            return
+        case "getCurrentTime":
+            sendResponse({
+                currentTime: v.currentTime
+            });
 
-                break;
-            case "skipToTime":
-                v.currentTime = request.time;
-                return
-            case "getCurrentTime":
-                sendResponse({
-                    currentTime: v.currentTime
-                });
+            break;
+        case "getChannelURL":
+            sendResponse({
+            channelURL: channelURL
+            });
 
-                break;
-            case "getChannelURL":
-                sendResponse({
-                channelURL: channelURL
-                });
+            break;
+        case "isChannelWhitelisted":
+            sendResponse({
+                value: channelWhitelisted
+            });
 
-                break;
-            case "isChannelWhitelisted":
-                sendResponse({
-                    value: channelWhitelisted
-                });
+            break;
+        case "whitelistChange":
+            channelWhitelisted = request.value;
+            sponsorsLookup(sponsorVideoID);
 
-                break;
-            case "whitelistChange":
-                channelWhitelisted = request.value;
-                sponsorsLookup(sponsorVideoID);
+            break;
+        case "changeStartSponsorButton":
+            changeStartSponsorButton(request.showStartSponsor, request.uploadButtonVisible);
 
-                break;
-            case "dontShowNotice":
-                dontShowNotice = false;
-
-                break;
-            case "changeStartSponsorButton":
-                changeStartSponsorButton(request.showStartSponsor, request.uploadButtonVisible);
-
-                break;
-            case "showNoticeAgain":
-                dontShowNotice = false;
-                
-                break;
-            case "changeVideoPlayerControlsVisibility":
-                hideVideoPlayerControls = request.value;
-                updateVisibilityOfPlayerControlsButton();
-
-                break;
-            case "changeInfoButtonPlayerControlsVisibility":
-                hideInfoButtonPlayerControls = request.value;
-                updateVisibilityOfPlayerControlsButton();
-
-                break;
-            case "changeDeleteButtonPlayerControlsVisibility":
-                hideDeleteButtonPlayerControls = request.value;
-                updateVisibilityOfPlayerControlsButton();
-
-                break;
-            case "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
@@ -210,19 +171,9 @@ document.onkeydown = async function(e){
 
     let video = document.getElementById("movie_player");
 
-    let startSponsorKey = await new Promise((resolve, reject) => {
-        chrome.storage.sync.get(["startSponsorKeybind"], (result) => resolve(result));
-    });
-    let submitKey = await new Promise((resolve, reject) => {
-        chrome.storage.sync.get(["submitKeybind"], (result) => resolve(result));
-    });
+    let startSponsorKey = SB.config.startSponsorKeybind;
 
-    if (startSponsorKey.startSponsorKeybind === undefined) {
-        startSponsorKey.startSponsorKeybind = ";"
-    }
-    if (submitKey.submitKeybind === undefined) {
-        submitKey.submitKeybind = "'"
-    }
+    let submitKey = SB.config.submitKeybind;
 
     //is the video in focus, otherwise they could be typing a comment
     if (document.activeElement === video) {
@@ -273,29 +224,39 @@ function videoIDChange(id) {
     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({
+                    message: "alertPrevious",
+                    previousVideoID: previousVideoID
+                })
+        }
 
-            if (sponsorTimes != undefined && sponsorTimes.length > 0) {
-                //warn them that they have unsubmitted sponsor times
-                    chrome.runtime.sendMessage({
-                        message: "alertPrevious",
-                        previousVideoID: previousVideoID
-                    })
-            }
-
-            //set the previous video id to the currentID
-            previousVideoID = 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;
@@ -337,30 +298,10 @@ 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, channelIDPromise) {
@@ -378,6 +319,18 @@ function sponsorsLookup(id, channelIDPromise) {
         v.addEventListener('durationchange', updatePreviewBar);
     }
 
+    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;
@@ -388,6 +341,9 @@ function sponsorsLookup(id, channelIDPromise) {
             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))) {
@@ -396,18 +352,6 @@ function sponsorsLookup(id, channelIDPromise) {
                 updatePreviewBar();
             }
 
-            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);
-                }
-            }
-
             sponsorLookupRetries = 0;
         } else if (xmlhttp.readyState == 4 && xmlhttp.status == 404) {
             sponsorDataFound = false;
@@ -439,9 +383,11 @@ function sponsorsLookup(id, channelIDPromise) {
     });
 
     //add the event to run on the videos "ontimeupdate"
-    v.ontimeupdate = function () { 
-        sponsorCheck();
-    };
+    if (!SB.config.disableSkipping) {
+        v.ontimeupdate = function () { 
+            sponsorCheck();
+        };
+    }
 }
 
 function updatePreviewBar() {
@@ -453,7 +399,12 @@ function updatePreviewBar() {
     //create an array of the sponsor types
     let types = [];
     for (let i = 0; i < localSponsorTimes.length; i++) {
-        types.push("sponsor");
+        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");
@@ -467,25 +418,23 @@ function updatePreviewBar() {
 
 function getChannelID() {
     //get channel id
-    let channelContainers = document.querySelectorAll(".ytd-channel-name#text");
     let channelURLContainer = null;
 
-    for (let i = 0; i < channelContainers.length; i++) {
-        let child = channelContainers[i].firstElementChild;
-        if (child != null && child.getAttribute("href") != "") {
-            channelURLContainer = child;
-        }
-    }
-
-    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
         return false;
     }
@@ -495,6 +444,9 @@ function getChannelID() {
     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;
@@ -516,38 +468,23 @@ function getChannelID() {
 //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;
-
-            //make sure the whitelistedChannels array isn't broken and full of null entries
-            //TODO: remove this at some point in the future as the bug that caused this should be patched
-            if (whitelistedChannels.some((el) => el === null)) {
-                //remove the entries that are null
-                let cleanWhitelistedChannelsArray = [];
-                for (let i = 0; i < whitelistedChannels.length; i++) {
-                    let channelURL = whitelistedChannels[i];
-                    if (channelURL !== null) {
-                        //add it
-                        cleanWhitelistedChannelsArray.push(channelURL);
-                    }
-                }
-
-                //save this value
-                chrome.storage.sync.set({"whitelistedChannels": cleanWhitelistedChannelsArray});
-            }
-        }
-    });
+    if (whitelistedChannels != undefined && whitelistedChannels.includes(channelURL)) {
+        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) {
@@ -606,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) {
-    v.currentTime = sponsorTimes[index][1];
+    if (!SB.config.disableAutoSkip) {
+        v.currentTime = sponsorTimes[index][1];
+    }
 
     lastSponsorTimeSkipped = sponsorTimes[index][0];
   
@@ -615,28 +554,33 @@ function skipToTime(v, index, sponsorTimes, openNotice) {
 
     if (openNotice) {
         //send out the message saying that a sponsor message was skipped
-        if (!dontShowNotice) {
-            let skipNotice = new SkipNotice(this, currentUUID);
+        if (!SB.config.dontShowNotice) {
+            let skipNotice = new SkipNotice(this, currentUUID, SB.config.disableAutoSkip);
 
-            if (dontShowNoticeOld) {
-                //show why this notice is showing
-                skipNotice.addNoticeInfoMessage(chrome.i18n.getMessage("noticeUpdate"), chrome.i18n.getMessage("noticeUpdate2"));
+            //TODO: Remove this when Invidious support is old
+            if (SB.config.invidiousUpdateInfoShowCount < 5) {
+                skipNotice.addNoticeInfoMessage(chrome.i18n.getMessage("invidiousInfo1"), chrome.i18n.getMessage("invidiousInfo2"));
 
-                //remove this setting
-                chrome.storage.sync.remove(["dontShowNoticeAgain"]);
-                dontShowNoticeOld = false;
+                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;
+        }
     }
 }
 
@@ -654,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;
 
@@ -688,7 +625,14 @@ 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
@@ -711,14 +655,21 @@ async function updateVisibilityOfPlayerControlsButton() {
 
     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");
     }
+
     //don't show the info button on embeds
-    if (hideInfoButtonPlayerControls || document.URL.includes("/embed/")) {
+    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";
     }
 }
@@ -770,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) ? "unset" : "none"
     document.getElementById("deleteButton").style.display = shouldHide;
 
     if (showStartSponsor) {
@@ -778,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
@@ -873,28 +824,24 @@ 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);
-            confirmMessage += chrome.i18n.getMessage("confirmMSG")
-            if(!confirm(confirmMessage)) return;
+    if (sponsorTimes != undefined && sponsorTimes.length > 0) {
+        let confirmMessage = chrome.i18n.getMessage("clearThis") + getSponsorTimesMessage(sponsorTimes);
+        confirmMessage += chrome.i18n.getMessage("confirmMSG")
+        if(!confirm(confirmMessage)) return;
 
-            //clear the sponsor times
-            let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-            chrome.storage.sync.set({[sponsorTimeKey]: []});
+        //clear the sponsor times
+        SB.config.sponsorTimes.delete(currentVideoID);
 
-            //clear sponsor times submitting
-            sponsorTimesSubmitting = [];
+        //clear sponsor times submitting
+        sponsorTimesSubmitting = [];
 
-            updatePreviewBar();
+        updatePreviewBar();
 
-            //set buttons to be correct
-            changeStartSponsorButton(true, false);
-        }
-    });
+        //set buttons to be correct
+        changeStartSponsorButton(true, false);
+    }
 }
 
 //if skipNotice is null, it will not affect the UI
@@ -905,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,
@@ -923,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.resetVoteButtonInfo.bind(skipNotice)();
-                    } else {
-                        //failure: unknown error
-                        skipNotice.addNoticeInfoMessage.bind(skipNotice)(chrome.i18n.getMessage("connectionError") + response.statusCode);
-                        skipNotice.resetVoteButtonInfo.bind(skipNotice)();
-                    }
+                    skipNotice.addNoticeInfoMessage.bind(skipNotice)(getErrorMessage(response.statusCode))
+                    skipNotice.resetVoteButtonInfo.bind(skipNotice)();
                 }
             }
         }
@@ -946,10 +906,7 @@ function closeAllSkipNotices(){
 }
 
 function dontShowNoticeAgain() {
-    chrome.storage.sync.set({"dontShowNotice": true});
-
-    dontShowNotice = true;
-
+    SB.config.dontShowNotice = true;
     closeAllSkipNotices();
 }
 
@@ -976,27 +933,27 @@ 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
-            for (let i = 0; i < sponsorTimes.length; i++) {
-                if (sponsorTimes[i][1] > v.duration) {
-                    sponsorTimes[i][1] = v.duration;
-                }
+    if (sponsorTimes != undefined && sponsorTimes.length > 0) {
+        //check if a sponsor exceeds the duration of the video
+        for (let i = 0; i < sponsorTimes.length; i++) {
+            if (sponsorTimes[i][1] > v.duration) {
+                sponsorTimes[i][1] = v.duration;
             }
-            //update sponsorTimes
-            chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
-
-            let confirmMessage = chrome.i18n.getMessage("submitCheck") + "\n\n" + getSponsorTimesMessage(sponsorTimes);
-            confirmMessage += "\n\n" + chrome.i18n.getMessage("confirmMSG");
-            if(!confirm(confirmMessage)) return;
-
-            sendSubmitMessage();
         }
-    });
+        //update sponsorTimes
+        SB.config.sponsorTimes.set(currentVideoID, sponsorTimes);
+
+        //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();
+    }
 
 }
 
@@ -1031,24 +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, 0].includes(response.statusCode)) {
-                    //treat them the same
-                    if (response.statusCode == 503) response.statusCode = 502;
-
-                    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.9.4",
+  "version": "1.2.3",
   "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,95 +1,43 @@
 <html>
   <head>
     <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">__MSG_Name__</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">__MSG_Loading__</p>
-
+          <p id="loadingIndicator" class="popupElement">__MSG_noVideoID__</p>
+          
           <!-- Hidden until loading complete -->
           <div id="mainControls" class="main popupElement" style="display: none">
             <!-- If the video was found in the database -->
             <div id="videoFound">
-                
+                  
             </div>
 
             <div id="downloadedSponsorMessageTimes" class="popupElement">
-
+  
             </div>
-            
-            <br/>
-
-            <div>
-              <button id="whitelistChannel" class="whitelistButton popupElement">__MSG_whitelistChannel__</button>
-              <button id="unwhitelistChannel" class="whitelistButton popupElement" style="display: none">__MSG_removeFromWhitelist__</button>
-            </div>
-            <sub class="popupElement">
-              __MSG_whitelistDescription__
-            </sub>
-
-            <br/>
-            <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>
-
-            <h2 class="recordingSubtitle popupElement">__MSG_recordTimes__</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__.
-                     __MSG_savedPeopleFrom__
-                  </span>
-              </span>
-
-              <div class="popupElement">
-                __MSG_viewLeaderboard__ <a class="popupElement discreteLink" href="https://sponsor.ajay.app/stats" target="_blank">__MSG_here__</a>.
-              </div>
-            </p>
 
             <p class="popupElement"> 
               __MSG_recordTimesDescription__
             </p>
-    
+  
             <div>
               <button id="sponsorStart" class="greenButton popupElement">__MSG_sponsorStart__</button>
             </div>
-
+  
             <sub class="popupElement">__MSG_popupHint__</sub>
-    
+
             <div id="submissionSection"  class="popupElement" style="display: none">
               <h3 class="popupElement">__MSG_lastTimes__</h3>
               <b>
@@ -102,10 +50,11 @@
       
               <button id="clearTimes" class="smallButton popupElement">__MSG_clearTimesButton__</button>
       
-              <br/>
-              <br/>
-
               <div id="submitTimesContainer" class="popupElement" style="display: none">
+
+                <br/>
+                <br/>
+
                 <button id="submitTimes" class="smallButton popupElement">__MSG_submitTimesButton__</button>
 
                 <div id="submitTimesInfoMessageContainer" class="popupElement" style="display: none">
@@ -115,36 +64,7 @@
                 </div>
 
               </div>
-      
-            </div>
 
-            <div id="setUsernameContainer" class="popupElement">
-              <br/>
-              <br/>
-    
-              <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">
-                <br/>
-
-                <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">Submit Username</button>
             </div>
 
             <div id="discordButtonContainer" class="popupElement" style="display: none">
@@ -161,74 +81,130 @@
               <span id="hideDiscordButton" class="smallLink popupElement">__MSG_hideThis__</span>
             </div>
 
-            <div id="optionsButtonContainer" class="popupElement">
-                <br/>
-                <br/>
-      
-                <button id="optionsButton" class="dangerButton popupElement">__MSG_Options__</button>
+            <div>
+              <br/>
+
+              <button id="whitelistChannel" class="whitelistButton popupElement">__MSG_whitelistChannel__</button>
+              <button id="unwhitelistChannel" class="whitelistButton popupElement" style="display: none">__MSG_removeFromWhitelist__</button>
             </div>
 
-            <div id="options" class="popupElement" style="display: none">
-                <br/>
+            <br/>
 
-                <h3>__MSG_Options__</h3>
+            <button id="reportAnIssue" class="dangerButton popupElement">__MSG_voteOnTime__</button>
 
-                <span id="keybindButtons">
-                  <button id="setStartSponsorKeybind" class="warningButton popupElement">__MSG_setStartSponsorShortcut__</button>
-                  <br/>
-                  <br/>
-                  <button id="setSubmitKeybind" class="warningButton popupElement">__MSG_setSubmitKeybind__</button>
-                  <br/>
-                </span>
-                
-                <h2 id="keybindDescription" style="display: none" class="popupElement">__MSG_keybindDescription__</h2>
+            <div id="issueReporterContainer"  class="popupElement" style="display: none">
 
-                <br/>
-                <br/>
-      
-                <button id="hideVideoPlayerControls" class="warningButton popupElement">__MSG_hideButtons__</button>
-                <button id="showVideoPlayerControls" style="display: none" class="warningButton popupElement">__MSG_showButtons__</button>
-                <br/>
-                <sub class="popupElement">
-                  __MSG_hideButtonsDescription__
-                </sub>
+              <h3 style="margin-top: 0px" class="popupElement">__MSG_voteOnTime__</h3>
 
-                <br/>
-                <br/>
+              <div id="issueReporterTimeButtons" class="popupElement">
 
-                <button id="hideInfoButtonPlayerControls" class="warningButton popupElement">__MSG_hideInfoButton__</button>
-                <button id="showInfoButtonPlayerControls" style="display: none" class="warningButton popupElement">__MSG_showInfoButton__</button>
-                <br/>
-                <sub class="popupElement">
-                  __MSG_whatInfoButton__
-                </sub>
+              </div>
 
-                <br/>
-                <br/>
-
-                <button id="hideDeleteButtonPlayerControls" class="warningButton popupElement">__MSG_hideDeleteButton__</button>
-                <button id="showDeleteButtonPlayerControls" style="display: none" class="warningButton popupElement">__MSG_showDeleteButton__</button>
-                <br/>
-                <sub class="popupElement">
-                  __MSG_whatDeleteButton__
-                </sub>
-
-                <br/>
-                <br/>
-
-                <button id="disableSponsorViewTracking" class="warningButton popupElement">__MSG_disableViewTracking__</button>
-                <button id="enableSponsorViewTracking" style="display: none" class="warningButton popupElement">__MSG_enableViewTracking__</button>
-                <br/>
-                <sub class="popupElement">
-                  __MSG_whatViewTracking__
-                </sub>
-      
-                <br/>
-                <br/>
-
-                <button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">__MSG_showNotice__</button>
             </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">__MSG_Options__</button>
+
+              <br/>
+              
+              <sub class="popupElement">
+                __MSG_optionsInfo__
+              </sub>
+
+              <br/>
+          </div>
+
+          <button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">__MSG_showNotice__</button>
         </div>
     </center>
   </body>

popup.js

@@ -1,45 +1,40 @@
-
 //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) {
-            //this is on the content script, use direct communication
-            chrome.tabs = {};
-            chrome.tabs.sendMessage = function(id, request, callback) {
-                    messageListener(request, null, callback);
-            }
-  
-            //add a dummy query method
-            chrome.tabs.query = function(config, callback) {
-                    callback([{
-                            url: document.URL,
-                            id: -1
-                    }]);
-            }
-  
-            inPopup = false;
+        //this is on the content script, use direct communication
+        chrome.tabs = {};
+        chrome.tabs.sendMessage = function(id, request, callback) {
+            messageListener(request, null, callback);
+        }
+
+        //add a dummy query method
+        chrome.tabs.query = function(config, callback) {
+            callback([{
+                    url: document.URL,
+                    id: -1
+            }]);
+        }
+
+        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",
@@ -49,6 +44,18 @@ function runThePopup() {
     "sponsorTimesViewsContainer",
     "sponsorTimesViewsDisplay",
     "sponsorTimesViewsDisplayEndWord",
+    // sponsorTimesOthersTimeSaved
+    "sponsorTimesOthersTimeSavedContainer",
+    "sponsorTimesOthersTimeSavedDisplay",
+    "sponsorTimesOthersTimeSavedEndWord",
+    // sponsorTimesSkipsDone
+    "sponsorTimesSkipsDoneContainer",
+    "sponsorTimesSkipsDoneDisplay",
+    "sponsorTimesSkipsDoneEndWord",
+    // sponsorTimeSaved
+    "sponsorTimeSavedContainer",
+    "sponsorTimeSavedDisplay",
+    "sponsorTimeSavedEndWord",
     // discordButtons
     "discordButtonContainer",
     "hideDiscordButton",
@@ -70,35 +77,23 @@ function runThePopup() {
     "videoFound",
     "sponsorMessageTimes",
     "downloadedSponsorMessageTimes",
-    // Keybinds
-    "setStartSponsorKeybind",
-    "setSubmitKeybind",
-    "keybindDescription"
     ].forEach(id => SB[id] = document.getElementById(id));
 
     //setup click listeners
     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.setStartSponsorKeybind.addEventListener("click", () => setKeybind(true));
-    SB.setSubmitKeybind.addEventListener("click", () => setKeybind(false));
-    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);
     SB.reportAnIssue.addEventListener("click", reportAnIssue);
     SB.hideDiscordButton.addEventListener("click", hideDiscordButton);
-
+	
     //if true, the button now selects the end time
     let startTimeChosen = false;
   
@@ -108,115 +103,114 @@ function runThePopup() {
     //current video ID of this tab
     let currentVideoID = null;
   
-    //is this a YouTube tab?
-    let isYouTubeTab = false;
-
-    // Is the start sponsor keybind currently being set
-    let setStartSponsorKeybind = false;
-  
     //see if discord link can be shown
-    chrome.storage.sync.get(["hideDiscordLink"], function(result) {
-        let hideDiscordLink = result.hideDiscordLink;
-        if (hideDiscordLink == undefined || !hideDiscordLink) {
-            chrome.storage.sync.get(["hideDiscordLaunches"], function(result) {
-                let hideDiscordLaunches = result.hideDiscordLaunches;
-                //only if less than 5 launches
-                if (hideDiscordLaunches == undefined || hideDiscordLaunches < 10) {
-                    SB.discordButtonContainer.style.display = null;
-          
-                    if (hideDiscordLaunches == undefined) {
-                        hideDiscordButton = 1;
-                    }
-  
-                    chrome.storage.sync.set({"hideDiscordLaunches": hideDiscordButton + 1});
+    let hideDiscordLink = SB.config.hideDiscordLink;
+    if (hideDiscordLink == undefined || !hideDiscordLink) {
+            let hideDiscordLaunches = SB.config.hideDiscordLaunches;
+            //only if less than 10 launches
+            if (hideDiscordLaunches == undefined || hideDiscordLaunches < 10) {
+                SB.discordButtonContainer.style.display = null;
+        
+                if (hideDiscordLaunches == undefined) {
+                    hideDiscordLaunches = 1;
                 }
-            });
-        }
-    });
-
-    //if the don't show notice again letiable is true, an option to 
-    //  disable should be available
-    chrome.storage.sync.get(["dontShowNotice"], function(result) {
-        let dontShowNotice = result.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) {
-                SB.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsors");
-            } else {
-                SB.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Sponsor");
+                SB.config.hideDiscordLaunches = hideDiscordLaunches + 1;
             }
-            SB.sponsorTimesContributionsDisplay.innerText = result.sponsorTimesContributed;
-            SB.sponsorTimesContributionsContainer.style.display = "unset";
-  
-            //get the userID
-            chrome.storage.sync.get(["userID"], function(result) {
-                let userID = result.userID;
-                if (userID != undefined) {
-                    //there are probably some views on these submissions then
-                    //get the amount of views from the sponsors submitted
-                    sendRequestToServer("GET", "/api/getViewsForUser?userID=" + userID, function(xmlhttp) {
-                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-                            let viewCount = JSON.parse(xmlhttp.responseText).viewCount;
-                            if (viewCount != 0) {
-                                if (viewCount > 1) {
-                                    SB.sponsorTimesViewsDisplayEndWord.innerText = chrome.i18n.getMessage("Segments");
-                                } else {
-                                    SB.sponsorTimesViewsDisplayEndWord.innerText = chrome.i18n.getMessage("Segment");
-                                }
+    }
 
-                                SB.sponsorTimesViewsDisplay.innerText = viewCount;
-                                SB.sponsorTimesViewsContainer.style.display = "unset";
-                            }
-                        }
-                    });
-                }
-            });
+    //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 variable is true, an option to 
+    //  disable should be available
+    let dontShowNotice = SB.config.dontShowNotice;
+    if (dontShowNotice != undefined && dontShowNotice) {
+        SB.showNoticeAgain.style.display = "unset";
+    }
+
+    //get the amount of times this user has contributed and display it to thank them
+    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 = SB.config.sponsorTimesContributed;
+        SB.sponsorTimesContributionsContainer.style.display = "unset";
+
+        //get the 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
+                sendRequestToServer("GET", "/api/getViewsForUser?userID=" + userID, function(xmlhttp) {
+                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+                        let viewCount = JSON.parse(xmlhttp.responseText).viewCount;
+                        if (viewCount != 0) {
+                            if (viewCount > 1) {
+                                SB.sponsorTimesViewsDisplayEndWord.innerText = chrome.i18n.getMessage("Segments");
+                            } else {
+                                SB.sponsorTimesViewsDisplayEndWord.innerText = chrome.i18n.getMessage("Segment");
+                            }
+
+                            SB.sponsorTimesViewsDisplay.innerText = viewCount;
+                            SB.sponsorTimesViewsContainer.style.display = "unset";
+                        }
+                    }
+                });
+
+                //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,
             currentWindow: true
     }, onTabs);
-  
+	
     function onTabs(tabs) {
 	  chrome.tabs.sendMessage(tabs[0].id, {message: 'getVideoID'}, function(result) {
         if (result != undefined && result.videoID) {
@@ -237,25 +231,22 @@ function runThePopup() {
         }
   
         //load video times for this video 
-        let sponsorTimeKey = "sponsorTimes" + currentVideoID;
-        chrome.storage.sync.get([sponsorTimeKey], function(result) {
-            let sponsorTimesStorage = result[sponsorTimeKey];
-            if (sponsorTimesStorage != undefined && sponsorTimesStorage.length > 0) {
-                if (sponsorTimesStorage[sponsorTimesStorage.length - 1] != undefined && sponsorTimesStorage[sponsorTimesStorage.length - 1].length < 2) {
-                    startTimeChosen = true;
-                    SB.sponsorStart.innerHTML = chrome.i18n.getMessage("sponsorEnd");
-                }
-  
-                sponsorTimes = sponsorTimesStorage;
-  
-                displaySponsorTimes();
-  
-                //show submission section
-                SB.submissionSection.style.display = "unset";
-  
-                showSubmitTimesIfNecessary();
+        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;
+                SB.sponsorStart.innerHTML = chrome.i18n.getMessage("sponsorEnd");
             }
-        });
+
+            sponsorTimes = sponsorTimesStorage;
+
+            displaySponsorTimes();
+
+            //show submission section
+            SB.submissionSection.style.display = "unset";
+
+            showSubmitTimesIfNecessary();
+        }
   
         //check if this video's sponsors are known
         chrome.tabs.sendMessage(
@@ -280,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");
@@ -304,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";
                     }
                 });
@@ -312,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({
@@ -341,10 +325,9 @@ 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({
@@ -357,7 +340,6 @@ function runThePopup() {
                     );
                 });
             }
-        });
   
         updateStartTimeChosen();
   
@@ -654,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);
@@ -666,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);
     }
@@ -677,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
@@ -688,7 +669,6 @@ function runThePopup() {
                     {message: "sponsorDataChanged"}
                 );
             });
-        });
   
         if (closeEditMode) {
             displaySponsorTimes();
@@ -718,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
@@ -729,7 +708,6 @@ function runThePopup() {
                     {message: "sponsorDataChanged"}
                 );
             });
-        });
   
         //update display
         displaySponsorTimes();
@@ -770,9 +748,8 @@ 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
@@ -782,7 +759,6 @@ function runThePopup() {
                     {message: "sponsorDataChanged"}
                 );
             });
-        });
   
         displaySponsorTimes();
   
@@ -809,18 +785,7 @@ function runThePopup() {
 
                         clearTimes();
                     } else {
-                        let errorMessage = "";
-                        
-                        if([400, 429, 409, 502, 0].includes(response.statusCode)) {
-                            //treat them the same
-                            if (response.statusCode == 503) response.statusCode = 502;
-        
-                            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";
@@ -831,156 +796,11 @@ function runThePopup() {
     }
   
     function showNoticeAgain() {
-        chrome.storage.sync.set({"dontShowNotice": 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) {
@@ -1011,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;
 
@@ -1037,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
@@ -1050,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";
@@ -1059,24 +874,15 @@ 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 = errorMessage;
+                    SB.setUsernameStatus.innerText = getErrorMessageI(xmlhttp.status);
                 }
             });
-        });
 
 
         SB.setUsernameContainer.style.display = "none";
         SB.setUsername.style.display = "unset";
     }
-  
+
     //this is not a YouTube video page
     function displayNoVideo() {
         document.getElementById("loadingIndicator").innerText = chrome.i18n.getMessage("noVideoID");
@@ -1112,10 +918,8 @@ function runThePopup() {
             type: type,
             UUID: UUID
         }, function(response) {
-            console.log(response)
             if (response != undefined) {
                 //see if it was a success or failure
-                console.log(response)
                 if (response.successType == 1 || (response.successType == -1 && response.statusCode == 429)) {
                     //success (treat rate limits as a success)
                     addVoteMessage(chrome.i18n.getMessage("voted"), UUID)
@@ -1123,20 +927,14 @@ function runThePopup() {
                     //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";
     }
   
@@ -1165,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 = [];
                         }
@@ -1178,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({
@@ -1196,7 +993,6 @@ function runThePopup() {
                                 });
                             }
                         );
-                    });
                 }
             );
         });
@@ -1213,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 = [];
                         }
@@ -1231,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({
@@ -1245,38 +1040,27 @@ function runThePopup() {
                                 });
                             }
                         );
-                    });
                 }
             );
         });
     }
 
-    function setKeybind(startSponsorKeybind) {
-        document.getElementById("keybindButtons").style.display = "none";
+    /**
+     * Should skipping be disabled (visuals stay)
+     */
+    function toggleSkipping(disabled) {
+		SB.config.disableSkipping = disabled;
 
-        document.getElementById("keybindDescription").style.display = "initial";
-        document.getElementById("keybindDescription").innerText = chrome.i18n.getMessage("keybindDescription");
+        let hiddenButton = SB.disableSkipping;
+        let shownButton = SB.enableSkipping;
 
-        setStartSponsorKeybind = startSponsorKeybind;
-
-        document.addEventListener("keydown", onKeybindSet)
-    }
-
-    function onKeybindSet(e) {
-        e = e || window.event;
-        var key = e.key;
-
-        if (setStartSponsorKeybind) {
-            chrome.storage.sync.set({"startSponsorKeybind": key});
-        } else {
-            chrome.storage.sync.set({"submitKeybind": key});
+        if (!disabled) {
+            hiddenButton = SB.enableSkipping;
+            shownButton = SB.disableSkipping;
         }
 
-        document.removeEventListener("keydown", onKeybindSet);
-
-        document.getElementById("keybindDescription").innerText = chrome.i18n.getMessage("keybindDescriptionComplete") + " " + key;
-
-        document.getElementById("keybindButtons").style.display = "unset";
+        shownButton.style.display = "unset";
+        hiddenButton.style.display = "none";
     }
 
     //converts time in seconds to minutes
@@ -1315,6 +1099,18 @@ function runThePopup() {
         //submit this request
         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
 }
@@ -1322,7 +1118,6 @@ function runThePopup() {
 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,21 +22,33 @@ 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 { 
-            urlObject = new URL(url);
+        urlObject = new URL(url);
     } catch (e) {      
-            console.error("[SB] Unable to parse URL: " + url);
-            return false;
+        console.error("[SB] Unable to parse URL: " + url);
+        return false;
     }
 
     //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")) {
-        id = urlObject.searchParams.get("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/")) {
         try {
@@ -42,27 +57,215 @@ function getYouTubeVideoID(url) {
             console.error("[SB] Video ID not valid for " + 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("popupBody")[0].children;
+    var objects = document.getElementsByClassName("sponsorBlockPageBody")[0].children;
     for (var j = 0; j < objects.length; j++) {
         var obj = objects[j];
-
-        var valStrH = obj.innerHTML.toString();
-        var valNewH = valStrH.replace(/__MSG_(\w+)__/g, function(match, v1)
-        {
-            return v1 ? chrome.i18n.getMessage(v1) : "";
-        });
-
-        if(valNewH != valStrH)
-        {
-            obj.innerHTML = valNewH;
-        }
+        
+        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);
 
-        dontshowContainer.appendChild(dontShowAgainButton);
+        // 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,19 +324,17 @@ 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;
             }
         }
     }
+
+    changeNoticeTitle(title) {
+        let noticeElement = document.getElementById("sponsorSkipMessage" + this.idSuffix);
+
+        noticeElement.innerText = title;
+    }
     
     addNoticeInfoMessage(message, message2) {
         let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + this.idSuffix);
@@ -383,4 +425,4 @@ class SkipNotice {
         if (this.countdownInterval != -1) clearInterval(this.countdownInterval);
     }
 
-}
+}