유튜브에서 크롬 확장 프로그램을 만드는 영상을 봤더니
갑자기 나도 만들고 싶어졌다.
기왕이면 내가 필요한 기능을 넣어서 만들어보기로 했다.
예를 들어, 나는 운동을 할때 비공개로 일기를 적어놓는다.
제목을 년도와 날짜로 표시하는데 이걸 일일히 직접 작성한다.
아마 확장 프로그램으로 오늘의 날짜를 제목에 맞게 복사할 수 있다면
큰 수고를 덜 수 있을 것 같다.
이제 확장 프로그램을 제일 빨리 만들어 볼 수 있는 방법을 사용했다.
바로 ChatGPT에게 물어보는 것이다.
자바스크립트는 데이터가 많아서 그런지 쉽게 대답해준다.
manifest.json
확장의 메타데이터를 정의하며, 필수적인 파일입니다. 다음과 같은 정보를 포함합니다
{
"manifest_version": 3,
"name": "My Chrome Extension",
"version": "1.0",
"description": "A sample Chrome extension.",
"permissions": ["tabs", "storage"],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["https://*/*"],
"js": ["content.js"]
}
],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}
background.js
확장 프로그램의 백그라운드 작업(예: 이벤트 처리)을 담당합니다.
chrome.runtime.onInstalled.addListener(() => {
console.log("Extension installed!");
});
content.js
웹 페이지에서 실행되는 스크립트로, DOM을 조작하거나 데이터를 추출할 때 사용됩니다.
document.body.style.border = "5px solid red";
console.log("Content script loaded.");
popup.html
확장의 팝업 인터페이스를 정의합니다.
<!DOCTYPE html>
<html>
<head>
<title>Popup</title>
<script src="popup.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, Extension!</h1>
<button id="clickMe">Click me</button>
</body>
</html>
popup.js
팝업의 동작을 정의합니다.
document.getElementById("clickMe").addEventListener("click", () => {
alert("Button clicked!");
});
styles.css
팝업의 스타일을 정의합니다.
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
이제 이 코드들을 각각 문서로 만들어서 아래와 같이 만들어주면 완성이라고 한다.
이런 것도 알아서 해주면 좋을텐데 아쉽게도 수동으로 해야한다.
시키는대로 코드들을 문서에 복사한 후 이름을 맞춰 정리했다.
icon.png 파일은 그냥 그림판으로 대충 색 채워서 만들고 3개를 복사해서 만들었다. 그래도 별 문제는 없어보인다.
이제 브라우저에서 확장 설정에 들어가 개발자 모드를 활성화하고
확장 파일 로드 버튼을 통해 만들어둔 폴더를 적용했다.
새로고침을 하니 페이지 테두리에 빨간 네모가 생기고
확장 아이콘을 클릭하니 Hello Extension! 문구가 적힌 패널이 뜬다.
빨간 테두리는 content.js에서 작동했고
아이콘을 클릭 후 나오는 패널은 popup에서 구성된다는 것을 알았다.
Click me 버튼은 클릭했지만 반응이 없었다. popup에서 일부 수정이 필요해보인다.
일단 확장 프로그램에 필요한 기본 구성을 알아보고
각각의 기능이 어느 위치에서 작동하는지를 확인할 수 있었다.
'공부' 카테고리의 다른 글
| 메모] 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 |
| 메모] 윈도우에서 ln -s 심볼릭 링크 사용하기 + 문제해결 (0) | 2024.07.10 |