👷 集成react devtools

Author: CodFrm

package.json

@@ -14,6 +14,7 @@
     "typecheck": "tsc --noEmit",
     "build": "cross-env NODE_ENV=production rspack build",
     "dev": "cross-env NODE_ENV=development rspack",
+    "dev:react-devtools": "cross-env NODE_ENV=development REACT_DEVTOOLS=true rspack",
     "dev:noMap": "cross-env NODE_ENV=development NO_MAP=true rspack",
     "pack": "node ./scripts/pack.js",
     "format": "prettier --write .",

rspack.config.ts

@@ -11,6 +11,7 @@ const version = pkg.version;
 const dirname = path.resolve();
 const isDev = process.env.NODE_ENV === "development";
 const isBeta = version.includes("-");
+const isReactTools = process.env.REACT_DEVTOOLS === "true";
 
 // Target browsers, see: https://github.com/browserslist/browserslist
 // 依照 https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/userScripts#browser_compatibility
@@ -133,10 +134,14 @@ export default defineConfig({
           to: `${dist}/ext`,
           // 将manifest.json内版本号替换为package.json中版本号
           transform(content: Buffer) {
-            const manifest = JSON.parse(content.toString());
+            const manifest = JSON.parse(content.toString()) as chrome.runtime.ManifestV3;
             if (isDev || isBeta) {
               manifest.name = "__MSG_scriptcat_beta__";
-              // manifest.content_security_policy = "script-src 'self' https://cdn.crowdin.com; object-src 'self'";
+            }
+            if (isReactTools) {
+              manifest.content_security_policy = {
+                extension_pages: "script-src 'self' http://localhost:8097; object-src 'self'",
+              };
             }
             return JSON.stringify(manifest);
           },
@@ -191,6 +196,9 @@ export default defineConfig({
       chunks: ["import"],
     }),
     new rspack.HtmlRspackPlugin({
+      templateParameters: {
+        isReactTools: isReactTools ? "true" : "false",
+      },
       filename: `${dist}/ext/src/options.html`,
       template: `${src}/pages/options.html`,
       inject: "head",

src/pages/options.html

@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title><%= htmlRspackPlugin.options.title %></title>
+    <% if isReactTools=="true" { %>
+    <script src="http://localhost:8097"></script>
+    <% } %>
     <style>
       body {
         height: 100%;