개요
오랜만에 velog를 들어오니 믿을 수 없는 광경이 펼쳐졌다
광고가 많다 못해 그냥 글이 안 보이는 수준까지 온 것이다
이걸 어떻게 지우지 생각하다 문득 떠오른 생각!
요즘 AI 좋다 뭐다 하는데 나도 한번 써보자!
챗지피티를 활용해서 크롬 익스텐션을 만들어보자 생각했다
개발
첫 번째 문제
일 잘하는 부하직원을 둔 팀장의 마음이 되었다
방식은 시작하면 미리 입력한 키워드를 로컬 스토리지에 넣고
popup을 통해 사용자가 키워드를 추가할 수 있다고 하는데...
처음 시도니 당연히 에러가 뜰 것이라 생각했다
하지만 로컬스토리지 어디에도 보이지 않는다.
챗 지피티야, 이게 어떻게 된걸까?
아하 저장을 로컬스토리지에 했지만 익스텐션에서 팝업된 창의 로컬스토리지에 저장되었구나!
하지만 바꿔도 작동 안한다 이유는?
두 번째 문제
작동 안한 이유가 생각 외로 어이없었다
작동을 안해서 html 구조를 캡처해서 보낸 것. 이것이 문제의 시작이었다
계속해서 오류가 떠서 이것저것 실험하다 코드를 본 결과 맙소사
//content.js
function removeSpamPosts() {
const posts = document.querySelectorAll("div.sc-1r5jc3p-2 article");
posts.forEach(post => {
const postText = post.innerText;
if (isSpam(postText)) {
post.style.display = "none";
console.log("🧹 숨김 처리된 게시글:", postText.slice(0, 50));
}
});
}이 부분에서 난수형 클래스명을 콕 찝어 없애고 있던 것이었다...
코드 한 줄 안 읽고 AI한테 시킬 생각만 했다가 시간을 좀 날렸다
세 번째 문제
하지만 이렇게 해도 제대로 작동하지 않았는데 그 이유는
웹 개발을 공부하다 보면 한 번씩 들었던 layz loading 문제였다
처음부터 나오는 게시물부터 스크롤 내려서 나오는 동적으로 추가되는 게시글 까지 관리하기 위해 MutationObserver를 사용했다
그리고 나머지 작은 문제들
글자도 깨지고 (<meta charset="UTF-8" />)
AI도 실수하고
그렇게 많은 버전의 파일이 지나가서
완성! 최소한의 기능은 잘 동작한다
결론
챗지피티로 편하게 만들 수 있다곤 느꼈지만
잘하는 사람이 더 잘하게 되는 느낌을 받아서 만능이라곤 생각 못하겠다