firefox support beta

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 skidoodle
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

components/ServerInfo.tsx

@@ -1,4 +1,4 @@
-import { LinkIcon, ServerIcon, IdentificationIcon } from '@heroicons/react/24/outline';
+import { LinkIcon, ServerIcon, IdentificationIcon, MapPinIcon } from '@heroicons/react/24/outline';
 import { codes } from '@/utils/codes';
 
 export default function ServerInfo({ data }: { data: ServerData }) {
@@ -69,7 +69,7 @@ export default function ServerInfo({ data }: { data: ServerData }) {
         </div>
 
         <div className="flex items-center space-x-3">
-          <IdentificationIcon className="w-6 h-6 text-blue-400 flex-shrink-0" />
+          <MapPinIcon className="w-6 h-6 text-blue-400 flex-shrink-0" />
           <div>
             <p className="text-sm text-gray-400">Location</p>
             <p className="font-medium">{countryName}</p>

entrypoints/background.ts

@@ -49,18 +49,18 @@ async function handleTabUpdate(url: string) {
   }
 }
 
-chrome.tabs.onActivated.addListener(async activeInfo => {
-  const tab = await chrome.tabs.get(activeInfo.tabId)
+browser.tabs.onActivated.addListener(async activeInfo => {
+  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": "0.0.0",
+  "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',