📍 기능 (안뜨면 새로고침)
1. 작업 목록창 정렬기능
=> 아래 예시는 타이틀(en) 정렬
2. 작업창 여러개 탭으로 한번에 열기 / 최대 25(팝업 허용 필수)
3. 화면 상단과 좌측에 각종 버튼 고정
4. 단축키
- 기본적인 저장 단축키 (Ctrl + s)
- 검수 탭 전환 (Ctrl + 1, Ctrl + 2)
- 이미지 열기 (Ctrl + e)
5. 이미지 열기
미디어 검수 화면에서 Ctrl + e 클릭시 모든 이미지가 보임
화살표로 넘기기 가능
6. 작업창 들어가면 헤더가 타이틀명으로 바뀜
📍 사용법
1. 크롬 확장 프로그램 다운
Tampermonkey
The world's most popular userscript manager
chrome.google.com
2. 새 스크립트 만들기
3. 아래 코드 복붙
📍 코드
// ==UserScript==
// @name 통합
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match http://gdb-cms.onstove.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=onstove.com
// @grant none
// ==/UserScript==
(function() {
const currentUrl = window.location.href.slice(27);
showHeaderTitle(currentUrl); // 게임 검수 타이틀 상단 노출
taskList(currentUrl); // 목록용 기능 동작
taskVerify(currentUrl, document.querySelectorAll("span")[1]); // 상단에 저장 등 버튼 추가 기능
taskVerify(currentUrl, document.getElementsByClassName('v-list-group__items')[2]); // 사이드 메뉴에 저장 등 버튼 추가 기능
// 단축키 메서드
document.addEventListener("keydown", function(event) {
if(window.location.href.slice(27).includes('task/verify/text/')) {
// 저장
if (event.ctrlKey && event.key === "s") {
event.preventDefault();
const buttons = document.querySelectorAll("button");
buttons.forEach(function(btn) {
if (btn.innerText == "저장") {
btn.click();
}
});
}
// 미디어 검수 (Ctrl + 2)
if (event.ctrlKey && event.key === "2") {
event.preventDefault();
const tags = document.querySelectorAll("a");
tags.forEach(function(tag) {
if (tag.innerText.includes("미디어 검수")) {
tag.click();
showImages();
}
});
}
}
if(window.location.href.slice(27).includes('task/verify/media/')) {
// 데이터 검수 (Ctrl + 1)
if (event.ctrlKey && event.key === "1") {
event.preventDefault();
const tags = document.querySelectorAll("a");
tags.forEach(function(tag) {
if (tag.innerText.includes("텍스트 검수")) {
tag.click();
}
});
}
if (event.ctrlKey && event.key === "s") { //저장 및 리뷰, 승인 요청
event.preventDefault();
const buttons = document.querySelectorAll("button");
buttons.forEach(function(btn) {
if (btn.innerText.includes("저장 및")) {
btn.click();
}
});
}
if (event.ctrlKey && event.key === "e") { //이미지 열기
event.preventDefault();
const container = document.createElement('div');
container.classList.add('image-gallery-container');
document.querySelectorAll("p")[1].appendChild(container);
const images = document.querySelectorAll('.v-image__image--contain');
images.forEach((image, index) => {
const img = document.createElement('img');
img.src = window.getComputedStyle(image).getPropertyValue('background-image').slice(38, -2);
img.width = 400;
img.height = 400;
img.style.border = '3px solid red';
container.appendChild(img);
if (index !== 0) {
img.style.display = 'none';
}
});
let currentImageIndex = 0;
function changeImageGallery(event) {
const key = event.key;
const images = container.querySelectorAll('img');
if (key === 'ArrowLeft' && currentImageIndex > 0) {
images[currentImageIndex].style.display = 'none';
currentImageIndex -= 1;
images[currentImageIndex].style.display = 'block';
} else if (key === 'ArrowRight' && currentImageIndex < images.length - 1) {
images[currentImageIndex].style.display = 'none';
currentImageIndex += 1;
images[currentImageIndex].style.display = 'block';
}
}
document.addEventListener('keydown', changeImageGallery);
}
}
});
function showImages() {
// 버튼 요소 생성
const button = document.createElement("button");
button.innerText = "열기(ctrl + E)";
button.style.backgroundColor = "gray";
button.style.color = "Red";
document.querySelectorAll("span")[1].appendChild(button);
button.addEventListener("click", function() {
const container = document.createElement('div');
container.classList.add('image-gallery-container');
document.querySelectorAll("p")[1].appendChild(container);
const images = document.querySelectorAll('.v-image__image--contain');
images.forEach((image, index) => {
const img = document.createElement('img');
img.src = window.getComputedStyle(image).getPropertyValue('background-image').slice(38, -2);
img.width = 400;
img.height = 400;
img.style.border = '3px solid red';
container.appendChild(img);
if (index !== 0) {
img.style.display = 'none';
}
});
let currentImageIndex = 0;
function changeImageGallery(event) {
const key = event.key;
const images = container.querySelectorAll('img');
if (key === 'ArrowLeft' && currentImageIndex > 0) {
images[currentImageIndex].style.display = 'none';
currentImageIndex -= 1;
images[currentImageIndex].style.display = 'block';
} else if (key === 'ArrowRight' && currentImageIndex < images.length - 1) {
images[currentImageIndex].style.display = 'none';
currentImageIndex += 1;
images[currentImageIndex].style.display = 'block';
}
}
document.addEventListener('keydown', changeImageGallery);
});
}
function makeButton(buttonName) { // 버튼 생성 함수
const button = document.createElement("button");
button.innerText = buttonName;
return button;
}
function taskVerify(currentUrl, text) {
const saveButton = makeButton('저장');
saveButton.className = 'mr-3 pa-4 v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--small';
saveButton.addEventListener('click', () => {
if(currentUrl.includes('task/verify/')) {
const buttons = document.querySelectorAll('button');
buttons.forEach(function (btn) {
if (btn.innerText == '저장') {
btn.click();
}
});
}
});
const nextButton = makeButton('저장 및 다음 단계');
nextButton.className = 'mr-3 pa-4 v-btn v-btn--is-elevated v-btn--has-bg theme--dark v-size--small primary';
nextButton.addEventListener('click', () => {
const buttons = document.querySelectorAll('button');
buttons.forEach(function (btn) {
if (btn.innerText.includes('저장 및 다음 단계')) {
btn.click();
}
});
});
const reviewButton = makeButton('저장 및 리뷰 요청');
reviewButton.className = 'mr-3 pa-4 v-btn v-btn--is-elevated v-btn--has-bg theme--dark v-size--small purple';
reviewButton.addEventListener('click', () => {
const buttons = document.querySelectorAll('button');
buttons.forEach(function (btn) {
if (btn.innerText.includes('저장 및 리뷰 요청')) {
btn.click();
}
});
});
const approveButton = makeButton('저장 및 승인 요청');
approveButton.className = 'mr-3 pa-4 v-btn v-btn--is-elevated v-btn--has-bg theme--dark v-size--small success';
approveButton.addEventListener('click', () => {
const buttons = document.querySelectorAll('button');
buttons.forEach(function (btn) {
if (btn.innerText.includes('저장 및 승인 요청')) {
btn.click();
}
});
});
const refuseButton = makeButton('반려');
refuseButton.className = 'mr-3 pa-4 v-btn v-btn--is-elevated v-btn--has-bg theme--dark v-size--small red';
refuseButton.style.backgroud = 'red';
refuseButton.addEventListener('click', () => {
const buttons = document.querySelectorAll('button');
buttons.forEach(function (btn) {
if (btn.innerText.includes('반려')) {
btn.click();
}
});
});
text.appendChild(saveButton);
text.appendChild(nextButton);
text.appendChild(reviewButton);
text.appendChild(approveButton);
text.appendChild(refuseButton);
}
// 게임 검수 타이틀 상단 노출
function showHeaderTitle(currentUrl) {
if(currentUrl.includes('task/verify/')) {
let headerTitle = document.getElementsByClassName("subtitle-1")[0].textContent;
let title = document.getElementsByClassName("col col-12")[3].getElementsByClassName("mb-0 body-2 primary--text")[0].innerText;
let changeTitle = headerTitle.replace('게임검색 CMS LIVE', title);
document.getElementsByClassName("subtitle-1")[0].textContent = changeTitle;
document.getElementsByClassName("subtitle-1")[0].style.fontWeight = "bold";
}
}
function taskList(currentUrl) { // 목록용
if(currentUrl == "task/list") {
addBtn();
addLinksPopupButton();
function addBtn() {
const thead = document.querySelector("table thead");
const heads = Array.from(thead.querySelectorAll("th"));
for (let i = 1; i < heads.length; i++) {
const button = document.createElement("button");
button.innerText = "Sort";
button.style.backgroundColor = "gray";
button.style.color = "white";
button.id = "sort" + i;
heads[i].appendChild(button);
button.addEventListener("click", (function(index) {
return function() {
sorting(index);
};
})(i));
}
}
function sorting(i) {
const tbody = document.querySelector("table tbody");
const rows = Array.from(tbody.querySelectorAll("tr"));
rows.sort((a, b) => {
const aVal = a.querySelectorAll("td")[i].textContent;
const bVal = b.querySelectorAll("td")[i].textContent;
return aVal.localeCompare(bVal);
});
rows.forEach((row) => tbody.appendChild(row));
}
function addLinksPopupButton() {
const element = document.querySelector(".body-2.col.align-self-end");
if (!element) {
console.error("Failed to find element to insert button.");
return;
}
// 입력 필드 생성
const input = document.createElement("input");
input.type = "number";
input.min = 1;
input.max = 25;
input.value = 10;
input.style.backgroundColor = "gray";
// 버튼 요소 생성
const button = document.createElement("button");
button.innerText = "열기";
button.style.backgroundColor = "gray";
button.style.color = "Red";
// 버튼 클릭 이벤트 리스너 등록
button.addEventListener("click", function() {
const links = document.querySelectorAll("a[href^='/task/verify/text']");
const maxLinks = Math.min(links.length, input.value);
for (let i = 0; i < maxLinks; i++) {
window.open(links[i].href);
}
});
if (!element.insertAdjacentElement("afterend", button)) {
console.error("Failed to insert button element.");
return;
}
// 선택한 요소 다음에 입력 필드와 버튼 삽입
element.insertAdjacentElement("afterend", button);
element.insertAdjacentElement("afterend", input);
}
}
}
})();