Merge pull request #5 from Jonghakseo/dev

Dev
Jonghakseo · Apr 18, 2022 · 62adc2e · 62adc2e
2 parents dd95e3d + 7556334
commit 62adc2e
Show file tree

Hide file tree

Showing 50 changed files with 109 additions and 485 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -25,5 +25,5 @@
   "globals": {
     "chrome": "readonly"
   },
-  "ignorePatterns": ["watch.js"]
+  "ignorePatterns": ["watch.js", "dist/**"]
 }
diff --git a/.gitignore b/.gitignore
@@ -13,4 +13,7 @@
 .idea
 
 #generated manifest
-public/manifest.json
+public/manifest.json
+
+#copied contentStyle
+public/contentStyle.css
diff --git a/README.md b/README.md
@@ -19,7 +19,6 @@
 - [Features](#features)
 - [Installation](#installation)
   - [Procedures](#procedures)
-- [Attention](#attention)
 - [Screenshots](#screenshots)
   - [NewTab](#newtab)
   - [Popup](#popup)  
@@ -54,9 +53,6 @@ This boilerplate is made for creating chrome extensions using React and Typescri
    5. Select - `dist` folder in this project (after dev or build)
 6. If you want to build in production, Just run `yarn build` or `npm run build`.
 
-## Attention <a name="attention"></a>
-- Html files in the public folder are automatically copied from inside the `src/pages` folder. So, if you want to edit the html template file, edit index.html in each page folder.
-
 ## Screenshots <a name="screenshots"></a>
 
 ### New Tab <a name="newtab"></a>

diff --git a/nodemon.json b/nodemon.json
@@ -1,11 +1,10 @@
 {
   "watch": [
-    "src"
+    "src", "utils", "vite.config.ts"
   ],
   "ext": "tsx,css,html,ts",
   "ignore": [
     "src/**/*.spec.ts"
   ],
-  "exec": "vite build",
-  "delay": 300
+  "exec": "vite build"
 }
diff --git a/package.json b/package.json
@@ -38,7 +38,6 @@
     "ts-loader": "^9.2.6",
     "ts-node": "^10.7.0",
     "typescript": "^4.5.5",
-    "vite": "^2.9.1",
-    "vite-plugin-html": "^3.2.0"
+    "vite": "^2.9.1"
   }
 }
diff --git a/plugins/copy-template.ts b/plugins/copy-template.ts
diff --git a/plugins/utils/check-called.ts b/plugins/utils/check-called.ts
diff --git a/public/devtools.html b/public/devtools.html
diff --git a/public/newtab.html b/public/newtab.html
diff --git a/public/options.html b/public/options.html
diff --git a/public/panel.html b/public/panel.html
diff --git a/public/popup.html b/public/popup.html
diff --git a/src/chrome.d.ts b/src/chrome.d.ts
diff --git a/src/assets/index.d.ts → src/global.d.ts b/src/assets/index.d.ts → src/global.d.ts
@@ -1,3 +1,9 @@
+import Chrome from "chrome";
+
+declare namespace chrome {
+  export default Chrome;
+}
+
 declare module "*.svg" {
   import React = require("react");
   export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;

diff --git a/src/manifest.ts b/src/manifest.ts
@@ -6,29 +6,29 @@ const manifest: ManifestType = {
   name: packageJson.name,
   version: packageJson.version,
   description: packageJson.description,
-  options_page: "options.html",
-  background: { service_worker: "background.js" },
+  options_page: "src/pages/options/index.html",
+  background: { service_worker: "src/pages/background/index.js" },
   action: {
-    default_popup: "popup.html",
+    default_popup: "src/pages/popup/index.html",
     default_icon: "icon-34.png",
   },
   chrome_url_overrides: {
-    newtab: "newtab.html",
+    newtab: "src/pages/newtab/index.html",
   },
   icons: {
     "128": "icon-128.png",
   },
   content_scripts: [
     {
       matches: ["http://*/*", "https://*/*", "<all_urls>"],
-      js: ["content.js"],
-      css: ["content.styles.css"],
+      js: ["src/pages/content/index.js"],
+      css: ["contentStyle.css"],
     },
   ],
-  devtools_page: "devtools.html",
+  devtools_page: "src/pages/devtools/index.html",
   web_accessible_resources: [
     {
-      resources: ["content.styles.css", "icon-128.png", "icon-34.png"],
+      resources: ["contentStyle.css", "icon-128.png", "icon-34.png"],
       matches: [],
     },
   ],

diff --git a/src/pages/Content/index.ts b/src/pages/Content/index.ts
diff --git a/src/pages/Devtools/index.html b/src/pages/Devtools/index.html
diff --git a/src/pages/Devtools/index.ts b/src/pages/Devtools/index.ts
diff --git a/src/pages/Background/index.ts → src/pages/background/index.ts b/src/pages/Background/index.ts → src/pages/background/index.ts
diff --git a/src/pages/content/index.ts b/src/pages/content/index.ts
@@ -0,0 +1,5 @@
+try {
+  console.log("content loaded");
+} catch (e) {
+  console.error(e);
+}
diff --git a/src/pages/Content/content.style.css → src/pages/content/style.css b/src/pages/Content/content.style.css → src/pages/content/style.css
diff --git a/src/pages/devtools/index.html b/src/pages/devtools/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8" />
+    <title>Devtools</title>
+</head>
+<body>
+<script type="module" src="./index.ts"></script>
+</body>
+</html>
diff --git a/src/pages/devtools/index.ts b/src/pages/devtools/index.ts
@@ -0,0 +1,9 @@
+try {
+  chrome.devtools.panels.create(
+    "Dev Tools",
+    "icon-34.png",
+    "src/pages/panel/index.html"
+  );
+} catch (e) {
+  console.error(e);
+}
diff --git a/src/pages/Newtab/Newtab.css → src/pages/newtab/Newtab.css b/src/pages/Newtab/Newtab.css → src/pages/newtab/Newtab.css
diff --git a/src/pages/Newtab/Newtab.scss → src/pages/newtab/Newtab.scss b/src/pages/Newtab/Newtab.scss → src/pages/newtab/Newtab.scss
diff --git a/src/pages/Newtab/Newtab.tsx → src/pages/newtab/Newtab.tsx b/src/pages/Newtab/Newtab.tsx → src/pages/newtab/Newtab.tsx
@@ -1,15 +1,15 @@
 import React from "react";
 import logo from "@assets/img/logo.svg";
-import "@pages/Newtab/Newtab.css";
-import "@pages/Newtab/Newtab.scss";
+import "@pages/newtab/Newtab.css";
+import "@pages/newtab/Newtab.scss";
 
 const Newtab = () => {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
-          Edit <code>src/pages/Newtab/Newtab.tsx</code> and save to reload.
+          Edit <code>src/pages/newtab/Newtab.tsx</code> and save to reload.
         </p>
         <a
           className="App-link"

diff --git a/src/pages/Newtab/index.css → src/pages/newtab/index.css b/src/pages/Newtab/index.css → src/pages/newtab/index.css
diff --git a/src/pages/Newtab/index.html → src/pages/newtab/index.html b/src/pages/Newtab/index.html → src/pages/newtab/index.html
@@ -7,5 +7,6 @@
 
 <body>
 <div id="app-container"></div>
+<script type="module" src="./index.tsx"></script>
 </body>
 </html>
diff --git a/src/pages/Newtab/index.tsx → src/pages/newtab/index.tsx b/src/pages/Newtab/index.tsx → src/pages/newtab/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import Newtab from "@pages/Newtab/Newtab";
-import "@pages/Newtab/index.css";
+import Newtab from "@pages/newtab/Newtab";
+import "@pages/newtab/index.css";
 
 function init() {
   const appContainer = document.querySelector("#app-container");

diff --git a/src/pages/Options/Options.css → src/pages/options/Options.css b/src/pages/Options/Options.css → src/pages/options/Options.css
diff --git a/src/pages/Options/Options.tsx → src/pages/options/Options.tsx b/src/pages/Options/Options.tsx → src/pages/options/Options.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import "@pages/Options/Options.css";
+import "@pages/options/Options.css";
 
 const Options: React.FC = () => {
   return <div className="OptionsContainer">Options</div>;

diff --git a/src/pages/Options/index.css → src/pages/options/index.css b/src/pages/Options/index.css → src/pages/options/index.css
diff --git a/src/pages/Options/index.html → src/pages/options/index.html b/src/pages/Options/index.html → src/pages/options/index.html
@@ -7,5 +7,6 @@
 
 <body>
 <div id="app-container"></div>
+<script type="module" src="./index.tsx"></script>
 </body>
 </html>
diff --git a/src/pages/Options/index.tsx → src/pages/options/index.tsx b/src/pages/Options/index.tsx → src/pages/options/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import Options from "@pages/Options/Options";
-import "@pages/Options/index.css";
+import Options from "@pages/options/Options";
+import "@pages/options/index.css";
 
 function init() {
   const appContainer = document.querySelector("#app-container");

diff --git a/src/pages/Panel/Panel.css → src/pages/panel/Panel.css b/src/pages/Panel/Panel.css → src/pages/panel/Panel.css
diff --git a/src/pages/Panel/Panel.tsx → src/pages/panel/Panel.tsx b/src/pages/Panel/Panel.tsx → src/pages/panel/Panel.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import "@pages/Panel/Panel.css";
+import "@pages/panel/Panel.css";
 
 const Panel: React.FC = () => {
   return (

diff --git a/src/pages/Panel/index.css → src/pages/panel/index.css b/src/pages/Panel/index.css → src/pages/panel/index.css
diff --git a/src/pages/Panel/index.html → src/pages/panel/index.html b/src/pages/Panel/index.html → src/pages/panel/index.html
@@ -7,5 +7,6 @@
 
 <body>
 <div id="app-container"></div>
+<script type="module" src="./index.tsx"></script>
 </body>
 </html>
diff --git a/src/pages/Panel/index.tsx → src/pages/panel/index.tsx b/src/pages/Panel/index.tsx → src/pages/panel/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import Panel from "@pages/Panel/Panel";
-import "@pages/Panel/index.css";
+import Panel from "@pages/panel/Panel";
+import "@pages/panel/index.css";
 
 function init() {
   const appContainer = document.querySelector("#app-container");

diff --git a/src/pages/Popup/Popup.css → src/pages/popup/Popup.css b/src/pages/Popup/Popup.css → src/pages/popup/Popup.css
diff --git a/src/pages/Popup/Popup.tsx → src/pages/popup/Popup.tsx b/src/pages/Popup/Popup.tsx → src/pages/popup/Popup.tsx
@@ -1,14 +1,14 @@
 import React from "react";
 import logo from "@assets/img/logo.svg";
-import "@pages/Popup/Popup.css";
+import "@pages/popup/Popup.css";
 
 const Popup = () => {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
-          Edit <code>src/pages/Popup/Popup.jsx</code> and save to reload.
+          Edit <code>src/pages/popup/Popup.jsx</code> and save to reload.
         </p>
         <a
           className="App-link"

diff --git a/src/pages/Popup/index.css → src/pages/popup/index.css b/src/pages/Popup/index.css → src/pages/popup/index.css
diff --git a/src/pages/Popup/index.html → src/pages/popup/index.html b/src/pages/Popup/index.html → src/pages/popup/index.html
@@ -7,5 +7,6 @@
 
 <body>
 <div id="app-container"></div>
+<script type="module" src="./index.tsx"></script>
 </body>
 </html>
diff --git a/src/pages/Popup/index.tsx → src/pages/popup/index.tsx b/src/pages/Popup/index.tsx → src/pages/popup/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import "@pages/Popup/index.css";
-import Popup from "@pages/Popup/Popup";
+import "@pages/popup/index.css";
+import Popup from "@pages/popup/Popup";
 
 function init() {
   const appContainer = document.querySelector("#app-container");

diff --git a/tsconfig.json b/tsconfig.json
@@ -22,5 +22,6 @@
       "@pages/*": ["src/pages/*"]
     }
   },
-  "include": ["src", "plugins", "vite.config.ts"],
+  "include": ["src",
+    "utils", "vite.config.ts"],
 }
diff --git a/plugins/utils/color-log.ts → utils/log.ts b/plugins/utils/color-log.ts → utils/log.ts
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,5 +7,6 @@ @@
     <body>
     <div id="app-container"></div>
+    <script type="module" src="./index.tsx"></script>
     </body>
     </html>