Merge pull request #118 from yakisova41/local-file-load-in-popup

✨ popup resource auto load
yakisova41 · Jun 8, 2024 · b9dfe73 · b9dfe73
2 parents 03b83a0 + 8ef9841
commit b9dfe73
Show file tree

Hide file tree

Showing 6 changed files with 352 additions and 26 deletions.
diff --git a/dev/src/popup/index.html b/dev/src/popup/index.html
@@ -3,10 +3,17 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Popup</title>
+    <link rel="stylesheet" href="./style.css" />
   </head>
   <body>
-    <div id="app"></div>
-
+    <div class="container">
+      <div class="content">
+        <img src="logo.svg" width="50px" height="50px" />
+        <h1 class="title">CRX MONKEY</h1>
+        <p>Count: <span class="counter">0</span></p>
+        <button class="count-up">Count</button>
+      </div>
+    </div>
     <script src="main.ts"></script>
   </body>
 </html>
diff --git a/dev/src/popup/logo.svg b/dev/src/popup/logo.svg
diff --git a/dev/src/popup/main.ts b/dev/src/popup/main.ts
@@ -1,19 +1,3 @@
-const app = document.querySelector('#app')!;
-app.innerHTML = `
-<div class="container">
-  <h1>CRX MONKEY 🐵🤚</h1>
-  <p>Count: <span class="counter">0</span></p>
-  <button class="count-up">Count</button>
-</div>
-
-<style>
-  .container {
-    width: 300px;
-    height: 120px;
-  }
-</style>
-`;
-
 let count = 0;
 const counter = document.querySelector('.counter')!;
 document.querySelector('.count-up')!.addEventListener('click', () => {

diff --git a/dev/src/popup/style.css b/dev/src/popup/style.css
@@ -0,0 +1,31 @@
+body {
+  background: #1f1f1f;
+  color: #e6e6e6;
+}
+
+.container {
+  width: 240px;
+  height: 120px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 30px;
+}
+
+.title {
+  margin: 0;
+}
+
+.count-up {
+  background: #9789e0;
+  color: #1d1838;
+  font-size: 14px;
+  border: none;
+  padding: 12px 16px;
+  border-radius: 100px;
+  cursor: pointer;
+}
+
+.counter {
+  font-size: 16px;
+}
diff --git a/packages/crx-monkey/src/node/handlers/dev/Watch.ts b/packages/crx-monkey/src/node/handlers/dev/Watch.ts
@@ -28,11 +28,12 @@ export class Watch {
     this.config = config;
   }
 
-  protected watchFiles(filePaths: string[], onChange: (cssFilePath: string) => void) {
+  protected watchFiles(filePaths: string[], onChange: (filePath: string) => void) {
     const watcher = chokidar.watch(filePaths, {});
     watcher.on('change', (path) => {
       onChange(path);
     });
+    return watcher;
   }
 
   /**