Set 'P' badge when proxy is toggled on

src/composables/useExtBadge.ts

@@ -0,0 +1,13 @@
+const setExtBadge = (text: string) => {
+  browser.browserAction.setBadgeBackgroundColor({ color: '#ffd524' });
+  browser.browserAction.setBadgeTextColor({ color: 'black' });
+  browser.browserAction.setBadgeText({ text });
+};
+
+const useExtBadge = () => {
+  return {
+    setExtBadge,
+  };
+};
+
+export default useExtBadge;

src/composables/useSocksProxy.ts

@@ -10,8 +10,10 @@ import getSocksIpForProtocol from './utils/getSocksIpForProtocol';
 
 import useStore from '@/composables/useStore';
 import useConnection from '@/composables/useConnection';
+import useExtBadge from '@/composables/useExtBadge';
 
 const { connection, updateConnection } = useConnection();
+const { setExtBadge } = useExtBadge();
 const { globalProxyDetails, globalProxy, customProxies, customProxiesDetails } = useStore();
 
 const globalProxyEnabled = computed(() => globalProxyDetails.value.socksEnabled);
@@ -26,6 +28,7 @@ const disableGlobalProxy = () => {
     ...globalProxyDetails.value,
     socksEnabled: false,
   };
+  setExtBadge('');
   updateConnection();
 };
 
@@ -34,6 +37,7 @@ const enableGlobalProxy = () => {
     ...globalProxyDetails.value,
     socksEnabled: true,
   };
+  setExtBadge('P');
   updateConnection();
 };
 
@@ -45,7 +49,7 @@ const initGlobalProxy = async (
   protocol: string,
 ) => {
   // Create a default globalProxy if there's none yet
-  // We don't do it it in the bakground script, because we don't want to make a request on extension start
+  // We don't do it it in the background script, because we don't want to make a request on extension start
   if (Object.keys(globalProxy.value).length !== 4) {
     const socksIp = getSocksIpForProtocol(protocol);