Update proxy badge on every tab update

mullvad · Nov 24, 2023 · 95d9197 · 95d9197
1 parent b287b8a
commit 95d9197
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 72 deletions.
diff --git a/src/background/main.ts b/src/background/main.ts
@@ -2,7 +2,7 @@ import { onMessage } from 'webext-bridge/background';
 
 import { addExtListeners } from '@/helpers/extensions';
 import { DataAccount, initLeta, letaLogin, letaLogout } from '@/helpers/leta';
-import { initPageAction } from '@/helpers/pageAction';
+import { initBrowserAction } from '@/helpers/browserAction';
 import { initProxyRequests } from '@/helpers/socksProxy';
 
 // only on dev mode
@@ -17,8 +17,8 @@ addExtListeners();
 // Autologin to Leta on startup and add listeners
 initLeta();
 
-// Update pageAction in tabs and add listeners
-initPageAction();
+// Update browserAction for tabs and add listeners
+initBrowserAction();
 
 // Add Leta Login message listeners
 onMessage<DataAccount>('leta-login', async ({ data }) => {

diff --git a/src/composables/useExtBadge.ts b/src/composables/useExtBadge.ts
diff --git a/src/composables/useSocksProxy.ts b/src/composables/useSocksProxy.ts
@@ -10,10 +10,8 @@ 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);
@@ -28,7 +26,7 @@ const disableGlobalProxy = () => {
     ...globalProxyDetails.value,
     socksEnabled: false,
   };
-  setExtBadge('');
+  // setExtBadge('');
   updateConnection();
 };
 
@@ -37,7 +35,7 @@ const enableGlobalProxy = () => {
     ...globalProxyDetails.value,
     socksEnabled: true,
   };
-  setExtBadge('P');
+  // setExtBadge('P');
   updateConnection();
 };
 

diff --git a/src/helpers/browserAction.ts b/src/helpers/browserAction.ts
@@ -0,0 +1,50 @@
+import { getglobalProxyDetails } from '@/helpers/socksProxy';
+import { ProxyDetails } from './socksProxy.types';
+
+export const initBrowserAction = () => {
+  // Each time a tab is updated, reset the browserAction for that tab
+  browser.tabs.onUpdated.addListener(updatedTabListener);
+
+  updateTabsProxyBadges();
+};
+
+// Update a tab browserAction badge & title
+const updateTabProxyBadge = async (tabId: number, globalProxyDetails: ProxyDetails) => {
+  const tooltip = `Server: ${globalProxyDetails.server}\nProtocol: ${globalProxyDetails.protocol}\nProxy DNS: ${globalProxyDetails.proxyDNS}`;
+
+  if (globalProxyDetails.socksEnabled) {
+    browser.browserAction.setTitle({ tabId, title: tooltip });
+    setTabExtBadge(tabId);
+  } else {
+    browser.pageAction.setTitle({ tabId, title: 'Proxy not in use' });
+    setTabExtBadge(tabId, false);
+  }
+};
+
+// Update state of the proxy badge & title, for all tabs
+const updateTabsProxyBadges = async () => {
+  const tabs = browser.tabs.query({});
+  const globalProxyDetails = await getglobalProxyDetails();
+
+  tabs.then((tabs) => {
+    for (const tab of tabs) {
+      updateTabProxyBadge(tab.id!, globalProxyDetails);
+    }
+  });
+};
+
+const updatedTabListener = async (tabId: number) => {
+  const globalProxyDetails = await getglobalProxyDetails();
+
+  updateTabProxyBadge(tabId, globalProxyDetails);
+};
+
+const setTabExtBadge = (tabId: number, proxy = true) => {
+  if (proxy) {
+    browser.browserAction.setBadgeText({ text: 'P', tabId });
+    browser.browserAction.setBadgeBackgroundColor({ color: '#ffd524', tabId });
+    browser.browserAction.setBadgeTextColor({ color: 'black', tabId });
+  } else {
+    browser.browserAction.setBadgeText({ text: '', tabId });
+  }
+};
diff --git a/src/helpers/pageAction.ts b/src/helpers/pageAction.ts
diff --git a/src/helpers/socksProxy.ts b/src/helpers/socksProxy.ts
@@ -22,7 +22,7 @@ const handleProxyRequest = async (details: browser.proxy._OnRequestDetails) => {
   const { excludedHosts } = await browser.storage.local.get('excludedHosts');
   const { customProxies } = await browser.storage.local.get('customProxies');
 
-  // TODO implement these features
+  // TODO implement random proxy
   const { randomProxyActive } = await browser.storage.local.get('randomProxyActive');
 
   const globalConfigParsed = JSON.parse(globalProxy);