update extension to use manifest v3

package.json

@@ -59,7 +59,7 @@
     "@babel/core": "^7.10.1",
     "@babel/plugin-proposal-optional-chaining": "^7.10.1",
     "@babel/preset-env": "^7.10.1",
-    "@types/chrome": "^0.0.114",
+    "@types/chrome": "^0.0.193",
     "@types/dedent": "^0.7.0",
     "@types/jest": "^26.0.4",
     "@types/lodash": "^4.14.157",

src/background/contextmenu.ts

@@ -4,54 +4,32 @@ import { OpenStylebotFromContextMenu } from '@stylebot/types';
 import BackgroundPageUtils from './utils';
 
 const CONTEXT_MENU_ID = 'stylebot-contextmenu';
-
-const StyleElementContextMenu = () => {
-  chrome.contextMenus.create({
-    contexts: ['all'],
-    title: t('style_element'),
-    parentId: CONTEXT_MENU_ID,
-
-    onclick: (_info: chrome.contextMenus.OnClickData, tab: chrome.tabs.Tab) => {
-      if (tab.id) {
-        const message: OpenStylebotFromContextMenu = {
-          name: 'OpenStylebotFromContextMenu',
-        };
-
-        chrome.tabs.sendMessage(tab.id, message);
-      }
-    },
-  });
-};
-
-const ParentContextMenu = () => {
-  chrome.contextMenus.create({
-    id: CONTEXT_MENU_ID,
-    title: 'Stylebot',
-    contexts: ['all'],
-  });
-};
-
-const ViewOptionsContextMenu = () => {
-  chrome.contextMenus.create({
-    contexts: ['all'],
-    title: t('view_options'),
-    parentId: CONTEXT_MENU_ID,
-    onclick: () => {
-      chrome.tabs.create({
-        active: true,
-        url: 'options/index.html',
-      });
-    },
-  });
-};
+const VIEW_OPTIONS_MENU_ITEM_ID = 'view-options';
+const STYLE_ELEMENT_MENU_ITEM_ID = 'style-element';
 
 const ContextMenu = {
   init(): void {
     this.remove();
 
-    ParentContextMenu();
-    StyleElementContextMenu();
-    ViewOptionsContextMenu();
+    chrome.contextMenus.create({
+      id: CONTEXT_MENU_ID,
+      title: 'Stylebot',
+      contexts: ['all'],
+    });
+
+    chrome.contextMenus.create({
+      contexts: ['all'],
+      title: t('style_element'),
+      parentId: CONTEXT_MENU_ID,
+      id: STYLE_ELEMENT_MENU_ITEM_ID,
+    });
+
+    chrome.contextMenus.create({
+      contexts: ['all'],
+      title: t('view_options'),
+      parentId: CONTEXT_MENU_ID,
+      id: VIEW_OPTIONS_MENU_ITEM_ID,
+    });
   },
 
   update(tab: chrome.tabs.Tab): void {
@@ -64,18 +42,43 @@ const ContextMenu = {
       chrome.contextMenus.update(CONTEXT_MENU_ID, {
         documentUrlPatterns: ['<all_urls>'],
       });
-    } else {
-      // If it isn't a valid url, hide the contextMenu
-      // Set the document pattern to foo/*random*
-      chrome.contextMenus.update(CONTEXT_MENU_ID, {
-        documentUrlPatterns: ['http://foo/' + Math.random()],
-      });
+
+      return;
     }
+
+    // If it isn't a valid url, hide the contextMenu
+    // Set the document pattern to foo/*random*
+    chrome.contextMenus.update(CONTEXT_MENU_ID, {
+      documentUrlPatterns: ['http://foo/' + Math.random()],
+    });
   },
 
   remove(): void {
     chrome.contextMenus.removeAll();
   },
 };
 
+chrome.contextMenus.onClicked.addListener((info, tab) => {
+  switch (info.menuItemId) {
+    case STYLE_ELEMENT_MENU_ITEM_ID:
+      if (tab?.id) {
+        const message: OpenStylebotFromContextMenu = {
+          name: 'OpenStylebotFromContextMenu',
+        };
+
+        chrome.tabs.sendMessage(tab.id, message);
+      }
+
+      break;
+
+    case VIEW_OPTIONS_MENU_ITEM_ID:
+      chrome.tabs.create({
+        active: true,
+        url: 'options/index.html',
+      });
+
+      break;
+  }
+});
+
 export default ContextMenu;

src/background/index.ts

@@ -1,40 +1,21 @@
 import 'crx-hotreload';
 
-import Cache from './cache';
-import Listeners from './listeners';
+import './listeners';
+
 import ContextMenu from './contextmenu';
 import DefaultShortcutUpdate from './default-shortcut-update';
 import StylesMetadataUpdate from './styles-metadata-update';
 import StylesModifiedTimeUpdate from './styles-modified-time-update';
 
-import { setNotification } from '@stylebot/utils';
-
 (async () => {
   await DefaultShortcutUpdate();
   await StylesMetadataUpdate();
   await StylesModifiedTimeUpdate();
-
-  const { styles, options } = await Cache.init();
-
-  if (options.get('contextMenu')) {
-    ContextMenu.init();
-  }
-
-  Listeners.init(styles, options);
-
-  chrome.browserAction.setBadgeBackgroundColor({
-    color: '#555',
-  });
 })();
 
-chrome.runtime.onInstalled.addListener(async ({ reason }) => {
-  if (reason === 'install') {
-    chrome.tabs.create({
-      url: 'https://stylebot.dev/help'
-    });
-
-    setNotification('release/3.1', true);
-  }
+chrome.runtime.setUninstallURL('https://stylebot.dev/goodbye');
+chrome.action.setBadgeBackgroundColor({
+  color: '#555',
 });
 
-chrome.runtime.setUninstallURL('https://stylebot.dev/goodbye');
+ContextMenu.init();