[PB-6379]:feat/add Firefox MV2 support

.github/workflows/build.yml

@@ -0,0 +1,78 @@
+name: Build
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    name: Build Chrome & Firefox
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Type check
+        run: yarn compile
+
+      - name: Build Chrome (MV3)
+        run: yarn build
+        env:
+          VITE_VPN_SERVER_ADDRESS: ${{ secrets.VITE_VPN_SERVER_ADDRESS }}
+          VITE_VPN_SERVER_PORT: ${{ secrets.VITE_VPN_SERVER_PORT }}
+          VITE_VPN_USERNAME: ${{ secrets.VITE_VPN_USERNAME }}
+          VITE_VPN_PASSWORD: ${{ secrets.VITE_VPN_PASSWORD }}
+          VITE_VPN_API_URL: ${{ secrets.VITE_VPN_API_URL }}
+          VITE_VPN_API_URL_STAGING: ${{ secrets.VITE_VPN_API_URL_STAGING }}
+          VITE_VPN_API_URL_DEVELOPMENT: ${{ secrets.VITE_VPN_API_URL_DEVELOPMENT }}
+          VITE_IP_API_URL: ${{ secrets.VITE_IP_API_URL }}
+          VITE_AUTH_HOST_URL: ${{ secrets.VITE_AUTH_HOST_URL }}
+          VITE_AUTH_HOST_URL_STAGING: ${{ secrets.VITE_AUTH_HOST_URL_STAGING }}
+          VITE_AUTH_HOST_URL_DEVELOPMENT: ${{ secrets.VITE_AUTH_HOST_URL_DEVELOPMENT }}
+          VITE_DRIVE_API_URL: ${{ secrets.VITE_DRIVE_API_URL }}
+          VITE_DRIVE_API_URL_STAGING: ${{ secrets.VITE_DRIVE_API_URL_STAGING }}
+          VITE_DRIVE_API_URL_DEVELOPMENT: ${{ secrets.VITE_DRIVE_API_URL_DEVELOPMENT }}
+
+      - name: Build Firefox (MV2)
+        run: yarn build:firefox
+        env:
+          VITE_VPN_SERVER_ADDRESS: ${{ secrets.VITE_VPN_SERVER_ADDRESS }}
+          VITE_VPN_SERVER_PORT: ${{ secrets.VITE_VPN_SERVER_PORT }}
+          VITE_VPN_USERNAME: ${{ secrets.VITE_VPN_USERNAME }}
+          VITE_VPN_PASSWORD: ${{ secrets.VITE_VPN_PASSWORD }}
+          VITE_VPN_API_URL: ${{ secrets.VITE_VPN_API_URL }}
+          VITE_VPN_API_URL_STAGING: ${{ secrets.VITE_VPN_API_URL_STAGING }}
+          VITE_VPN_API_URL_DEVELOPMENT: ${{ secrets.VITE_VPN_API_URL_DEVELOPMENT }}
+          VITE_IP_API_URL: ${{ secrets.VITE_IP_API_URL }}
+          VITE_AUTH_HOST_URL: ${{ secrets.VITE_AUTH_HOST_URL }}
+          VITE_AUTH_HOST_URL_STAGING: ${{ secrets.VITE_AUTH_HOST_URL_STAGING }}
+          VITE_AUTH_HOST_URL_DEVELOPMENT: ${{ secrets.VITE_AUTH_HOST_URL_DEVELOPMENT }}
+          VITE_DRIVE_API_URL: ${{ secrets.VITE_DRIVE_API_URL }}
+          VITE_DRIVE_API_URL_STAGING: ${{ secrets.VITE_DRIVE_API_URL_STAGING }}
+          VITE_DRIVE_API_URL_DEVELOPMENT: ${{ secrets.VITE_DRIVE_API_URL_DEVELOPMENT }}
+
+      - name: Upload Chrome build
+        uses: actions/upload-artifact@v4
+        with:
+          name: chrome-mv3
+          path: .output/chrome-mv3/
+          retention-days: 7
+
+      - name: Upload Firefox build
+        uses: actions/upload-artifact@v4
+        with:
+          name: firefox-mv2
+          path: .output/firefox-mv2/
+          retention-days: 7

src/entrypoints/background.ts

@@ -1,3 +1,4 @@
+import { browser } from 'wxt/browser'
 import { handleUserToken } from './utils/handleUserToken'
 import { clearProxySettings } from './popup/proxy.service'
 
@@ -15,13 +16,13 @@ function startInterval() {
 export default defineBackground(() => {
   const IP_API_URL = import.meta.env.VITE_IP_API_URL
 
-  chrome.runtime.onInstalled.addListener((details) => {
+  browser.runtime.onInstalled.addListener((details) => {
     if (details.reason === 'install') {
-      chrome.tabs.create({ url: 'https://internxt.com/vpn' })
+      browser.tabs.create({ url: 'https://internxt.com/vpn' })
     }
   })
 
-  chrome.runtime.onMessage.addListener((message, _, sendResponse) => {
+  browser.runtime.onMessage.addListener((message, _, sendResponse) => {
     if (message === 'GET_DATA') {
       fetch(`${IP_API_URL}/json`, {
         method: 'GET',
@@ -58,10 +59,9 @@ export default defineBackground(() => {
   }
 
   async function initializeLocalCache() {
-    const { userToken, connection } = await chrome.storage.local.get([
-      'userToken',
-      'connection',
-    ])
+    const result = await browser.storage.local.get(['userToken', 'connection'])
+    const userToken = result.userToken as { token: string } | undefined
+    const connection = result.connection as string | undefined
     console.log('INITIAL LOCAL STORAGE: ', userToken)
     localCache.token = userToken?.token ?? null
     localCache.connection = connection ?? null
@@ -70,14 +70,14 @@ export default defineBackground(() => {
   startInterval()
   initializeLocalCache()
 
-  chrome.storage.onChanged.addListener((changes, areaName) => {
+  browser.storage.onChanged.addListener((changes, areaName) => {
     if (areaName === 'local') {
       if (changes.userToken?.newValue) {
-        localCache.token = changes.userToken.newValue?.token ?? null
+        localCache.token = (changes.userToken.newValue as { token: string })?.token ?? null
         startInterval()
       }
       if (changes.connection?.newValue) {
-        localCache.connection = changes.connection.newValue ?? null
+        localCache.connection = (changes.connection.newValue as string) ?? null
       }
     }
   })

src/entrypoints/components/StatusComponent.tsx

@@ -1,7 +1,7 @@
-import { VPN_STATUS_SWITCH } from '../constants'
+import { VPN_STATUS } from '~/entrypoints/popup/App'
 
 interface StatusComponentProps {
-  status: VPN_STATUS_SWITCH
+  status: VPN_STATUS
 }
 
 export const StatusComponent = ({ status }: StatusComponentProps) => {

src/entrypoints/components/dropdown/components/DropdownSection.tsx

@@ -1,3 +1,4 @@
+import { browser } from 'wxt/browser'
 import { translate } from '@/constants'
 import { SectionItemProps, SectionProps } from '../Dropdown'
 import { DropdownItem } from './DropdownItem'
@@ -16,7 +17,7 @@ export const DropdownSection = ({
   onItemClicked,
 }: DropdownSectionProps) => {
   const handleUpgradeButtonClicked = () => {
-    chrome.tabs.create({ url: 'https://internxt.com/pricing' })
+    browser.tabs.create({ url: 'https://internxt.com/pricing' })
   }
   return (
     <div

src/entrypoints/content/index.ts

@@ -1,3 +1,4 @@
+import { browser } from 'wxt/browser'
 import { getAppUrl } from '../utils/getUrl'
 
 const POST_MESSAGE_SOURCE = 'drive-extension'
@@ -51,22 +52,21 @@ export default defineContentScript({
           if (eventMessage === MESSAGES.USER_TOKEN) {
             const token = event.data.payload.token
 
-            chrome.storage.local.set(
-              {
+            browser.storage.local
+              .set({
                 userToken: {
                   token,
                   type: 'user',
                 },
-              },
-              () => {
+              })
+              .then(() => {
                 console.log(
                   'The user has been authenticated in the VPN extension',
                 )
-              },
-            )
+              })
           } else if (eventMessage === MESSAGES.USER_LOG_OUT) {
-            chrome.storage.local.clear(async () => {
-              await chrome.runtime.sendMessage('RESET_PROXY')
+            browser.storage.local.clear().then(async () => {
+              await browser.runtime.sendMessage('RESET_PROXY')
               console.log('The user has been logged out from the VPN extension')
             })
           }

src/entrypoints/popup/App.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { browser } from 'wxt/browser'
 
 import { clearProxySettings, updateProxySettings } from './proxy.service'
 import { ConnectionDetails } from '../components/ConnectionDetails'
@@ -51,7 +52,7 @@ export const App = () => {
 
   const initialAppState = async () => {
     try {
-      const storageData = (await chrome.storage.local.get([
+      const storageData = (await browser.storage.local.get([
         'vpnStatus',
         'userData',
         'userToken',
@@ -100,7 +101,7 @@ export const App = () => {
 
   const onConnectVpn = async () => {
     await updateProxySettings()
-    const userData = await chrome.runtime.sendMessage('GET_DATA')
+    const userData = await browser.runtime.sendMessage('GET_DATA')
     setUserData(userData)
     await storageService.saveVpnStatus('ON', userData)
 
@@ -218,7 +219,7 @@ export const App = () => {
   const dropdownSections = getDropdownSections(availableLocations)
 
   return (
-    <div className="flex flex-col h-screen w-96 bg-white">
+    <div className="flex flex-col min-h-fit w-96 bg-white">
       {/* Main section (logo, title, description) */}
       <div className="flex flex-col p-5 space-y-5">
         <ConnectionDetails

src/entrypoints/popup/proxy.service.ts

@@ -13,17 +13,17 @@ async function clearProxyCache() {
   options.origins.push('https://' + rootDomain)
 
   const types = { cookies: true }
-  chrome.browsingData.remove(options, types, function () {
+  browser.browsingData.remove(options, types).then(() => {
     console.log('PROXY CACHE REMOVED')
   })
 }
 
 export async function updateProxySettings() {
   const proxyConfig = {
-    mode: 'fixed_servers',
+    mode: 'fixed_servers' as const,
     rules: {
       singleProxy: {
-        scheme: 'http',
+        scheme: 'http' as const,
         host: VPN_CONFIG.HOST,
         port: VPN_CONFIG.PORT,
       },
@@ -43,7 +43,7 @@ export async function updateProxySettings() {
 
 export async function clearProxySettings() {
   const proxyConfig = {
-    mode: 'system',
+    mode: 'system' as const,
   }
 
   browser.proxy.settings

src/entrypoints/services/storage.service.ts

@@ -1,3 +1,4 @@
+import { browser } from 'wxt/browser'
 import { UserData, VPN_STATUS, VPNLocation } from '../popup/App'
 
 type TokenType = 'anonymous' | 'user'
@@ -6,7 +7,7 @@ export const saveUserToken = async (
   tokenType: TokenType,
   userToken: string
 ) => {
-  await chrome.storage.local.set({
+  await browser.storage.local.set({
     userToken: {
       token: userToken,
       type: tokenType,
@@ -18,12 +19,12 @@ export const getUserToken = async (): Promise<{
   token: string
   type: TokenType
 }> => {
-  const storageData = await chrome.storage.local.get('userToken')
+  const storageData = await browser.storage.local.get('userToken')
   return storageData.userToken as { token: string; type: TokenType }
 }
 
 export const saveUserConnection = async (connection: VPNLocation) => {
-  await chrome.storage.local.set({
+  await browser.storage.local.set({
     connection,
   })
 }
@@ -32,7 +33,7 @@ export const saveVpnStatus = async (
   vpnStatus: VPN_STATUS,
   userData: UserData
 ) => {
-  await chrome.storage.local.set({
+  await browser.storage.local.set({
     vpnStatus,
     userData,
   })