firefox support beta

entrypoints/background.ts

@@ -49,18 +49,18 @@ async function handleTabUpdate(url: string) {
   }
 }
 
-chrome.tabs.onActivated.addListener(async activeInfo => {
+browser.tabs.onActivated.addListener(async activeInfo => {
-  const tab = await chrome.tabs.get(activeInfo.tabId)
+  const tab = await browser.tabs.get(activeInfo.tabId)
   if (tab.url) await handleTabUpdate(tab.url)
 })
 
-chrome.tabs.onUpdated.addListener(async (_tabId, changeInfo) => {
+browser.tabs.onUpdated.addListener(async (_tabId, changeInfo) => {
   if (changeInfo.url) await handleTabUpdate(changeInfo.url)
 })
 
 export default defineBackground({
   main() {
-    chrome.runtime.onMessage.addListener((request, _sender, sendResponse) => {
+    browser.runtime.onMessage.addListener((request: any, _sender, sendResponse) => {
       if (request.type === 'FETCH_SERVER_INFO') {
         ;(async () => {
           try {
@@ -99,6 +99,9 @@ export default defineBackground({
         })()
         return true
       }
+
+      sendResponse({ error: 'Unknown request type', data: null })
+      return true
     })
   },
 })

hooks/useTabData.ts

@@ -1,3 +1,8 @@
+import { useState, useEffect } from 'react';
+import browser from 'webextension-polyfill';
+import { isPrivateIP } from '@/utils';
+import { FetchServerInfoRequest, FetchServerInfoResponse, ServerData } from '@/utils/model';
+
 export function useTabData() {
   const [data, setData] = useState<ServerData | null>(null)
   const [loading, setLoading] = useState(true)
@@ -6,7 +11,7 @@ export function useTabData() {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const [tab] = await chrome.tabs.query({
+        const [tab] = await browser.tabs.query({
           active: true,
           currentWindow: true,
         })
@@ -43,7 +48,7 @@ export function useTabData() {
           })
         }
 
-        const response = await chrome.runtime.sendMessage({
+        const response = await browser.runtime.sendMessage<FetchServerInfoRequest, FetchServerInfoResponse>({
           type: 'FETCH_SERVER_INFO',
           hostname: hostname,
         })

package.json

@@ -2,7 +2,7 @@
   "name": "hostinfo",
   "description": "Receive information of a domain directly in the browser when browsing a website",
   "private": true,
-  "version": "1.1",
+  "version": "1.2",
   "type": "module",
   "scripts": {
     "dev": "wxt",

utils/icon.ts

@@ -3,9 +3,9 @@ export async function updateIcon(countryCode: string | null) {
     countryCode?.match(/^[A-Z]{2}$/i)?.[0]?.toLowerCase() || 'unknown'
 
   const loadImageBitmap = async (code: string): Promise<ImageBitmap> => {
-    const url = chrome.runtime.getURL(`${code}.webp`)
+    const url = browser.runtime.getURL("/")
     try {
-      const response = await fetch(url)
+      const response = await fetch(url + `${code}.webp`)
       if (!response.ok) throw new Error('Flag not found')
       const blob = await response.blob()
       return await createImageBitmap(blob)

utils/model.ts

@@ -13,3 +13,13 @@ export interface DNSEntry {
   type: number
   data: string
 }
+
+export interface FetchServerInfoRequest {
+  type: 'FETCH_SERVER_INFO';
+  hostname: string;
+}
+
+export interface FetchServerInfoResponse {
+  error?: string;
+  data?: ServerData;
+}

wxt.config.ts

@@ -2,10 +2,10 @@ import { defineConfig } from 'wxt';
 import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
-  extensionApi: 'chrome',
+  extensionApi: 'webextension-polyfill',
   modules: ['@wxt-dev/module-react'],
   manifest: {
-    permissions: ['tabs', 'activeTab', 'webRequest', 'file://*', 'debugger'],
+    permissions: ['tabs', 'activeTab', 'webRequest'],
     host_permissions: ['https://ip.albert.lol/*', 'https://dns.google/*', 'https://flagcdn.com/*'],
     action: {
       default_title: 'Host Info',