Merge pull request #64 from sakibul-islam/dev-indicator

Show development mode indicator in browser
guocaoyi · Dec 20, 2023 · eaa3903 · eaa3903
2 parents 83181c7 + 0b403c9
commit eaa3903
Show file tree

Hide file tree

Showing 34 changed files with 82 additions and 20 deletions.
diff --git 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
@@ -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,
@@ -19,13 +21,13 @@ export default defineManifest({
   options_page: 'options.html',
   devtools_page: 'devtools.html',
   background: {
-    service_worker: 'src/background/index.ts',
+    service_worker: 'src/background/index.js',
     type: 'module',
   },
   content_scripts: [
     {
       matches: ['http://*/*', 'https://*/*'],
-      js: ['src/contentScript/index.ts'],
+      js: ['src/contentScript/index.js'],
     },
   ],
   side_panel: {

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,