Merge branch 'master' into release

README.md

@@ -19,7 +19,7 @@ This project is not accepted by Gunma University. Please use this project at you
 
 ### Stable Version
 
-[Chrome Web Store](https://chromewebstore.google.com/detail/gaming-gunma-university/fifbnlkbedonackjjbegkjmekchdcfhk?hl=ja)
+[Chrome Web Store](https://chromewebstore.google.com/detail/gaming-gunma-university/fifbnlkbedonackjjbegkjmekchdcfhk)
 
 ### Manually build and install
 

package.json

@@ -50,6 +50,7 @@
         "eslint-plugin-unused-imports": "^3.0.0",
         "eslint-webpack-plugin": "^4.0.1",
         "html-webpack-plugin": "^5.5.3",
+        "mini-css-extract-plugin": "^2.7.6",
         "postcss": "^8.4.31",
         "postcss-import": "^15.1.0",
         "postcss-loader": "^7.3.3",
@@ -71,7 +72,8 @@
         "tsconfig-paths-webpack-plugin": "^4.1.0",
         "typescript": "^5.2.2",
         "webpack": "^5.89.0",
-        "webpack-cli": "^5.1.4"
+        "webpack-cli": "^5.1.4",
+        "webpack-remove-empty-scripts": "^1.0.4"
     },
     "volta": {
         "node": "20.9.0"

public/README.txt

@@ -0,0 +1,15 @@
+== Gunma University Gaming Edition ==
+
+関東の最も辺境の地にある緑あふれる群馬大学。
+せめてウェブサービスだけでも綺羅びやかにしようではないかという、とある学部生のささやかなプロジェクト。
+
+=====================================
+
+1. Warning
+
+This project is not accepted by Gunma University. Please use this project at your own risk.
+
+2. License
+
+- MIT
+- MIT-SUSHI

public/manifest_chrome.json

@@ -5,6 +5,13 @@
     "description": "辺境の地にある群馬大学のウェブサイトをゲーミングでエキサイティングにします",
     "author": "[email protected]",
     "permissions": ["storage", "tabs"],
+    "icons": {
+        "16": "assets/icon-16.png",
+        "32": "assets/icon-32.png",
+        "48": "assets/icon-48.png",
+        "64": "assets/icon-64.png",
+        "128": "assets/icon-128.png"
+    },
     "web_accessible_resources": [
         {
             "resources": ["assets/*"],

public/manifest_firefox.json

@@ -5,6 +5,13 @@
     "description": "辺境の地にある群馬大学のウェブサイトをゲーミングでエキサイティングにします",
     "author": "[email protected]",
     "permissions": ["storage", "tabs"],
+    "icons": {
+        "16": "assets/icon-16.png",
+        "32": "assets/icon-32.png",
+        "48": "assets/icon-48.png",
+        "64": "assets/icon-64.png",
+        "128": "assets/icon-128.png"
+    },
     "web_accessible_resources": [
         {
             "resources": ["assets/*"],

src/options/components/Footer.tsx

@@ -4,13 +4,22 @@ import { Link } from "react-router-dom";
 
 export default function Footer({ className }: { className?: string }) {
     return (
-        <footer className={classNames(className, "bg-neutral")}>
-            <DaisyFooter className="mx-auto w-2/3 py-5">
+        <footer className={classNames(className, "bg-neutral", "mt-3")}>
+            <DaisyFooter className="mx-auto w-2/3 py-2">
                 <div>
                     <DaisyFooter.Title>Links</DaisyFooter.Title>
                     <FooterLink href="/about" isInternal>
                         About
                     </FooterLink>
+                    <FooterLink href="/why" isInternal>
+                        Why I created it?
+                    </FooterLink>
+                    <FooterLink href="/wanted" isInternal>
+                        Wanted
+                    </FooterLink>
+                    <FooterLink href="https://chromewebstore.google.com/detail/gaming-gunma-university/fifbnlkbedonackjjbegkjmekchdcfhk">
+                        Chrome Web Store
+                    </FooterLink>
                 </div>
                 <div>
                     <DaisyFooter.Title>SNS</DaisyFooter.Title>

src/options/components/Layout.tsx

@@ -4,7 +4,7 @@ import Main from "./Main";
 
 export default function Layout() {
     return (
-        <div className="flex min-h-screen flex-col">
+        <div className="flex min-h-screen flex-col" data-gaming_gundai="true">
             <Header />
             <Main className="grow" />
             <Footer />

src/options/components/Main.tsx

@@ -5,6 +5,7 @@ import { Route, Routes } from "react-router-dom";
 import About from "../pages/About";
 import Thanks from "../pages/Thanks";
 import Top from "../pages/Top";
+import Wanted from "../pages/Wanted";
 import Why from "../pages/Why";
 import NotFound from "./404";
 
@@ -24,6 +25,7 @@ export default function Main(props: { className?: string }) {
                 <Route path="/about" Component={About} />
                 <Route path="/why" Component={Why} />
                 <Route path="/thanks" Component={Thanks} />
+                <Route path="/wanted" Component={Wanted} />
                 <Route path="*" Component={NotFound} />
             </Routes>
         </main>

src/options/pages/About.tsx

@@ -5,11 +5,24 @@ export default function About() {
         <>
             <Heading.h1>About</Heading.h1>
             <Heading.h2>この拡張機能について</Heading.h2>
-            <p>筆者の人生始めて開発した拡張機能です。TypeScriptとReactを用いて構築されています。</p>
+            <p>筆者が人生で初めて開発した拡張機能です。TypeScriptとReactを用いて構築されています。</p>
             <p>ソースコードはMITライセンスのもとで公開されています。</p>
             <Heading.h2>筆者について</Heading.h2>
             <p>ゲーミングうんたらと言って虹色に光るのが大嫌いな、群馬大学情報学部所属の伊藤 駿です。</p>
             <p>普段はTwitterでパソコンをかたかた弄って遊んでいます。もし大学内でお会いした際には是非仲良くしてください。</p>
+            <Heading.h2>筆者の連絡先</Heading.h2>
+            <ul>
+                <li>
+                    <a href="https://twitter.com/Hayao0819" className="link-info link">
+                        Twitter
+                    </a>
+                </li>
+                <li>
+                    <a href="https://instagram.com/Hayao0819" className="link-info link">
+                        Instagram
+                    </a>
+                </li>
+            </ul>
         </>
     );
 }

src/options/pages/Thanks.tsx

@@ -27,10 +27,10 @@ export default function Thanks() {
             <p>使用技術はTypeScriptとReact、TailwindCSSです。</p>
             <p>
                 興味のある方は
-                <a href="https://twitter.com/Hayao0819" target="_blank" rel="noreferrer">
-                    TwitterのDM
-                </a>
-                までご連絡ください。
+                <Link to="/wanted" className="link-info link">
+                    こちら
+                </Link>
+                をご覧ください。
             </p>
         </>
     );

src/options/pages/Top.tsx

@@ -2,6 +2,7 @@ import classNames from "classnames";
 import { useEffect, useState } from "react";
 import { Tooltip } from "react-daisyui";
 import { FaGamepad, FaMoon } from "react-icons/fa";
+import { Link } from "react-router-dom";
 
 import StorageTool from "@/class/StorageTool";
 import CopyTootrip from "@/components/CopyBtn";
@@ -76,6 +77,15 @@ export default function Top() {
                     <button className="btn bg-base-300">[email protected]</button>
                 </CopyTootrip>
             </ConfigSection>
+
+            <ConfigSection name="開発者募集">
+                <p>
+                    <Link to="/wanted" className="link-info link">
+                        こちら
+                    </Link>
+                    を御覧ください。
+                </p>
+            </ConfigSection>
         </>
     );
 }

src/options/pages/Wanted.tsx

@@ -0,0 +1,53 @@
+import { Link } from "react-router-dom";
+
+import Heading from "@/components/Heading";
+
+export default function Wanted() {
+    return (
+        <>
+            <Heading.h1>開発者募集</Heading.h1>
+            <p>
+                この拡張機能はGitHub上でMITライセンスの基で公開されており、現在Contributerを募集しています。
+                以下に技術的な概要を掲載しますので、興味のある方はぜひ
+                <Link to="/about" className="link-info link">
+                    開発者までご連絡
+                </Link>
+                ください。
+            </p>
+
+            <Heading.h2>概要</Heading.h2>
+            <p>群馬大学に所属しており、ウェブ技術に興味のある人。ラーメンが好きな人大歓迎です。</p>
+            <p>現開発者のお財布と気分次第で、報酬としてラーメンを奢るかもしれません。</p>
+
+            <Heading.h2>技術</Heading.h2>
+            <div className="flex child:mx-4">
+                <div>
+                    <p>現在使用しているもの</p>
+                    <ul>
+                        <li>core-js</li>
+                        <li>daisy UI with React</li>
+                        <li>eslint</li>
+                        <li>Node.js</li>
+                        <li>pnpm</li>
+                        <li>PostCSS</li>
+                        <li>Prettier</li>
+                        <li>React</li>
+                        <li>Sass</li>
+                        <li>Stylelint</li>
+                        <li>Tailwind CSS</li>
+                        <li>TypeScript</li>
+                        <li>Volta</li>
+                        <li>Webpack</li>
+                    </ul>
+                </div>
+                <div>
+                    <p>今後使用していきたいもの</p>
+                    <ul>
+                        <li>Deno</li>
+                        <li>TurboPack</li>
+                    </ul>
+                </div>
+            </div>
+        </>
+    );
+}

webpack.config.ts

@@ -3,10 +3,11 @@ import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
 import ESLintPlugin from "eslint-webpack-plugin";
 import fs from "fs";
 import HtmlPlugin from "html-webpack-plugin";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
 import path from "path";
-import TerserPlugin from "terser-webpack-plugin";
 import { TsconfigPathsPlugin } from "tsconfig-paths-webpack-plugin";
 import { Configuration, DefinePlugin } from "webpack";
+import RemoveEmptyScriptsPlugin from "webpack-remove-empty-scripts";
 
 const loadFilesInScripts = function () {
     const dir = path.join(__dirname, "src/scripts");
@@ -23,6 +24,7 @@ const loadFilesInScripts = function () {
 
 interface Env {
     browser?: "chrome" | "firefox";
+    stats?: Configuration["stats"];
     WEBPACK_BUILD: boolean;
     WEBPACK_BUNDLE: boolean;
 }
@@ -33,8 +35,6 @@ interface Argv {
 }
 
 module.exports = (env: Env, argv: Argv): Configuration => {
-    console.log("Build as " + argv.mode + " mode");
-
     if (env.browser === undefined) {
         throw new Error("Please set browser");
     }
@@ -44,6 +44,15 @@ module.exports = (env: Env, argv: Argv): Configuration => {
     const isChrome = env.browser === "chrome";
     const isFirefox = env.browser === "firefox";
 
+    if (!isDev && !isProd) {
+        console.warn(`Unknown mode: ${argv.mode}`);
+    }
+    if (!isChrome && !isFirefox) {
+        console.warn(`Unknown browser: ${env.browser}`);
+    }
+
+    console.log("Build as " + argv.mode + " mode");
+
     return {
         entry: {
             popup: "./src/popup/index.tsx",
@@ -77,7 +86,8 @@ module.exports = (env: Env, argv: Argv): Configuration => {
                 {
                     test: /\.(css|sass|scss|pcss)/,
                     use: [
-                        "style-loader",
+                        //"style-loader",
+                        MiniCssExtractPlugin.loader,
                         {
                             loader: "css-loader",
                             options: { url: false },
@@ -95,10 +105,12 @@ module.exports = (env: Env, argv: Argv): Configuration => {
         },
 
         optimization: {
-            minimizer: [new CssMinimizerPlugin(), new TerserPlugin()],
+            minimizer: ["...", new CssMinimizerPlugin()],
         },
 
         plugins: [
+            new RemoveEmptyScriptsPlugin(),
+            new MiniCssExtractPlugin(),
             isProd
                 ? new DefinePlugin({
                       "process.env.NODE_ENV": JSON.stringify("production"),
@@ -117,9 +129,7 @@ module.exports = (env: Env, argv: Argv): Configuration => {
                         noErrorOnMissing: true,
                         globOptions: {
                             ignore: ["chrome", "firefox"].map((browser) => {
-                                const ignoreFile = path.posix.join(__dirname, `public/manifest_${browser}.json`);
-                                //console.log(ignoreFile);
-                                return ignoreFile;
+                                return `**/manifest_${browser}.json`;
                             }),
                         },
                     },
@@ -157,6 +167,8 @@ module.exports = (env: Env, argv: Argv): Configuration => {
             maxAssetSize: 2000000,
         },
 
+        stats: env.stats ? env.stats : isProd ? "normal" : isDev ? "verbose" : "normal",
+
         devtool: isDev ? "source-map" : false,
     };
 };