[Project] 유튜브 댓글 바로보기 크롬확장프로그램
샤워하면서 무한도전 지디&정형돈 동묘 뮤직비디오 촬영 영상을 보고 있을 때였다
나는 항상 유튜브나 숏츠, 릴스등을 볼 때 댓글을 같이 보는 편인데
휴대폰으로 보면 댓글을 같이 볼 수있지만
pc에서는 댓글을 보러 화면을 스크롤하면 막상 화면은 보이지가 않음
그래서 직접 만들어보기로 했다
피그마로 대충 만들어봣는데 형편없다,
암튼 이런 느낌으로 만들 거다..라는 게 중요한 거니까
pc로 유튜브를 보는 사용자가 가장 접근하기 쉬운 게 뭘까 생각하다가
크롬 확장 프로그램에 한번 도전해 보기로 했다
웹서핑하고 여기저기 찾아보니 간단하게 팝업으로 띄우는 건 그렇게 어렵지 않았는데
유튜브 API를 처음 다뤄봐서 시간이 좀 걸렸음
전체적인 파일 구성은 우선 이렇게 구성했고
우선 기본적으로 manifest.json이라는 파일이 필요한데
쉽게 말해서 크롬 확장 프로그램의 이름, 버전, 권한 및 파일들을 정의해 둔 거임
크롬 확장프로그램으로 업로드하려면 필수
// manifest.json
{
"manifest_version": 3,
"name": "YouTube Comments Viewer", // 확장 프로그램 이름
"version": "1.0", // 확장 프로그램 버전
"description": "Fetch and display comments from a YouTube video.", // 확장 프로그램 설명
"permissions": [
"activeTab", // 현재 활성 탭에 대한 접근 권한
"*://*.googleapis.com/*" // YouTube API에 대한 접근 권한
],
"background": {
"service_worker": "background.js" // 백그라운드 스크립트
},
"action": {
"default_popup": "popup.html" // 확장 프로그램 아이콘 클릭 시 표시될 팝업
}
}
확장프로그램 아이콘을 클릭하면 나오는 팝업화면을 구성하는 popup.html
css는 우선 실행부터 확인해 보려고 비워둠
<!-- popup.html -->
<html>
<head>
<title>YouTube Comments Viewer</title>
<style>
~
</style>
</head>
<body>
<h1>YouTube Comments</h1>
<div id="comments">Loading...</div> // 댓글을 표시할 영역
<script src="popup.js"></script> // 팝업 스크립트
</body>
</html>
background.js 는 youtube API 키를 발급받아서
사용자가 클릭한 유튜브 링크의 댓글을 추천순으로 가져왔고
popup.js 는 현재 youtube url로 API를 통해 댓글을 가져오고,
반복해서 팝업 창에 표시하도록 짬
물론 youtube API 문서보면서 해야 함
// popup.js
document.addEventListener('DOMContentLoaded', () => {
// 현재 활성 탭의 URL을 가져옴
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
const url = new URL(tabs[0].url); // URL 객체 생성
const videoId = url.searchParams.get('v'); // URL에서 비디오 ID 추출
if (videoId) {
// 백그라운드 스크립트에 메시지를 보내 댓글을 가져옴
chrome.runtime.sendMessage({ action: "fetchComments", videoId: videoId }, (response) => {
const commentsDiv = document.getElementById('comments'); // 댓글을 표시할 div 요소
commentsDiv.innerHTML = ''; // 기존 내용 초기화
if (response.error) {
commentsDiv.textContent = 'Failed to load comments: ' + response.error; // 에러 메시지 표시
} else {
// 댓글 데이터를 반복하여 표시
response.comments.forEach((commentThread) => {
const comment = commentThread.snippet.topLevelComment.snippet; // 댓글 데이터 추출
const commentElement = document.createElement('div'); // 새로운 div 요소 생성
commentElement.className = 'comment'; // 클래스 설정
commentElement.innerHTML = `
<img src="${comment.authorProfileImageUrl}" alt="Author Image"> // 프로필 이미지
<div class="comment-content">
<div class="comment-author">${comment.authorDisplayName}</div> // 작성자 이름
<div class="comment-text">${comment.textDisplay}</div> // 댓글 내용
<div class="comment-stats">
<span class="comment-likes"> 👍 ${comment.likeCount}</span> // 좋아요 수
</div>
</div>
`;
commentsDiv.appendChild(commentElement); // 댓글 요소를 div에 추가
});
}
});
} else {
document.getElementById('comments').textContent = 'Not a YouTube video page.'; // YouTube 비디오 페이지가 아닐 경우
}
});
});
이후 실행되는 화면 보면서 간단하게 popup.html css 수정해 주고
필요 없는 코드 축약해 줘서 대강 마무리
코드 짜는 건 대충 끝났고 크롬확장으로 들어가서 실행해 보는 법은 비교적 간단한데
chrome://extensions/
크롬 확장프로그램 관리에 들어가서 개발자 모드를 켜주고
"압축해제된 확장 프로그램을 로드합니다."
를 눌러서 현재 로컬 개발 폴더를 연동해 준다
고럼 이렇게 manifest.json 에서 작성한 대로 이름이랑 설명이 나온다
오류버튼은 일단 실행이 돼서 무시하긴 했음
그리고 원하는 유튜브에 접속해서 확장프로그램을 누르면!!
이렇게 잘 가져와서 띄웠음
댓글 쓴 사람 이름, 사진, 따봉 수 까지 최대한 유튜브 댓글창처럼 구성해 봄
전체 실행화면은 이런 느낌으로 만들었음, 디자인적 감각은 두고 온듯함
헤헤 이제 영상 볼 때 같이 볼 수 있다
아쉬운 점이 아직 많은데
1) 댓글 중에서 1:23, 6:08처럼 누르면 특정 영상 부분으로 가는 링크기능도 구현하면 좋겠음
2) 댓글에 또 답글이 있는데 이것도 볼 수 있으면 나쁘지 않을 것 같음
3) 인기순 댓글이랑 최신순 댓글을 토글방식으로 변경할 수 있게 만들면 좋을 것 같음
기말고사 보고 난 다음에 추가해 보도록 합시다
자료 출처
유튜브 오분순삭
https://www.youtube.com/@5minstealer
API Reference | YouTube Data API | Google for Developers
이 페이지는 Cloud Translation API를 통해 번역되었습니다. API Reference 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. YouTube Data API를 사용하면 YouTube 웹사이트에
developers.google.com