alanhe421 · alanhe421 · Mar 21, 2022 · Mar 21, 2022 · Mar 21, 2022 · Mar 21, 2022
diff --git a/development/manifest.js b/development/manifest.js
@@ -1,11 +1,19 @@
-const manifestJSON = require(`${__dirname}/../src/manifest/manifest.json`);
 const fs = require('fs');
 const path = require('path');
+const yargs = require('yargs/yargs')
+const {hideBin} = require('yargs/helpers')
+const argv = yargs(hideBin(process.argv)).argv;
+
 const packageJSON = require(`${__dirname}/../package.json`);
+
+
+const baseJSON = require(`${__dirname}/../src/manifest/base.json`);
+const platformJSON = require(`${__dirname}/../src/manifest/${argv.platform || 'chrome'}.json`);
+
 /**
  * 版本采用package.json中配置值
  */
 const file = path.join(__dirname, `/../dist/manifest.json`);
 fs.writeFileSync(file, JSON.stringify({
-  ...manifestJSON, version: packageJSON.version
-}), {encoding: 'utf8'});
+  ...baseJSON, ...platformJSON, version: packageJSON.version
+}, null, 4), {encoding: 'utf8'});
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,9 @@
   "license": "MIT",
   "author": "Joe Martella",
   "scripts": {
-    "build": "webpack --config webpack.prod.js",
+    "build": "npm run build:chrome",
+    "build:chrome": "node development/manifest.js --platform=chrome && webpack --config webpack.prod.js",
+    "build:firefox": "node development/manifest.js --platform=firefox && webpack --config webpack.prod.js",
     "dev": "webpack --config webpack.dev.js",
     "watch": "webpack -w --config webpack.dev.js",
     "pack": "npm run build && cd dist && npx crx pack -p ./key.pem -o ../dist/boilerplate.crx"
@@ -17,6 +19,7 @@
     "react-hook-form": "^7.20.5",
     "react-router-dom": "^6.0.2",
     "tea-component": "^2.7.2",
+    "yargs": "^17.4.0",
     "zustand": "^3.7.0"
   },
   "devDependencies": {

diff --git a/src/event-page.ts b/src/event-page.ts
@@ -1,3 +1,7 @@
+chrome.runtime.onInstalled.addListener(() => {
+
+
+});
 // Listen to messages sent from other parts of the extension.
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   // onMessage must return "true" if response is async.

diff --git a/src/manifest/manifest.json → src/manifest/base.json b/src/manifest/manifest.json → src/manifest/base.json
@@ -1,20 +1,12 @@
 {
-  "manifest_version": 2,
   "name": "react-typescript-boilerplate",
   "description": "A boilerplate project to quickly build a Chrome extension using TypeScript and React (built using webpack).",
   "version": "_",
-  "minimum_chrome_version": "72",
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAqohiV70bfTutnn6pYsB3Ui2k2PL+qr60kRH0zYURBR9rbAFMeeZjcuyy7TtLdzP9a+SIWQOi0BuUSoaEBsRK7bJZ+9uphvQ17b7HRR0qFXJ3f52N6EgqOzRuNUL3cQuswB2Sb9hd/gI5S3nWAHTRxKevIpBs5Bj8DLJGopnATOkknbI95sCKhCfuHf8BZbllUcjjhGIeUg0xJ1hbPSDkos8JYs+tNTLw/WRLHcYzi8rUlllu57DwOWp8wQbjv28L55qYIihrSi/5JmUvXMXD01jMeRUoAqBnAHwgOrSKfAfMaaJT84r6eUe8wiA2LP7BenzyZoZqPLIT6FXhJoI7UQIDAQAB",
-  "browser_action": {
+  "action": {
     "default_icon": "icon16.png",
     "default_popup": "popup.html"
   },
-  "background": {
-    "scripts": [
-      "js/eventPage.js"
-    ],
-    "persistent": false
-  },
   "content_scripts": [
     {
       "matches": [
@@ -25,13 +17,14 @@
       "css": [
       ],
       "js": [
-        "js/contentScript.js"
+        "contentScript.js"
       ]
     }
   ],
   "externally_connectable": {
     "matches": [
-      "http://127.0.0.1/*"
+      "http://127.0.0.1/*",
+      "https://1991421.cn/*"
     ]
   },
   "icons": {
@@ -41,5 +34,8 @@
   },
   "permissions": [
     "tabs"
+  ],
+  "host_permissions": [
+    "*://*/*"
   ]
 }
diff --git a/src/manifest/chrome.json b/src/manifest/chrome.json
@@ -0,0 +1,20 @@
+{
+  "manifest_version": 3,
+  "minimum_chrome_version": "72",
+  "background": {
+    "service_worker": "eventPage.js"
+  },
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'self'"
+  },
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "popup.html"
+      ],
+      "matches": [
+        "<all_urls>"
+      ]
+    }
+  ]
+}
diff --git a/src/manifest/firefox.json b/src/manifest/firefox.json
@@ -0,0 +1,3 @@
+{
+  "manifest_version": 2
+}
diff --git a/src/popup.html b/src/popup.html
@@ -9,7 +9,7 @@
 
 <body>
 <div id="popup"></div>
-<script src="/js/popup.js"></script>
+<script src="/popup.js"></script>
 </body>
 
 </html>
diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import './popup.less';
 import { Button, Form, Input } from 'tea-component';
 import { MemoryRouter as Router, Route, Routes } from 'react-router-dom';
@@ -53,6 +53,10 @@ function LoginPage() {
     mode: 'onBlur',
   });
 
+  const handleClick = useCallback(() => {
+    window.open(CRX_CONFIG.issueURL);
+  }, []);
+
   return <div className={'login'}>
     <Form layout={'vertical'}>
       <Controller name={'username'}
@@ -86,7 +90,7 @@ function LoginPage() {
     <footer>
       v{
       app.manifest.version
-    }
+    }，<a onClick={handleClick}>issue url</a>
     </footer>
   </div>;
 }
diff --git a/src/typing.d.ts b/src/typing.d.ts
@@ -1,6 +1,7 @@
 /**
- * @description 具体配置值见Package.json
+ * @description 全局环境变量，具体配置值见Package.json
  */
 declare const CRX_CONFIG: {
   issueURL: string;
 };
+
diff --git a/webpack.common.js b/webpack.common.js
@@ -1,14 +1,13 @@
 const path = require("path");
 const webpack = require("webpack");
 const CopyPlugin = require("copy-webpack-plugin");
-require(`${__dirname}/development/manifest`);
 module.exports = {
   entry: {
     popup: path.join(__dirname, "src/popup/index.tsx"),
     eventPage: path.join(__dirname, "src/event-page.ts"),
     contentScript: path.join(__dirname, "src/content-script.ts"),
   }, output: {
-    path: path.join(__dirname, "dist/js"), filename: "[name].js"
+    path: path.join(__dirname, "dist/"), filename: "[name].js"
   }, module: {
     rules: [{
       exclude: /node_modules/, test: /\.tsx?$/, use: "ts-loader"
@@ -26,8 +25,8 @@ module.exports = {
   }, plugins: [new webpack.DefinePlugin({
     CRX_CONFIG: JSON.stringify(require('./package.json').crxConfig)
   }), new CopyPlugin({
-    patterns: [{from: "node_modules/tea-component/dist/tea.css", to: "../css"}, {
-      from: "src/images", to: "../"
-    }, {from: "src/popup.html", to: "../"},],
+    patterns: [{from: "node_modules/tea-component/dist/tea.css", to: path.join(__dirname, 'dist/css')}, {
+      from: "src/images", to: path.join(__dirname, 'dist')
+    }, {from: "src/popup.html", to: path.join(__dirname, 'dist')},],
   }),],
 };