Feature/search

.env

@@ -0,0 +1 @@
+$ PORT=6002 npm run start

README.md

@@ -1,4 +1,4 @@
-<img src="src/assets/img/icon-128.png" width="64"/>
+<img src="src/assets/img/icon.png" width="64"/>
 
 # Chrome Extension (MV3) Boilerplate with React 18 and Webpack 5
 

package.json

@@ -1,11 +1,11 @@
 {
-  "name": "chrome-extension-boilerplate-react",
+  "name": "newscopev2",
   "version": "5.0.4",
   "description": "A chrome extension boilerplate built with React 18, Webpack 5, and Webpack Dev Server 4",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/lxieyang/chrome-extension-boilerplate-react.git"
+    "url": "https://github.com/NewScopeExtension/NewScopeV2.git"
   },
   "scripts": {
     "build": "node utils/build.js",
@@ -14,7 +14,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-rnd": "^10.4.14"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",

src/containers/Greetings/Greetings.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import icon from '../../assets/img/icon-128.png';
+import icon from '../../assets/img/icon.png';
 
 class GreetingComponent extends Component {
   state = {

src/manifest.json

@@ -3,16 +3,18 @@
   "name": "Chrome Extension with React & Webpack",
   "description": "A chrome extension boilerplate built with React 17, Webpack 5, and Webpack Dev Server 4",
   "options_page": "options.html",
-  "background": { "service_worker": "background.bundle.js" },
+  "background": {
+    "service_worker": "background.bundle.js"
+  },
   "action": {
     "default_popup": "popup.html",
-    "default_icon": "icon-34.png"
+    "default_icon": "icon.png"
   },
   "chrome_url_overrides": {
     "newtab": "newtab.html"
   },
   "icons": {
-    "128": "icon-128.png"
+    "128": "icon.png"
   },
   "content_scripts": [
     {
@@ -24,7 +26,7 @@
   "devtools_page": "devtools.html",
   "web_accessible_resources": [
     {
-      "resources": ["content.styles.css", "icon-128.png", "icon-34.png"],
+      "resources": ["content.styles.css", "icon.png"],
       "matches": []
     }
   ]

src/pages/Devtools/index.js

@@ -1,5 +1,5 @@
 chrome.devtools.panels.create(
   'Dev Tools from chrome-extension-boilerplate-react',
-  'icon-34.png',
+  'icon.png',
   'panel.html'
 );

src/pages/Popup/Modal.css

@@ -0,0 +1,46 @@
+/* Modal.css */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  width: 80%; /* 모달 너비 */
+  max-width: 600px; /* 최대 너비 */
+}
+
+.modal-header {
+  background-color: #f1f1f1;
+  padding: 8px;
+  text-align: right;
+}
+
+.close-button {
+  background: none;
+  border: none;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.modal-body {
+  padding: 16px;
+  flex-grow: 1;
+  overflow: auto;
+}
+
+.search-popup-container {
+  margin-top: 10px; /* SearchPopup과 다른 내용 사이에 공간을 추가 */
+}