distinguish between the dev version of the extension and the one pushed to the store

Author: ghazi-git

CHANGELOG.md

@@ -5,6 +5,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/).
 
 ## [Unreleased]
 
+### Added
+
+- Distinguish the extension installed in dev mode from the one installed from the Chrome Web Store.
+
 ## [1.0.1] - 2025-11-28
 
 ### Fixed

manifest.config.js

@@ -2,9 +2,12 @@ import { defineManifest } from "@crxjs/vite-plugin";
 
 import pkg from "./package.json";
 
-export default defineManifest({
+export default defineManifest(async (env) => ({
   manifest_version: 3,
-  name: "IndexedDB Browser",
+  name:
+    env.mode === "development"
+      ? "IndexedDB Browser (DEV)"
+      : "IndexedDB Browser",
   version: pkg.version,
   description:
     "Chrome extension that adds a DevTools panel to add, edit, delete and view IndexedDB data in a table.",
@@ -18,8 +21,11 @@ export default defineManifest({
   },
   devtools_page: "src/devtools/index.html",
   action: {
-    default_icon: "public/idb-browser-48x48.png",
+    default_icon:
+      env.mode === "development"
+        ? "public/idb-browser-dev.png"
+        : "public/idb-browser-48x48.png",
     default_popup: "src/popup.html",
     default_title: "IndexedDB Browser",
   },
-});
+}));

public/idb-browser-dev.png

@@ -2,14 +2,16 @@ import pkg from "../../../../package.json";
 import styles from "./AboutExtension.module.css";
 
 export default function AboutExtension() {
+  const version = () => (import.meta.env.DEV ? "DEV" : `v${pkg.version}`);
+
   return (
     <div class={styles.about}>
       <a
         href="https://github.com/ghazi-git/indexeddb-browser/releases"
         title="https://github.com/ghazi-git/indexeddb-browser/releases"
         target="_blank"
       >
-        v{pkg.version}
+        {version()}
       </a>
       <a
         href="https://github.com/ghazi-git/indexeddb-browser/issues"

src/devtools/components/sidebar/AboutExtension.tsx

@@ -1 +1,2 @@
-chrome.devtools.panels.create("IndexedDB", "", "/src/devtools/panel.html");
+const panelName = import.meta.env.DEV ? "IndexedDB (DEV)" : "IndexedDB";
+chrome.devtools.panels.create(panelName, "", "/src/devtools/panel.html");