Merge branch 'main' into docs/google-drive-sync

.vscode/settings.json

@@ -2,7 +2,7 @@
   "editor.formatOnSave": true,
   "vetur.validation.template": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "eslint.validate": ["javascript", "vue", "typescript"]
 }

README.md

@@ -1,11 +1,10 @@
 # Stylebot
 
-![CI](https://github.com/ankit/stylebot/workflows/CI/badge.svg)
+![Build](https://github.com/ankit/stylebot/actions/workflows/build.yml/badge.svg)
 [![Kofi](https://badgen.net/badge/icon/kofi?icon=kofi&label)](https://ko-fi.com/stylebot)
 [![Chrome Webstore Version](https://img.shields.io/chrome-web-store/v/oiaejidbmkiecgbjeifoejpgmdaleoha)](https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha)
 [![Chrome Users](https://badgen.net/chrome-web-store/users/oiaejidbmkiecgbjeifoejpgmdaleoha)](https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha)
 [![Webstore Rating](https://img.shields.io/chrome-web-store/stars/oiaejidbmkiecgbjeifoejpgmdaleoha)](https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha)
-[![Follow on Twitter](https://badgen.net/twitter/follow/ahujaankit)](https://twitter.com/ahujaankit)
 ![License](https://img.shields.io/github/license/ankit/stylebot)
 
 Stylebot is a browser extension that lets you change the appearance of the web instantly.
@@ -50,8 +49,7 @@ If you would like to <strong>add a new feature</strong> to Stylebot or <strong>f
 - Open `chrome://extensions` page.
 - Disable the official Stylebot version.
 - Enable the Developer mode.
-- Click Load unpacked extension button
-- Navigate to the project's `dist/` folder
+- Load unpacked `dist/` as extension
 
 ### Google Drive Sync
 

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",
@@ -75,7 +75,6 @@
     "bootstrap-vue": "^2.15.0",
     "copy-webpack-plugin": "^6.0.1",
     "cross-env": "^7.0.2",
-    "crx-hotreload": "^1.0.4",
     "css-loader": "^3.5.3",
     "cssnano": "^4.1.10",
     "date-fns": "^2.16.1",
@@ -87,7 +86,6 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-vue": "^6.2.2",
     "fibers": "^5.0.0",
-    "fork-ts-checker-webpack-plugin": "^5.0.7",
     "hotkeys-js": "^3.8.1",
     "husky": "^4.2.5",
     "jest": "^26.1.0",

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,19 @@
-import 'crx-hotreload';
+import './listeners';
 
-import Cache from './cache';
-import Listeners from './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();