diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..9a645a6
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 cho yeon seop
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/background.js b/background.js
new file mode 100644
index 0000000..d08d17f
--- /dev/null
+++ b/background.js
@@ -0,0 +1,34 @@
+/**
+* ---------------------------------------------------------------------------------
+* | 백그라운드 |
+* ---------------------------------------------------------------------------------
+* - 디폴트 컬러를 지정하여 스토리지 API 를 호출하여 지정한 색을 저장시킵니다.
+**/
+let color = '#3aa757';
+
+
+chrome.runtime.onInstalled.addListener(() => {
+ chrome.storage.sync.set({ color });
+ console.log('기본 배경색은 %cgreen', `color: ${color}`);
+});
+
+chrome.webNavigation.onCompleted.addListener((details) => {
+ // console.log("details.url", details.url)
+ console.log(`B`);
+ if (details.frameId === 0 && details.url.includes("booktoki")) {
+ console.log(`A`);
+ chrome.scripting.executeScript({
+ target: { tabId: details.tabId },
+ function: () => {
+ const title = document.title;
+ alert(`Page Title: ${title}\nPage Load Complete!`);
+ }
+ });
+ } else {
+ console.log(`Page Title: ${title}\nis not target Page!`);
+ }
+});
+
+chrome.runtime.onInstalled.addListener(() => {
+ console.log('Page Load Notifier installed.');
+});
diff --git a/button.css b/button.css
new file mode 100644
index 0000000..66b2a79
--- /dev/null
+++ b/button.css
@@ -0,0 +1,13 @@
+button {
+ height: 30px;
+ width: 30px;
+ outline: none;
+ margin: 10px;
+ border: none;
+ border-radius: 2px;
+}
+
+button.current {
+ box-shadow: 0 0 0 2px white,
+ 0 0 0 4px black;
+}
\ No newline at end of file
diff --git a/images/icons8-color-128.png b/images/icons8-color-128.png
new file mode 100644
index 0000000..9a58e15
Binary files /dev/null and b/images/icons8-color-128.png differ
diff --git a/images/icons8-color-16.png b/images/icons8-color-16.png
new file mode 100644
index 0000000..62449e9
Binary files /dev/null and b/images/icons8-color-16.png differ
diff --git a/images/icons8-color-32.png b/images/icons8-color-32.png
new file mode 100644
index 0000000..9efa7bd
Binary files /dev/null and b/images/icons8-color-32.png differ
diff --git a/images/icons8-color-48.png b/images/icons8-color-48.png
new file mode 100644
index 0000000..863937e
Binary files /dev/null and b/images/icons8-color-48.png differ
diff --git a/images/icons8-color-64.png b/images/icons8-color-64.png
new file mode 100644
index 0000000..fd2bec4
Binary files /dev/null and b/images/icons8-color-64.png differ
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..80cc44c
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,25 @@
+{
+ "name": "배경색 변경 크롬 확장 프로그램",
+ "description": "웹 페이지의 배경색을 변경해 주는 크롬 확장 프로그램입니다.",
+ "version": "0.1.003",
+ "manifest_version": 3,
+ "background": {
+ "service_worker": "background.js"
+ },
+ "permissions": [
+ "storage",
+ "activeTab",
+ "scripting",
+ "webNavigation"],
+ "host_permissions": [
+ "https://lunaticbum.kr/",
+ "https://booktoki468.com/"
+ ],
+ "icons": {
+ "16": "/images/icons8-color-16.png",
+ "32": "/images/icons8-color-32.png",
+ "48": "/images/icons8-color-48.png",
+ "128": "/images/icons8-color-128.png"
+ },
+ "options_page": "options.html"
+}
diff --git a/options.html b/options.html
new file mode 100644
index 0000000..3a36b29
--- /dev/null
+++ b/options.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
배경색 변경
+
+
+
+
\ No newline at end of file
diff --git a/options.js b/options.js
new file mode 100644
index 0000000..7c2e288
--- /dev/null
+++ b/options.js
@@ -0,0 +1,52 @@
+/**
+* ---------------------------------------------------------------------------------
+* | 옵션 |
+* ---------------------------------------------------------------------------------
+**/
+
+// button element 요소
+let page = document.getElementById("buttonDiv");
+// CSS 클래스명
+let selectedClassName = "current";
+// 제공할 배경색 목록
+const presetButtonColors = ["#3aa757", "#e8453c", "#f9bb2d", "#4688f1"];
+
+/**
+ * @param {object} event - 이벤트
+ * @description 스토리지 API 를 호출하여 배경색을 저장하고 현재 웹 페이지의 배경색을 변경하여 줍니다.
+ **/
+function handleButtonClick(event) {
+ let current = event.target.parentElement.querySelector(`.${selectedClassName}`);
+ if (current && current !== event.target) {
+ current.classList.remove(selectedClassName);
+ }
+
+ let color = event.target.dataset.color;
+ event.target.classList.add(selectedClassName);
+ chrome.storage.sync.set({ color });
+}
+
+/**
+ * @param {object} buttonColors - 버튼 컬러 목록
+ * @description 제공할 배경색을 웹 페이지에 표시하여 줍니다.
+ **/
+function constructOptions(buttonColors) {
+ chrome.storage.sync.get("color", (data) => {
+ let currentColor = data.color;
+ for (let buttonColor of buttonColors) {
+ let button = document.createElement("button");
+ button.dataset.color = buttonColor;
+ button.style.backgroundColor = buttonColor;
+
+ if (buttonColor === currentColor) {
+ button.classList.add(selectedClassName);
+ }
+
+ button.addEventListener("click", handleButtonClick);
+ page.appendChild(button);
+ }
+ });
+}
+
+// 최초 버튼 컬러 표시 및 이벤트 등록 호출
+constructOptions(presetButtonColors);
diff --git a/popup.html b/popup.html
new file mode 100644
index 0000000..7f0e61b
--- /dev/null
+++ b/popup.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/popup.js b/popup.js
new file mode 100644
index 0000000..8276e7e
--- /dev/null
+++ b/popup.js
@@ -0,0 +1,48 @@
+// /**
+// * ---------------------------------------------------------------------------------
+// * | 팝업 |
+// * ---------------------------------------------------------------------------------
+// **/
+//
+// // changeColor ID element 를 취득
+// let changeColor = document.getElementById("changeColor");
+//
+// // 스토리지에 저장되어 있는 컬러가 있다면 표시
+// chrome.storage.sync.get("color", ({ color }) => {
+// changeColor.style.backgroundColor = color;
+// });
+//
+// // 배경색 버튼을 클릭하였을 경우 이벤트 등록
+// changeColor.addEventListener("click", async () => {
+// let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+//
+// chrome.scripting.executeScript({
+// target: { tabId: tab.id },
+// function: setPageBackgroundColor,
+// });
+// });
+//
+// /**
+// * @description 현재 웹 페이지의 Body 요소의 배경색을 변경해주는 함수
+// **/
+// function setPageBackgroundColor() {
+// chrome.storage.sync.get("color", ({ color }) => {
+// document.body.style.backgroundColor = color;
+// });
+// }
+//
+// // document.getElementById('checkPage').addEventListener('click', () => {
+// chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+// console.log("IN ACTIVE")
+// chrome.scripting.executeScript({
+// target: { tabId: tabs[0].id },
+// function: () => {
+// console.log("IN ACTIVE 2")
+// window.addEventListener('load', () => {
+// const title = document.title;
+// alert(`Page Title: ${title}\nPage Load Complete!`);
+// });
+// }
+// });
+// });
+// // });
\ No newline at end of file