300x250
이제 기본 구조는 알았으니 내가 원하는 기능을 넣으면 된다.
내가 상상한 기능을 구상해보기 위해 대충 그림판으로 편집해서 구도를 잡았다..
나만 사용하는 확장 프로그램이기 때문에 우선 디자인은 크게 고려하지 않았다.
우선 background.js와 content.js와 같이 필요 없는 코드들을 비활성화했다.
그리고 아래와 같이 Popup.html, Popup.js를 수정하고 styles.css를 추가했다.
popup.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Popup</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>오늘 날짜</h1>
<div id="dateContainer">
<span id="fullDate"></span>
<button id="copyDate">복사</button>
</div>
<script src="popup.js"></script>
</body>
</html>
popup.js
document.addEventListener("DOMContentLoaded", () => {
const fullDateSpan = document.getElementById("fullDate");
const today = new Date();
// "YYYY년 MM월 DD일" 형식으로 날짜 생성
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, "0");
const day = String(today.getDate()).padStart(2, "0");
const fullDate = `${year}년 ${month}월 ${day}일`;
// 화면에 날짜 표시
fullDateSpan.textContent = fullDate;
// 복사 버튼 클릭 이벤트
document.getElementById("copyDate").addEventListener("click", () => {
navigator.clipboard.writeText(fullDate).then(() => {
alert(`"${fullDate}"이(가) 클립보드에 복사되었습니다.`);
}).catch(err => {
console.error("클립보드 복사 실패: ", err);
alert("클립보드 복사에 실패했습니다.");
});
});
});
styles.css
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 10px;
width: 200px; /* 팝업 너비 */
height: 100px; /* 팝업 높이 */
}
h1 {
font-size: 16px;
margin: 0 0 10px;
}
#dateContainer {
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
}
button {
margin-left: 10px;
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
}
button:hover {
background-color: #45a049;
}
그 결과 아래와 같이 오늘의 날짜가 나오고 복사 버튼을 누르면 키워드를 복사할 수 있다.
이제 일일히 내 운동 일기의 제목을 타이핑하지 않아도 된다.
이제 내가 자주 사용하는 키워드도 같은 방법으로 popup.html과 js에 두고 사용하면 된다.
이정도만 해도 내게 큰 도움이 된다.
반응형
'공부' 카테고리의 다른 글
| [JS] 내가 필요한 키워드 저장해두는 확장 만들기1 - 기본 구성 파악 (0) | 2025.01.07 |
|---|---|
| 메모] SQL Server Management Studio에서 편집할 데이터 수 늘리기 (1) | 2024.11.07 |
| 메모] mssql 대소문자 구분해서 검색하는 방법 (0) | 2024.11.06 |
| Nvidia Omniverse)USD Composer에서 파이썬 코드 제어로 공 굴리기 (0) | 2024.08.29 |
| 맥미니에 로컬 대화형 ai 라마3.1설치 (2) | 2024.08.24 |