fix: fix hmr issues

oe · Dec 10, 2023 · 323c3ac · 323c3ac
1 parent ff56e13
commit 323c3ac
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # Browser extension boilerplate
-Base on [Parcel](https://parceljs.org/recipes/web-extension/), an magic bundler that supports all technologies you familiar with(react/vue/typescript/less/scss, etc), supports the standard [Web Extension](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions) APIs, for chrome that's [Manifest V2](https://developer.chrome.com/docs/extensions/mv2/getstarted/).
+Base on [Parcel](https://parceljs.org/recipes/web-extension/), an magic bundler that supports all technologies you familiar with(react/vue/typescript/less/scss, etc), supports the standard [Web Extension](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions) APIs, for chrome that's [Manifest V3](https://developer.chrome.com/docs/extensions/mv3/getstarted/).
 
 ## Features
 1. dev mode, autorefresh when developing, without concern about [CSP](https://developer.chrome.com/extensions/contentSecurityPolicy)
@@ -33,4 +33,4 @@ run `yarn build`(or `npm run build`) in your shell, then you will get a file `ex
 * [parcel](https://parceljs.org/getting-started/webapp/)
 * [parcel for web extension](https://parceljs.org/recipes/web-extension/)
 * [Web Extension via MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
-* [Chrome extension, Manifest V2](https://developer.chrome.com/docs/extensions/mv2/getstarted/).
+* [Chrome extension, Manifest V3](https://developer.chrome.com/docs/extensions/mv3/getstarted/).
diff --git a/package.json b/package.json
@@ -18,8 +18,8 @@
     }
   },
   "scripts": {
-    "start": "parcel src/manifest.json --host localhost --target webext-dev --config @parcel/config-webextension",
-    "dev": "npm run start",
+    "start": "npm run dev",
+    "dev": "parcel watch src/manifest.json --host localhost --target webext-dev --config @parcel/config-webextension",
     "clean": "node scripts/clean.js",
     "prebuild": "npm run clean",
     "build": "parcel build src/manifest.json --no-source-maps --target webext-prod --config @parcel/config-webextension",
@@ -31,5 +31,8 @@
     "@parcel/transformer-sass": "^2.10.3",
     "parcel": "^2.10.3",
     "zip-folder": "^1.0.0"
+  },
+  "engines": {
+    "node": ">=12.10.0"
   }
 }
diff --git a/src/browser-action/index.html b/src/browser-action/index.html
@@ -8,6 +8,6 @@
   <link rel="stylesheet" href="style.scss">
 </head>
 <body>
-  <div>This is Popup page</div>
+  <div id="root">This is Popup page</div>
 </body>
 </html>
diff --git a/src/browser-action/style.scss b/src/browser-action/style.scss
@@ -1,9 +1,10 @@
 body {
   min-width: 300px;
   min-height: 200px;
-  background-color: lightblue;
+  background-color: #efefef;
 }
-div {
+#root {
+  padding-top: 80px;
   font-size: large;
   text-align: center;
 }
diff --git a/src/manifest.json b/src/manifest.json
@@ -10,7 +10,8 @@
     "default_popup": "browser-action/index.html"
   },
   "options_ui": {
-    "page": "options/index.html"
+    "page": "options/index.html",
+    "open_in_tab": true
   },
   "content_scripts": [
     {