diff --git a/template-alpine-js/package.json b/template-alpine-js/package.json
index d271a44..9e6232b 100644
--- a/template-alpine-js/package.json
+++ b/template-alpine-js/package.json
@@ -1,5 +1,6 @@
 {
   "name": "chrome-extension-alpine-js",
+  "displayName": "Alpine.js Chrome Extension",
   "version": "0.0.0",
   "author": "",
   "description": "",
diff --git a/template-alpine-js/src/manifest.js b/template-alpine-js/src/manifest.js
index 3b059b6..c45cdd6 100644
--- a/template-alpine-js/src/manifest.js
+++ b/template-alpine-js/src/manifest.js
@@ -1,8 +1,10 @@
 import { defineManifest } from '@crxjs/vite-plugin'
 import packageData from '../package.json'
 
+const isDev = process.env.NODE_ENV == 'development'
+
 export default defineManifest({
-  name: packageData.name,
+  name: `${packageData.displayName || packageData.name}${isDev ? ` ➡️ Dev` : ''}`,
   description: packageData.description,
   version: packageData.version,
   manifest_version: 3,
diff --git a/template-alpine-ts/package.json b/template-alpine-ts/package.json
index 45123df..9808996 100644
--- a/template-alpine-ts/package.json
+++ b/template-alpine-ts/package.json
@@ -1,5 +1,6 @@
 {
   "name": "chrome-extension-alpine-ts",
+  "displayName": "Alpine.ts Chrome Extension",
   "version": "0.0.0",
   "author": "",
   "description": "",
diff --git a/template-alpine-ts/src/manifest.ts b/template-alpine-ts/src/manifest.ts
index 60c644a..5970f7f 100644
--- a/template-alpine-ts/src/manifest.ts
+++ b/template-alpine-ts/src/manifest.ts
@@ -1,8 +1,11 @@
 import { defineManifest } from '@crxjs/vite-plugin'
 import packageData from '../package.json'
 
+//@ts-ignore
+const isDev = process.env.NODE_ENV == 'development'
+
 export default defineManifest({
-  name: packageData.name,
+  name: `${packageData.displayName || packageData.name}${isDev ? ` ➡️ Dev` : ''}`,
   description: packageData.description,
   version: packageData.version,
   manifest_version: 3,
diff --git a/template-inferno-js/package.json b/template-inferno-js/package.json
index dfee630..f0cb7d6 100644
--- a/template-inferno-js/package.json
+++ b/template-inferno-js/package.json
@@ -1,5 +1,6 @@
 {
   "name": "chrome-extension-inferno-js",
+  "displayName": "Inferno.js Chrome Extension",
   "version": "0.0.0",
   "author": "",
   "description": "",
diff --git a/template-inferno-js/src/manifest.js b/template-inferno-js/src/manifest.js
index 3b059b6..c45cdd6 100644
--- a/template-inferno-js/src/manifest.js
+++ b/template-inferno-js/src/manifest.js
@@ -1,8 +1,10 @@
 import { defineManifest } from '@crxjs/vite-plugin'
 import packageData from '../package.json'
 
+const isDev = process.env.NODE_ENV == 'development'
+
 export default defineManifest({
-  name: packageData.name,
+  name: `${packageData.displayName || packageData.name}${isDev ? ` ➡️ Dev` : ''}`,
   description: packageData.description,
   version: packageData.version,
   manifest_version: 3,
diff --git a/template-inferno-ts/package.json b/template-inferno-ts/package.json
index e96b69b..fca9b07 100644
--- a/template-inferno-ts/package.json
+++ b/template-inferno-ts/package.json
@@ -1,5 +1,6 @@
 {
   "name": "chrome-extension-inferno-ts",
+  "displayName": "Inferno.ts Chrome Extension",
   "version": "0.0.0",
   "author": "",
   "description": "",
diff --git a/template-inferno-ts/src/manifest.ts b/template-inferno-ts/src/manifest.ts
index 60c644a..5970f7f 100644
--- a/template-inferno-ts/src/manifest.ts
+++ b/template-inferno-ts/src/manifest.ts
@@ -1,8 +1,11 @@
 import { defineManifest } from '@crxjs/vite-plugin'
 import packageData from '../package.json'
 
+//@ts-ignore
+const isDev = process.env.NODE_ENV == 'development'
+
 export default defineManifest({
-  name: packageData.name,
+  name: `${packageData.displayName || packageData.name}${isDev ? ` ➡️ Dev` : ''}`,
   description: packageData.description,
   version: packageData.version,
   manifest_version: 3,
diff --git a/template-lit-js/package.json b/template-lit-js/package.json
index 31ee805..65d6f9e 100644
--- a/template-lit-js/package.json
+++ b/template-lit-js/package.json
@@ -1,5 +1,6 @@
 {
   "name": "chrome-extension-lit-js",
+  "displayName": "Lit.js Chrome Extension",
   "version": "0.0.0",
   "author": "",
   "description": "",
diff --git a/template-lit-js/src/manifest.js b/template-lit-js/src/manifest.js
index 3b059b6..c45cdd6 100644
--- a/template-lit-js/src/manifest.js
+++ b/template-lit-js/src/manifest.js
@@ -1,8 +1,10 @@
 import { defineManifest } from '@crxjs/vite-plugin'
 import packageData from '../package.json'
 
+const isDev = process.env.NODE_ENV == 'development'
+
 export default defineManifest({
-  name: packageData.name,
+  name: `${packageData.displayName || packageData.name}${isDev ? ` ➡️ Dev` : ''}`,
   description: packageData.description,
   version: packageData.version,
   manifest_version: 3,
diff --git a/template-lit-ts/package.json b/template-lit-ts/package.json
index 5720128..b32a094 100644
--- a/template-lit-ts/package.json
+++ b/template-lit-ts/package.json
@@ -1,5 +1,6 @@
 {
   "name": "chrome-extension-lit-ts",
+  "displayName": "Lit.ts Chrome Extension",
   "version": "0.0.0",
   "author": "",
   "description": "",
diff --git a/template-lit-ts/src/manifest.ts b/template-lit-ts/src/manifest.ts
index 60c644a..cc8b498 100644
--- a/template-lit-ts/src/manifest.ts
+++ b/template-lit-ts/src/manifest.ts
@@ -1,8 +1,12 @@
 import { defineManifest } from '@crxjs/vite-plugin'
+//@ts-ignore
 import packageData from '../package.json'
 
+//@ts-ignore
+const isDev = process.env.NODE_ENV == 'development'
+
 export default defineManifest({
-  name: packageData.name,
+  name: `${packageData.displayName || packageData.name}${isDev ? ` ➡️ Dev` : ''}`,
   description: packageData.description,
   version: packageData.version,
   manifest_version: 3,
diff --git a/template-preact-js/package.json b/template-preact-js/package.json
index d863bd9..fcbe727 100644
--- a/template-preact-js/package.json
+++ b/template-preact-js/package.json
@@ -1,5 +1,6 @@
 {
   "name": "chrome-extension-preact-js",
+  "displayName": "Preact.js Chrome Extension",
   "version": "0.0.0",
   "author": "",
   "description": "",
diff --git a/template-preact-js/src/manifest.js b/template-preact-js/src/manifest.js
index c00a230..aac939f 100644
--- a/template-preact-js/src/manifest.js
+++ b/template-preact-js/src/manifest.js
@@ -1,8 +1,10 @@
 import { defineManifest } from '@crxjs/vite-plugin'
 import packageData from '../package.json' assert { type: 'json' }
 
+const isDev = process.env.NODE_ENV == 'development'
+
 export default defineManifest({
-  name: packageData.name,
+  name: `${packageData.displayName || packageData.name}${isDev ? ` ➡️ Dev` : ''}`,
   description: packageData.description,
   version: packageData.version,
   manifest_version: 3,
diff --git a/template-preact-ts/package.json b/template-preact-ts/package.json
index aa694f5..3dfd682 100644
--- a/template-preact-ts/package.json
+++ b/template-preact-ts/package.json
@@ -1,5 +1,6 @@
 {
   "name": "chrome-extension-preact-ts",
+  "displayName": "Preact.ts Chrome Extension",
   "version": "0.0.0",
   "author": "",
   "description": "",
diff --git a/template-preact-ts/src/manifest.ts b/template-preact-ts/src/manifest.ts
index 60c644a..5970f7f 100644
--- a/template-preact-ts/src/manifest.ts
+++ b/template-preact-ts/src/manifest.ts
@@ -1,8 +1,11 @@
 import { defineManifest } from '@crxjs/vite-plugin'
 import packageData from '../package.json'
 
+//@ts-ignore
+const isDev = process.env.NODE_ENV == 'development'
+
 export default defineManifest({
-  name: packageData.name,
+  name: `${packageData.displayName || packageData.name}${isDev ? ` ➡️ Dev` : ''}`,
   description: packageData.description,
   version: packageData.version,
   manifest_version: 3,
diff --git a/template-react-js/src/manifest.js b/template-react-js/src/manifest.js
index c00a230..aac939f 100644
--- a/template-react-js/src/manifest.js
+++ b/template-react-js/src/manifest.js
@@ -1,8 +1,10 @@
 import { defineManifest } from '@crxjs/vite-plugin'
 import packageData from '../package.json' assert { type: 'json' }
 
+const isDev = process.env.NODE_ENV == 'development'
+
 export default defineManifest({
-  name: packageData.name,
+  name: `${packageData.displayName || packageData.name}${isDev ? ` ➡️ Dev` : ''}`,
   description: packageData.description,
   version: packageData.version,
   manifest_version: 3,
diff --git a/template-react-ts/src/manifest.ts b/template-react-ts/src/manifest.ts
index 60c644a..5970f7f 100644
--- a/template-react-ts/src/manifest.ts
+++ b/template-react-ts/src/manifest.ts
@@ -1,8 +1,11 @@
 import { defineManifest } from '@crxjs/vite-plugin'
 import packageData from '../package.json'
 
+//@ts-ignore
+const isDev = process.env.NODE_ENV == 'development'
+
 export default defineManifest({
-  name: packageData.name,
+  name: `${packageData.displayName || packageData.name}${isDev ? ` ➡️ Dev` : ''}`,
   description: packageData.description,
   version: packageData.version,
   manifest_version: 3,
diff --git a/template-solid-js/package.json b/template-solid-js/package.json
index 91d9768..02300d1 100644
--- a/template-solid-js/package.json
+++ b/template-solid-js/package.json
@@ -1,5 +1,6 @@
 {
   "name": "chrome-extension-solod-js",
+  "displayName": "Solid.js Chrome Extension",
   "version": "0.0.0",
   "author": "",
   "description": "",
diff --git a/template-solid-js/src/manifest.js b/template-solid-js/src/manifest.js
index 3b059b6..c45cdd6 100644
--- a/template-solid-js/src/manifest.js
+++ b/template-solid-js/src/manifest.js
@@ -1,8 +1,10 @@
 import { defineManifest } from '@crxjs/vite-plugin'
 import packageData from '../package.json'
 
+const isDev = process.env.NODE_ENV == 'development'
+
 export default defineManifest({
-  name: packageData.name,
+  name: `${packageData.displayName || packageData.name}${isDev ? ` ➡️ Dev` : ''}`,
   description: packageData.description,
   version: packageData.version,
   manifest_version: 3,
diff --git a/template-solid-ts/package.json b/template-solid-ts/package.json
index de83134..19d9483 100644
--- a/template-solid-ts/package.json
+++ b/template-solid-ts/package.json
@@ -1,5 +1,6 @@
 {
   "name": "chrome-extension-solid-ts",
+  "displayName": "Solid.ts Chrome Extension",
   "version": "0.0.0",
   "author": "",
   "description": "",
diff --git a/template-solid-ts/src/manifest.ts b/template-solid-ts/src/manifest.ts
index 60c644a..5970f7f 100644
--- a/template-solid-ts/src/manifest.ts
+++ b/template-solid-ts/src/manifest.ts
@@ -1,8 +1,11 @@
 import { defineManifest } from '@crxjs/vite-plugin'
 import packageData from '../package.json'
 
+//@ts-ignore
+const isDev = process.env.NODE_ENV == 'development'
+
 export default defineManifest({
-  name: packageData.name,
+  name: `${packageData.displayName || packageData.name}${isDev ? ` ➡️ Dev` : ''}`,
   description: packageData.description,
   version: packageData.version,
   manifest_version: 3,
diff --git a/template-svelte-js/package.json b/template-svelte-js/package.json
index 814a550..4b52486 100755
--- a/template-svelte-js/package.json
+++ b/template-svelte-js/package.json
@@ -1,5 +1,6 @@
 {
   "name": "chrome-extension-svelte-js",
+  "displayName": "Svelte.js Chrome Extension",
   "version": "0.0.0",
   "author": "",
   "description": "",
diff --git a/template-svelte-js/src/manifest.js b/template-svelte-js/src/manifest.js
index 3b059b6..c45cdd6 100644
--- a/template-svelte-js/src/manifest.js
+++ b/template-svelte-js/src/manifest.js
@@ -1,8 +1,10 @@
 import { defineManifest } from '@crxjs/vite-plugin'
 import packageData from '../package.json'
 
+const isDev = process.env.NODE_ENV == 'development'
+
 export default defineManifest({
-  name: packageData.name,
+  name: `${packageData.displayName || packageData.name}${isDev ? ` ➡️ Dev` : ''}`,
   description: packageData.description,
   version: packageData.version,
   manifest_version: 3,
diff --git a/template-svelte-ts/package.json b/template-svelte-ts/package.json
index 49995ae..0a5a3ec 100755
--- a/template-svelte-ts/package.json
+++ b/template-svelte-ts/package.json
@@ -1,5 +1,6 @@
 {
   "name": "chrome-extension-svelte-ts",
+  "displayName": "Svelte.ts Chrome Extension",
   "version": "0.0.0",
   "author": "",
   "description": "",
diff --git a/template-svelte-ts/src/manifest.ts b/template-svelte-ts/src/manifest.ts
index 60c644a..5970f7f 100644
--- a/template-svelte-ts/src/manifest.ts
+++ b/template-svelte-ts/src/manifest.ts
@@ -1,8 +1,11 @@
 import { defineManifest } from '@crxjs/vite-plugin'
 import packageData from '../package.json'
 
+//@ts-ignore
+const isDev = process.env.NODE_ENV == 'development'
+
 export default defineManifest({
-  name: packageData.name,
+  name: `${packageData.displayName || packageData.name}${isDev ? ` ➡️ Dev` : ''}`,
   description: packageData.description,
   version: packageData.version,
   manifest_version: 3,
diff --git a/template-vanilla-js/package.json b/template-vanilla-js/package.json
index 3f1a346..0bc4de1 100644
--- a/template-vanilla-js/package.json
+++ b/template-vanilla-js/package.json
@@ -1,5 +1,6 @@
 {
   "name": "chrome-extension-vanilla-js",
+  "displayName": "Vanilla.js Chrome Extension",
   "version": "0.0.0",
   "author": "",
   "description": "",
diff --git a/template-vanilla-js/src/manifest.js b/template-vanilla-js/src/manifest.js
index 3b059b6..c45cdd6 100644
--- a/template-vanilla-js/src/manifest.js
+++ b/template-vanilla-js/src/manifest.js
@@ -1,8 +1,10 @@
 import { defineManifest } from '@crxjs/vite-plugin'
 import packageData from '../package.json'
 
+const isDev = process.env.NODE_ENV == 'development'
+
 export default defineManifest({
-  name: packageData.name,
+  name: `${packageData.displayName || packageData.name}${isDev ? ` ➡️ Dev` : ''}`,
   description: packageData.description,
   version: packageData.version,
   manifest_version: 3,
diff --git a/template-vanilla-ts/package.json b/template-vanilla-ts/package.json
index 0743238..18b8bcc 100644
--- a/template-vanilla-ts/package.json
+++ b/template-vanilla-ts/package.json
@@ -1,5 +1,6 @@
 {
   "name": "chrome-extension-vanilla-ts",
+  "displayName": "Vanilla.ts Chrome Extension",
   "version": "0.0.0",
   "author": "",
   "description": "",
diff --git a/template-vanilla-ts/src/manifest.ts b/template-vanilla-ts/src/manifest.ts
index 60c644a..5970f7f 100644
--- a/template-vanilla-ts/src/manifest.ts
+++ b/template-vanilla-ts/src/manifest.ts
@@ -1,8 +1,11 @@
 import { defineManifest } from '@crxjs/vite-plugin'
 import packageData from '../package.json'
 
+//@ts-ignore
+const isDev = process.env.NODE_ENV == 'development'
+
 export default defineManifest({
-  name: packageData.name,
+  name: `${packageData.displayName || packageData.name}${isDev ? ` ➡️ Dev` : ''}`,
   description: packageData.description,
   version: packageData.version,
   manifest_version: 3,
diff --git a/template-vue-js/package.json b/template-vue-js/package.json
index 6ba94b2..86bc8fd 100644
--- a/template-vue-js/package.json
+++ b/template-vue-js/package.json
@@ -1,5 +1,6 @@
 {
   "name": "chrome-extension-vue-js",
+  "displayName": "Vue.js Chrome Extension",
   "version": "0.0.0",
   "author": "",
   "description": "",
diff --git a/template-vue-js/src/manifest.js b/template-vue-js/src/manifest.js
index c00a230..aac939f 100644
--- a/template-vue-js/src/manifest.js
+++ b/template-vue-js/src/manifest.js
@@ -1,8 +1,10 @@
 import { defineManifest } from '@crxjs/vite-plugin'
 import packageData from '../package.json' assert { type: 'json' }
 
+const isDev = process.env.NODE_ENV == 'development'
+
 export default defineManifest({
-  name: packageData.name,
+  name: `${packageData.displayName || packageData.name}${isDev ? ` ➡️ Dev` : ''}`,
   description: packageData.description,
   version: packageData.version,
   manifest_version: 3,
diff --git a/template-vue-ts/package.json b/template-vue-ts/package.json
index d6b6cb4..c1b06c3 100644
--- a/template-vue-ts/package.json
+++ b/template-vue-ts/package.json
@@ -1,5 +1,6 @@
 {
   "name": "chrome-extension-vue-ts",
+  "displayName": "Vue.ts Chrome Extension",
   "version": "0.0.0",
   "author": "",
   "description": "",
diff --git a/template-vue-ts/src/manifest.ts b/template-vue-ts/src/manifest.ts
index 60c644a..5970f7f 100644
--- a/template-vue-ts/src/manifest.ts
+++ b/template-vue-ts/src/manifest.ts
@@ -1,8 +1,11 @@
 import { defineManifest } from '@crxjs/vite-plugin'
 import packageData from '../package.json'
 
+//@ts-ignore
+const isDev = process.env.NODE_ENV == 'development'
+
 export default defineManifest({
-  name: packageData.name,
+  name: `${packageData.displayName || packageData.name}${isDev ? ` ➡️ Dev` : ''}`,
   description: packageData.description,
   version: packageData.version,
   manifest_version: 3,