Migrate to manifest V3

Works in Chrome but not in Firefox - to be fixed. Firefox is not pushing to V3 so not urgent to fix.

src/installer.js

@@ -0,0 +1,11 @@
+/*
+ * Chrome doesn't inject content scripts to existing tabs when extension is installed,
+ * so we do that here manually. "scripting" permission is required just for that.
+ * Firfox doesn't need this installer since it does the initial injecion for you.
+ */
+chrome.runtime.onInstalled.addListener(() =>
+	chrome.tabs.query({}, tabs => tabs.forEach(({ id }) => {
+		chrome.scripting.insertCSS({ target: { tabId: id }, files: ['basic.css'] });
+		chrome.scripting.executeScript({ target: { tabId: id }, files: ['contentscript.js'] });
+	}))
+);

src/manifest.json

@@ -4,29 +4,28 @@
   "description": "__MSG_appDesc__",
   "icons": { "48": "icon48.png", "128": "icon128.png" },
   "default_locale": "en",
-  "version": "1.8.6",
-  "manifest_version": 2,
-  "offline_enabled": true,
+  "version": "1.9.0",
+  "manifest_version": 3,
   "author": "Anton Gorbunov",
   "homepage_url": "https://github.com/sv3k/topscroll",
-  "permissions": ["<all_urls>", "storage"],
+  "permissions": ["storage", "scripting"],
+  "host_permissions": ["<all_urls>"],
+  "background": {
+    "service_worker": "installer.js"
+  },
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
       "css": ["basic.css"],
-      "js": ["contentscript.js"]
+      "js": ["contentscript.js"],
+      "run_at": "document_end"
     }
   ],
-  "background": {
-    "scripts": ["background.js"],
-    "persistent": false
-  },
-  "browser_action": {
+  "action": {
     "default_title": "__MSG_browserAction__",
     "default_popup": "options.html"
   },
   "options_ui": {
-    "page": "options.html",
-    "chrome_style": true
+    "page": "options.html"
   }
 }

src/options.js

@@ -1,6 +1,8 @@
+const DEFAULT_CONFIG = { panelType: 1 };
+
 function saveOptions() {
-	var type = document.getElementById('panel-type').value;
-	var status = document.getElementById('saved');
+	const type = document.getElementById('panel-type').value;
+	const status = document.getElementById('saved');
 	chrome.storage.sync.set({
 		panelType: type
 	}, () => {
@@ -13,11 +15,11 @@ function saveOptions() {
 }
 
 function showOptions() {
-	chrome.storage.sync.get({ panelType: 1 }, options => {
-		document.getElementById('panel-type').value = options.panelType;
-		var demo = document.getElementById('demo-text');
-		demo.className = 'demo demo-' + options.panelType;
-		demo.textContent = '← ' + chrome.i18n.getMessage('panelSize' + options.panelType + 'Desc');
+	chrome.storage.sync.get(DEFAULT_CONFIG, (config = DEFAULT_CONFIG) => {
+		document.getElementById('panel-type').value = config.panelType;
+		const demo = document.getElementById('demo-text');
+		demo.className = `demo demo-${config.panelType}`;
+		demo.textContent = '← ' + chrome.i18n.getMessage(`panelSize${config.panelType}Desc`);
 	});
 }
 
@@ -36,6 +38,6 @@ document.getElementById('panel-type').addEventListener('change', () => {
 // Make links work
 window.addEventListener('click', e => {
 	if (e.target.href !== undefined) {
-		chrome.tabs.create({ url:e.target.href })
+		chrome.tabs.create({ url: e.target.href })
 	}
 });