크롬익스텐션으로 다모앙 사이트 추가기능 직접 구현하기

알림

이프로부족 172.♡.33.56

2024.03.29 21:34

1,041

쓰기

안녕하세요. 클리앙에서 클리앙봇을 만들었던 이프로부족입니다.

주인장님이 바쁘신 관계로 필요한 기능은 직접 구현했는데, 필요하신 분이 계실 것 같아 공유합니다.

User JavaScript and CSS 확장프로그램설치
1. https://chromewebstore.google.com/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld
다모앙사이트에서새로고침한후에
주소표시줄옆의익스텐션폴더아이콘을클릭해서설치한익스텐션을클릭합니다. (자주사용하실경우고정)

Rule Name, URL Pattern (https://damoang.net) 과 댓글 추가한소스코드를 JS 부분에붙여넣기합니다.

Save 버튼이나 'Ctrl + S' 로저장합니다.
다모앙사이트를새로고침합니다.

#### 현재소스코드에구현된기능 ####

글목록에서글자만클릭되던걸영역이클릭되도록수정
각게시판단축키
사이트외부링크일경우새탭에서열기
메모 기능
북마크 기능 ( initBookmark 함수내의 bookmark 내용을 원하시는 대로 변경하시면 됩니다. )

그림 첨부가 잘 안돼서 우선 텍스트로 대치합니다.

링크

https://chromewebstore.google.com/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld

29 회 연결

댓글 10 / 1 페이지

이프로부족 (162.♡.91.81)

03.29 21:35

// ---- 메모 기능 구현 ----

var memos = {};

function initMemo() {

function addNoteToMember() {
// .member 클래스를 가진 모든 요소를 찾습니다.
var memberElements = document.querySelectorAll('.member');

// 새로 추가할 HTML 내용을 문자열로 준비합니다.
var newHtmlContent = `
<span class="contact_note">
<button class="button_note" style="border:none; outline:none">
<span class="fa fa-file-text"></span>
</button>
<span class="content_memo" style="color:red;"></span>
</span>
`;

// NodeList의 각 요소에 대해 반복하여 새 HTML 내용을 추가합니다.
memberElements.forEach(function(e) {
var nick = e.innerText;
e.insertAdjacentHTML('afterend', newHtmlContent);
var memoContent = memos[nick] ?? "";
var memoElement = e.parentElement.querySelector('.content_memo');
memoElement.dataset.nick = nick;
memoElement.innerText = memoContent;
});
}

function updateMemoAndSave(nick, memoContent) {
if (memoContent != null && memoContent.length > 0) {
memos[nick] = memoContent;
} else {
delete memos[nick];
}
localStorage.setItem('memos', JSON.stringify(memos));

// data-name 속성이 'nick'인 .content_memo 요소를 모두 찾습니다.
var elements = document.querySelectorAll('.content_memo[data-nick="' + nick + '"]');

// 찾은 요소들의 innerText를 'test'로 설정합니다.
elements.forEach(function(element) {
element.innerText = memoContent;
});
}

document.addEventListener('click', function(e) {
// 클릭된 요소가 .button_note 클래스를 가진 버튼인지 확인합니다.
if (e.target.closest('.button_note')) {
var nick = e.target.closest('.me-2').querySelector('.member').innerText;
var memoContent = memos[nick] ?? "";
var input = prompt(`[${nick}] 메모를 입력하세요.\n메모를 지우려면 빈칸으로 두세요.`, memoContent);
updateMemoAndSave(nick, input);
e.target.closest('.contact_note').querySelector('.content_memo').innerText = input;
}
});

var storedMemos = localStorage.getItem('memos');
if (storedMemos) {
memos = JSON.parse(storedMemos);
}

addNoteToMember();
}

function click_title_div() {
document.addEventListener('click', function(event) {
// 클릭된 요소가 li.list-group-item 내의 div 요소인지 확인합니다.
var clickedDiv = event.target.closest('li.list-group-item div');
if (clickedDiv) {
// 클릭된 div 내의 첫 번째 a 태그를 찾습니다.
var link = clickedDiv.querySelector('a');
// 해당 a 태그의 href가 존재하면 페이지를 이동시킵니다.
if (link && link.href) {
window.location.href = link.href;
}
}
});
}

function open_link_new_tab() {
document.addEventListener('click', function(event) {
// 이벤트의 타겟이 되는 요소가 a 태그인지 확인합니다.
var target = event.target.closest('a');

// a 태그를 클릭했는지 확인합니다.
if (target) {
// 링크의 도메인을 추출합니다.
var linkDomain = new URL(target.href).hostname;
// 현재 페이지의 도메인을 얻습니다.
var currentDomain = window.location.hostname;

// 링크의 도메인이 현재 페이지의 도메인과 다른 경우
if (linkDomain !== currentDomain) {
// 새 탭에서 링크를 열도록 설정합니다.
target.target = '_blank';
// 보안을 위해 rel 속성에 noopener noreferrer 값을 추가합니다.
target.rel = 'noopener noreferrer';

// 기본 동작을 방지합니다. (옵셔널: 필요에 따라 제거)
event.preventDefault();
// 새 탭에서 링크를 강제로 엽니다.
window.open(target.href, '_blank');
}
}
});
}

function initBookmark() {
const bookmark = [
['/free', '모두의 자게'],
['/development', '개발한당'],
['/ai', 'AI당'],
];

var html = `
<div class="dropdown-header">
즐겨찾기
</div>
<div id="sidebar-site-menu" class="mb-3">

`;

for (var i=0; i < bookmark.length; i++) {
var e = bookmark[i];

var itemHtml = `
<div class="nav-item">
<a class="nav-link" href="https://damoang.net/${e[0]}" data-placement="left" target="_self">
<i class="bi-clipboard nav-icon"></i>
<span class="nav-link-title">
[${i+1}] ${e[1]}
</span>
</a>
</div>
`;
html += itemHtml;
}
html += `
</div>
`;

// .na-menu .nav의 첫 번째 자식 요소를 선택합니다.
var firstChild = document.querySelector('.na-menu .nav > :first-child');
firstChild.insertAdjacentHTML('beforebegin', html);

// 단축키 설정
// 기본 도메인 설정
const baseDomain = window.location.origin;

document.addEventListener('keydown', function(event) {
// 눌린 키에 해당하는 URL 경로를 Map에서 가져옵니다.
var key = parseInt(event.key);

if (0 < key && key < bookmark.length) {
var path = bookmark[key-1][0];
window.location.href = `${baseDomain}${path}`;
}
});
}

$(document).ready(function(){

initMemo(); // 메모 기능 초기화
initBookmark(); // 즐겨찾기 메뉴 추가

click_title_div(); // 글 제목에서 글씨 아닌 곳 클릭해도 클릭되게 하기
open_link_new_tab(); // 외부 사이트 링크는 새탭에서 열기

});

// ---- 메모 기능 구현 ----

var memos = {};

// 찾은 요소들의 innerText를 'test'로 설정합니다.
		elements.forEach(function(element) {
		  element.innerText = memoContent;
		});
	}
	
	document.addEventListener('click', function(e) {
	  // 클릭된 요소가 .button_note 클래스를 가진 버튼인지 확인합니다.
	  if (e.target.closest('.button_note')) {
	  	var nick = e.target.closest('.me-2').querySelector('.member').innerText;
		var memoContent = memos[nick] ?? "";
	  	var input = prompt(`[${nick}] 메모를 입력하세요.\n메모를 지우려면 빈칸으로 두세요.`, memoContent);
	  	updateMemoAndSave(nick, input);
	  	e.target.closest('.contact_note').querySelector('.content_memo').innerText = input;
	  }
	});	
	
	var storedMemos = localStorage.getItem('memos');
	if (storedMemos) {
		memos = JSON.parse(storedMemos);
	}
	
	addNoteToMember();
}

function initBookmark() {
	const bookmark = [
		['/free', '모두의 자게'],	
		['/development', '개발한당'],
		['/ai', 'AI당'],	
	];
	
	var html = `
<div class="dropdown-header">
	즐겨찾기
</div>
<div id="sidebar-site-menu" class="mb-3">

`;
	
	for (var i=0; i < bookmark.length; i++) {
		var e = bookmark[i];

// 단축키 설정
	// 기본 도메인 설정
	const baseDomain = window.location.origin;
	
	document.addEventListener('keydown', function(event) {
	  // 눌린 키에 해당하는 URL 경로를 Map에서 가져옵니다.
	  var key = parseInt(event.key);
	  
	  if (0 < key && key < bookmark.length) {
		var path = bookmark[key-1][0];
	    window.location.href = `${baseDomain}${path}`;
	  }
	});
}

$(document).ready(function(){

initMemo();                   // 메모 기능 초기화
	initBookmark();		// 즐겨찾기 메뉴 추가

click_title_div();		// 글 제목에서 글씨 아닌 곳 클릭해도 클릭되게 하기
	open_link_new_tab();	// 외부 사이트 링크는 새탭에서 열기

});