From 75dd38dcfc001ae918ca60047fb386ad3d3da05d Mon Sep 17 00:00:00 2001
From: lunaticbum <lunaticbum@gmail.com>
Date: Tue, 11 Feb 2025 17:39:20 +0900
Subject: [PATCH] o k a y

---
 LICENSE                     |  21 +++++++++++++++
 background.js               |  34 +++++++++++++++++++++++
 button.css                  |  13 +++++++++
 images/icons8-color-128.png | Bin 0 -> 7383 bytes
 images/icons8-color-16.png  | Bin 0 -> 549 bytes
 images/icons8-color-32.png  | Bin 0 -> 1102 bytes
 images/icons8-color-48.png  | Bin 0 -> 1621 bytes
 images/icons8-color-64.png  | Bin 0 -> 2294 bytes
 manifest.json               |  25 +++++++++++++++++
 options.html                |  14 ++++++++++
 options.js                  |  52 ++++++++++++++++++++++++++++++++++++
 popup.html                  |  11 ++++++++
 popup.js                    |  48 +++++++++++++++++++++++++++++++++
 13 files changed, 218 insertions(+)
 create mode 100644 LICENSE
 create mode 100644 background.js
 create mode 100644 button.css
 create mode 100644 images/icons8-color-128.png
 create mode 100644 images/icons8-color-16.png
 create mode 100644 images/icons8-color-32.png
 create mode 100644 images/icons8-color-48.png
 create mode 100644 images/icons8-color-64.png
 create mode 100644 manifest.json
 create mode 100644 options.html
 create mode 100644 options.js
 create mode 100644 popup.html
 create mode 100644 popup.js

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 0000000000000000000000000000000000000000..9a58e15f4afc7050b0b34f5f7f7d9e9a92acd35a
GIT binary patch
literal 7383
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
NNlsn1PTC^ue*g+3I(+~D

literal 0
HcmV?d00001

diff --git a/images/icons8-color-16.png b/images/icons8-color-16.png
new file mode 100644
index 0000000000000000000000000000000000000000..62449e91037d0926bb002f60e13b27c96a2959c0
GIT binary patch
literal 549
zcmV+=0^0qFP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00006VoOIv0RI60
z0RN!9r;`8x0oqAKK~y-6#gIK{6LA>EfA3xMbxBD~6O<SO3TcKEE;M30SZK$9f))xQ
z8HLuRtBZpm3dKzwlnPxGtbz(6-Ndnl#5RQtZKQ)nf<r$NYxSsie}}dbFCCop+1`)m
z;o%4WTjE~S3I$)-*Htv?jd36gphT8iBkIvka_ez=@`Kg>ueA^Bqoc`ix3PfNJMDNq
zM*ssb>>ww0<Jv=y6<w%L4I~c@s1*u6TbDP035XT%siRZ{Sp1fk6+j2fpPG7Iy^-~H
z1Z;$}MP#osP{A9R2$jpZP^r}aBf(W*dH-hm6M<p}gA12h^Krf$zpS3r`lw9AXJ4+i
zS6!Pro#CiFu=6TKm_|BPI_nPD27(~(Up?*4yWs+?e#|d{m_V~PRf=>#+>_D|GrONU
z7ywm-HHkT!V>eqFw_~hzJu?%?Z>(#9x<IufK%H`?wLbf#B-F62+p`yMw|d*nw(UGy
z>57fq2@WOh`_IfA+<r4C+*Lkfduv`n4nRBRyk&@}fH?m0rV70q-Zw1mM7|Er$vx|j
z26K~QDcv~_Q~+D`lLm4MOtEq)5CyWR*>di{>}J4=Yd!Vvp~wJHXIz4O0-8Wml-^Lg
n$t!xqGx$7q>+@eg{)hSnVDO$ig%_v;00000NkvXXu0mjft1R?X

literal 0
HcmV?d00001

diff --git a/images/icons8-color-32.png b/images/icons8-color-32.png
new file mode 100644
index 0000000000000000000000000000000000000000..9efa7bd2e17b8d0833cd801e3f7875164ceb04df
GIT binary patch
literal 1102
zcmV-U1hM;xP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800006VoOIv0RI60
z0RN!9r;`8x1OrJ#K~z|U?Ur3^6lD~KpYv_E-F4g2O)=UZsYP0g#b{!nL5b0(8n7kO
zLLvU$dV#G9QLqgpT-f?=B2f~#F!4en7TZ`Ma>0+rs8BVH7Z?I)wm|J4h0@a2?e5O;
zq6@Y&v%5vTlXErmeeZeSch33d%)pKKzlU58c%q`BFcynFE>I(|NFguIaSr%RpcB7#
z2EP5d?>{wgp}xMr5^IY@qxbpG_CAmdJ5nXzMCZ$(M$DGtremRhZD4Ty+Q)!Bz&yb6
zo$Kv0k!XP%R@1pWTx-&R05GP=GsQ0-{~{T`Nwzt(q3%WC%eXjznaT~GNra!gTe{=o
z09k^z_q<*4!ap)Fuzu|tRe8sbvHboeDiU!d2s*h?itPNV`fkr#OIIh-acx1o=O=+o
zw|(#M#Y5iFE4`w6N<|dal5nvp8e2wX0-aG~c^5C(`rRM)jWjp3C9xeKZsK84nlGgL
zJ}CL|Xn5wviJJ2C0D%Ue709sVWm_h)4cKTWbX4H!x}m%V@0)uT>hDYWyPwnIMpoYZ
z>AtVsOka)A8x;>@^dOKvV>w19UHag7U2*w|{+W2k8Mxy0t$AIxKeS19S%>A(@1uA_
z03!NIDsh0@w;n%=XmkAW2DN}Aks7OSs@hsUmF=ss;~fT6v>ISs{8@YDiTj^39~OON
zo;@<(^6W|_el;TLm)?)vtB0o6S;5E(t5O3L0vMI*lm-M!W*I`{7|TP_);2X)10~O&
z2}et{AA@%`mzJh9062z>D5vKtel15h>0C8=b1|Uy1xu0-EVob>9#F@jcOxEffP_1*
z*MK07a)UbNfSZ9+w)=?sG=J4jwZGd5W0f{$bbIq|vsXb8M=M<pp&W=`3`n;AV9Kl!
zQ({&5$3`0FYQT3nvvIF)N#*veM?xL`^23wjy*SMo=boi!i@K*K3N?S~Gs)3q2%Z^R
zVI!>E*Az@T3u;HURf<|)F?$e=7sf_^+BnhuWZ8n*<JeJw_D^m)Z*us>CJvBcDF@fK
zUfNv0L(}bftF$qrcBJVg7jb~VdC$Bvc5z7XF{*#{LP6Aceig`eeas4uNRf3`R8OPg
zL9|pn!?(tQA6L2J;fg0FWo`3Ydgo*Sp!T)lm7-=p*eYQNnL4WoapXp=;O=2OW4GAW
zRYf**<g~Q8=_Gu=JDPG2Dr^R<SqTg2aS;bdGZQQ9!^aZXlt?_O0f3I?;7*_x7>h5B
z>s{782@}GLOTfh9cVi&yJ`c9OmrNt&gllgOc6vy=LtrPlbV&v|iP4g8{w(i8*&U5W
z%i4o29jW-Q>$kivG?eFwdRD7a4Y~-(XSzlGf}B$HfTWG?Z!0eDPeFAfZp5|t3z1G{
UUqBR7cK`qY07*qoM6N<$g5RqWc>n+a

literal 0
HcmV?d00001

diff --git a/images/icons8-color-48.png b/images/icons8-color-48.png
new file mode 100644
index 0000000000000000000000000000000000000000..863937e6b93af946c999830591b7c2ffd5b68346
GIT binary patch
literal 1621
zcmV-b2CDgqP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00006VoOIv0RI60
z0RN!9r;`8x1`0_;K~!jg?OAP5R8<&$-g}qD-DP8015#NqM1~M?5YYG#^CKKJ%>_|u
zvYE>CN24`1){Oq)N2Fs;&ScFL+SH6wT8R8;rZg)J1ZG^&#)NTHPy}uGP&Va5SnhfI
zVI|n!k6oGZ56{o@KIeI#ch5a%-*Yc8j&Y1*9FG$;RzmkOGvj^C%LvE?a}tPL02}}q
zfEPe3fF>fUBH)<S<7pd<ypL1>7Zu4}P~4%NU4?Srz}f)xgs`LX)-w6X)VSDkT2rnB
z>p=>3V#nIm`CTOb08#mnGs1<yehjI1CY%I5)Y{tG*s^<Wey~0QUV*lvB1<TVT>!TH
zJI26}^?Lgq8djb(qQMe;-Gx#QNr-wdhy$`o-s0L?HxP)QfL5TRcx7}biPIQi9sme1
z`ywJ5jq2P>z?o6z?~80u6s7vghuKjo)BM740UgCFqe+BR1DNeEu7ug9fk+t98c31C
zR6^+{3<p$%p#pBMSYf5%kRQRAuEt?PjAFB%)6?=f(JVqROM{YV!tf7mA7xpLcr#Rh
z$zt9ILYf|L$mw7`PJg;|(?H5}p(uNec+=g)9cv1g5OB<h7y!l6)?NdjQY|spf#@a+
zp^zlSfG9(lIKSI1r4hku$ehHB<KFT75_ADvR3vwiXabOEAfJc8??rxh^rRN)>h8?>
zM6?G$hOQ!^F|PMaDwRNWZ)rY4-6Yn)fO#gAMY5EuXC45ae%JF`T%R=y#GmSM!I;r%
zo$J=3Xs*D<wU>{$xxzV{8j^`cwBH<rvgmIsHtCx2gKN9z><3|kN_Y_AXc$fv%?Z!e
zzoMq0TEL2;+p)52x(Yy&p$skHpX-;4@55}=mpX#xiF8cNp|UbxFa<Q0%rM(*wpsw`
zBOJ9WQ@KT%i4<7a2|yVZ>`I>6@Mk~;yjXm96ET1G@c0yNYboZh+o$uz42kf9k;g_0
zEqgNaB&L%*fqv&?F{n)AIV?eb$mXkwv7WC2Dqz*RI|l*0tQNPTzvi36Pvr*bdlarT
zWmbtWo~J?iGBLLPHGcv1P0XC4m9!tW<HqdigTuI5n}8&>ka__`v09o$!lP%*D40c^
zCV>#A7ScLKpU@N)vfoV=42VhZ-&xg5(Dwm_d_m9sKS-|yQQfN=djP#!iY7>tb&?u}
zkTFSz@|RjbwE!Yq*HTmnSvpCLL-1V9IHOf9q*{O=ZqgJb(mM76!k}bctep!N)k3NT
zNGzT9Gb|{C&q|ZHPM)D;yLWmQ8n@{m1wA|RN^A>e@3rOBv`XQZ{IjS^ZNBQ}D16Bq
zuL$YNKb&r|i$<El@i4<Rf>tjNIdaNNXeb!-MO<PQUSBPP|7#_z@SR^c*wUNjYs-*X
zm;opPN^DZ>Ilm{BW;5qrfA<g~g^MO~28cub3-JDm?aqzC6j0E!;{d>~`_(1xO!jp)
zEg5XSl^b(vwVH-WD*-*DQ~+GA#bMAJ1*JVC`y6i?U5TZ<In?5{f1+j{0GKJN(G(rk
zBuB3YPN`~Xp5<~vcqIecn;E$OM#1c@aevS=Uyr)lyM2+xYp(@V+vt(Fd@I6ySUa^2
z3U_)JGxG@p$-vD0rd527%{W0!^#I*~G%O32Clinb^5qKWzHE??_0<3tVrk{XU7FWf
zLoc=pN^gG-BHibloLo(dG`mW0*ztOva6$h%3Hst_M5*p78EOY)OW)f7>UG7^*zc`v
z6sIpoHz$D_<lg?xM!Xp+pnR)qfJ02n0jQkQ0L(bgP6PL64of4&c|(J8Nti;GmAm#D
zdc|nCA*<YG@8l5EJOF3?5|X*kpcJ7muURGLVUu}YrM;xnsIP!J%F1o_PI*FaE*J+!
zTcQpr;lZDgE(YUM0C{lqARY7#n4b&8Jn#tL2i&FJ=ZWw!z)2Ltrzne`3uHdqs%zPD
zCL6#7Ch4t8$NRqq<0I&vzH*1-gq#qb!py~#!rg%S%O^ija4)5q!G);~^Q>Ua17rA!
zY2C%H$%;hzOq2&88H89c?707lsgHnb3^Xxu6%X-GN0TGR>_#_^ag1Xej}LzXDoY~C
TYRb;b00000NkvXXu0mjfufPQ(

literal 0
HcmV?d00001

diff --git a/images/icons8-color-64.png b/images/icons8-color-64.png
new file mode 100644
index 0000000000000000000000000000000000000000..fd2bec4dd4f52db0268cad9cb70874a0e459f00e
GIT binary patch
literal 2294
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
Q<NyEw07*qoM6N<$g4{|&jsO4v

literal 0
HcmV?d00001

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 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset=utf-8>
+<head>
+    <link rel="stylesheet" href="button.css">
+</head>
+<body>
+<div id="buttonDiv"></div>
+<div>
+    <p>배경색 변경</p>
+</div>
+</body>
+<script src="options.js"></script>
+</html>
\ 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 @@
+<!--<!DOCTYPE html>-->
+<!--<html lang=en>-->
+<!--<meta charset=utf-8>-->
+<!--<head>-->
+<!--    <link rel="stylesheet" href="button.css">-->
+<!--</head>-->
+<!--<body>-->
+<!--<button id="changeColor"></button>-->
+<!--<script src="popup.js"></script>-->
+<!--</body>-->
+<!--</html>-->
\ 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