From f236859e05abd0fed91d363024ac7d2ec97f6657 Mon Sep 17 00:00:00 2001 From: "kam (from the studio)" Date: Wed, 11 May 2022 12:59:44 +0200 Subject: [PATCH] init with tutorial --- .DS_Store | Bin 0 -> 6148 bytes background.js | 6 ++++++ button.css | 13 +++++++++++++ images/get_started128.png | Bin 0 -> 2816 bytes images/get_started16.png | Bin 0 -> 495 bytes images/get_started32.png | Bin 0 -> 814 bytes images/get_started48.png | Bin 0 -> 1231 bytes manifest.json | 30 ++++++++++++++++++++++++++++++ options.html | 14 ++++++++++++++ options.js | 16 ++++++++++++++++ popup.html | 10 ++++++++++ popup.js | 21 +++++++++++++++++++++ 12 files changed, 110 insertions(+) create mode 100644 .DS_Store create mode 100644 background.js create mode 100644 button.css create mode 100644 images/get_started128.png create mode 100644 images/get_started16.png create mode 100644 images/get_started32.png create mode 100644 images/get_started48.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/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..cae3c3176d55436f2c535e51583b76fdfcaac68c GIT binary patch literal 6148 zcmeHKO^ee&7=CBB?j|iO6$D-I5b&UfvUI6y5ig1W-}ol+e0Z7 z!K*(&uYTa~Q2&Gf!kbrp=0n)DdQ@DQx6C|mX5Qyb=9y+DLqx1s2Af1pBC=2f*6OH! zVWMA@1zXZBt3W1m3@IZ{B_$LrM4JYqfKlLIQ$W1CYvhwh`}B;CzrP!FK>4kh@B1nNAMOM^#L2eYICKaO{P13B^q&WAb93Pp5?`wc0ak7ZvG+dh`R66=riR6ol% zKaHcjXt%$xrRCbGl~v2GH|)mgM&nU`#K--@E6Tj*WrOC0eiVehm+eJCG1?82oj5!S zlRMdMuL!dTB6yec7y-)n{QFTj9yHJ1;7Q>{NtnreD#ydUC<*wu$IB$hWxP%<{kvW< zLLTd)>pK_*k!{(7=K5sP+3ak!obI))Y0H^(yX}^9rE_&UwQXzt(#?C1%jYj&y?*od z-TRN9B#ju>QfX&2{)EqPDvBKSvn1xp5bc7qCUs4q?^B^IW<}1Sn49W6vU7;8&SQ$G z6myw^GXnFF;yKQXISww3ooEI0|IBKf=uw!5HwqX9{)7TzeQ;0&x*BH+<|eU5N|uEv={w7|@VfRw>hMuESozz=~trx^eM literal 0 HcmV?d00001 diff --git a/background.js b/background.js new file mode 100644 index 0000000..8c3b37e --- /dev/null +++ b/background.js @@ -0,0 +1,6 @@ +let color = "#3aa757"; + +chrome.runtime.onInstalled.addListener(() => { + chrome.storage.sync.set({ color }); + console.log("Default color set to %cgreen", `color: ${color}`); +}); diff --git a/button.css b/button.css new file mode 100644 index 0000000..a9946e2 --- /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/get_started128.png b/images/get_started128.png new file mode 100644 index 0000000000000000000000000000000000000000..4c1cf87615c86adb4e84f935297e12f425548a9e GIT binary patch literal 2816 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 literal 0 HcmV?d00001 diff --git a/images/get_started32.png b/images/get_started32.png new file mode 100644 index 0000000000000000000000000000000000000000..77152233a85eb4834ebbb36106282159e75f1337 GIT binary patch literal 814 zcmV+}1JV46P)~_VHC%IvsV{qU02gZG!e{~XbscS1eJo8EDJQm zFhvk55~V;XLZOH3A*h~$uqcQKdyxpDV0-f+i6BwI!tw$oq#3okx;s1WOb>QZyzK6{ zt>%>YtLy^0xeqHPh?R8~)RH*k zMp^bOW*Km0LUE#mKLAF<@|b-Hz!uD>0+k)a62r{#U9|V?mynHxvtv^ z-D6S%8|fYu07G^TI#K+W%A_RV^D5nyHFVbuAc!IhwawTM9^l;2t)HFdioUH_vH0;cNVfM$AoXB9aFf?D3mQ6Z$PMSpy{C> zue5RVbPvhA9$Dn(sjHaDAo=^<4gEu&0%gyB^wssWc83oB$GnnC>tjE1#%Uy5sdfNC z6w$S`)A3XeJNR;ljvg6bcBgg#xvYX$6LCy=6ip{(%A??ZZ(%;QL1PBWD{&9WoBAKP zhh!v2jWz()YSX;?se~Md%-&AUAV!4YN4MfIK^@4Its!eHx2}O##&G z6G)x9t_>hC&`;9L7%rz#Q}D_H6ZYW1y84IJ3xsQJ)a?#LEQQNyq$4j^Fgr=T(?(sP6}>^g;{%%of{K8ucrXRO sVz8$m*>A5K)NDzEiKRI~*y`)~FN@&$%M1luYybcN07*qoM6N<$g4-l}MF0Q* literal 0 HcmV?d00001 diff --git a/images/get_started48.png b/images/get_started48.png new file mode 100644 index 0000000000000000000000000000000000000000..94ddde9b35a3d70e95966d838a3948959465272f GIT binary patch literal 1231 zcmV;=1Tg!FP)Fbri=xz4z|6r5$Vp+A-XOEoCrSmo3{+#1ONL zgz3vBf(a!WBMM+fc&$T2Nv&-!fy2Y=IS@}e~dXVyOn0ldATkqhptvjJwz-Eu%P z0CU40c(N+)@jHrYd2D4R7u;9>zbB-N)@|9VI9T?={c|9d%`BVv;E84;?w@Dtug?)#jOj=E3z z9C(oKQ#u0C=ssluqSbxM0z|9(l+1xxbf0n&h*kHRM?fwuL$;UAc2;O3L&`{4_nH96 zrDaIl8pzyG34rT%m>U!K7JK$Qk=4M_r$6B<$2as`>AR!*pAN<4H(>zLnuGDx!gCxbQ`=kLFw`|3*zlBkcNXL;W2LDtZ zIL7Hxah_25;iMAd;a&9d`cBM7|#w}aPDz?$yvt#& zUQ-FLYt;rIT>C6PIux8PRkK~W^Lsz?qGeG>A!-28nnPBxjblSWO^+2$m&&k9C1`yv zxd3u$8B>8U{SF1K?buKVU3Nv1C1fk+vTI@bz)n{fqbWP8PioWvVcR1yZ&vZz@Yr;Y z37KottDw1imrkpCAQ6iRz@*nLOl=&4pQr&c&Yq^wDlP~>!GC^|+Lchpu4B&=V_Kbf zZKF+Ma^kP#M!?^HYWn4CwC@8vzD7d2^+R$2B3>_^GXvC=$eK>xo-bipEFj$IPJR+A z-JfI66S3!O7lo#3J%O8pL_8Oh4-h=}E1ok0yi%*zBp2!`WC|=Ig5zE7_5ok(n`Frf zEl(MfE}h0|1AgbHQLlbn01>a3+s#dsKNLwCM4?6GaJ_-4(c=hLKGeP@R-6uet#7fp zFha*}6V@d{LbCaIw~3JJB+|u~7p^N2=s$(0xsesZZ8~?GXxJ26UfA;`+IE^~tTqt1 z`ZdN&2N%9Cq&OXT_U%M|=6SZ)Z>PS(%y&bf>C$kHldE-!Kxw{6O^J*>PsH>0MU=B` z=wj@L&I^#;{!yG~;7jPUm$Id38Fdwl0GJ9!xI7ldtcL>2^zk61L{I{5BA#)~q8AF9 z5NV3qjV^O7Fftq9#^gAko$sDkR7;InJe-+3&+8|^H-YFEF=iN$g$yi9r<=KsTT`fE tm2uxq9PW_>;y%JJuHWwfrTgD){sr(yu)2 + + + + + + +
+
+

Choose a different background color

+ +
+ + diff --git a/options.js b/options.js new file mode 100644 index 0000000..8a2dbac --- /dev/null +++ b/options.js @@ -0,0 +1,16 @@ +let page = document.getElementById("buttonDiv"); +let selectedClassName = "current"; + +let colorPicker = document.getElementById("colorPicker"); + +colorPicker.addEventListener("change", () => { + let color = colorPicker.value; + chrome.storage.sync.set({ color }); +}); + +window.addEventListener("load", () => { + chrome.storage.sync.get("color", (data) => { + let currentColor = data.color; + colorPicker.value = currentColor; + }); +}); diff --git a/popup.html b/popup.html new file mode 100644 index 0000000..eb90a94 --- /dev/null +++ b/popup.html @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/popup.js b/popup.js new file mode 100644 index 0000000..4ff3ea9 --- /dev/null +++ b/popup.js @@ -0,0 +1,21 @@ +// Init button with user's preferred color +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, + }); +}); + +var setPageBackgroundColor = function () { + chrome.storage.sync.get("color", ({ color }) => { + document.body.style.backgroundColor = color; + }); +};