o k a y
This commit is contained in:
parent
76180121d6
commit
75dd38dcfc
21
LICENSE
Normal file
21
LICENSE
Normal file
@ -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.
|
||||
34
background.js
Normal file
34
background.js
Normal file
@ -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.');
|
||||
});
|
||||
13
button.css
Normal file
13
button.css
Normal file
@ -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;
|
||||
}
|
||||
BIN
images/icons8-color-128.png
Normal file
BIN
images/icons8-color-128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
images/icons8-color-16.png
Normal file
BIN
images/icons8-color-16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 549 B |
BIN
images/icons8-color-32.png
Normal file
BIN
images/icons8-color-32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
images/icons8-color-48.png
Normal file
BIN
images/icons8-color-48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
images/icons8-color-64.png
Normal file
BIN
images/icons8-color-64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
25
manifest.json
Normal file
25
manifest.json
Normal file
@ -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"
|
||||
}
|
||||
14
options.html
Normal file
14
options.html
Normal file
@ -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>
|
||||
52
options.js
Normal file
52
options.js
Normal file
@ -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);
|
||||
11
popup.html
Normal file
11
popup.html
Normal file
@ -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>-->
|
||||
48
popup.js
Normal file
48
popup.js
Normal file
@ -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!`);
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
// // });
|
||||
Loading…
x
Reference in New Issue
Block a user