네이버 자동 댓글 크롬 확장 프로그램 만들기

네이버 블로그를 시작하고 어쩌면 무조건 해야 하는 절차 중 하나

바로 이웃 소통과 관리

그치만 이웃들이 정말 긴 글을 쓸 때는 하나하나 다 읽고 답하는게 시간이 너무 많이 걸리고 비효율적이게 느껴졌다

 

크롬 딸깍

그래서 확장 프로그램을 딸깍 누르면 해당 페이지의 글을 읽어 공감성 댓글을 자동으로 뱉어내는 크롬 브라우저가 있다면 정말 편하겠다고 생각했다.

 

 

 

 

 

네이버 댓글 자동화

 

가장 쉽고 빠르게 구현하기 위해 javascript로 본문 컨텐츠를 읽고, open ai api를 사용해 본문 -> 공감성 댓글을 만들고, 그 댓글을 다시 가져와 바로 댓글창에 입력 후 등록이 되도록 할 계획이다.

 

 

 

 

 

 

manifest.json

 

크롬 확장 프로그램의 신분증과 같은 manifest.json 파일은 브라우저에게 이 프로그램이 어떤 권한을 쓰는지 알려준다.

• manifest.json: 버전 정보, 이름, 필요한 권한(탭 읽기 등) 정의.
• content.js: 실제 네이버 블로그 페이지 내에서 본문 텍스트를 읽고 댓글창에 접근하는 역할.
• popup.html / popup.js: 사용자가 클릭했을 때 나타나는 UI (댓글 생성 버튼 등).

{
  "manifest_version": 3,
  "name": "네이버 블로그 AI 댓글 도우미",
  "version": "1.0",
  "permissions": ["activeTab", "scripting"],
  "content_scripts": [
    {
      "matches": ["https://blog.naver.com/*"],
      "js": ["content.js"],
      "all_frames": true
    }
  ]
}

 

 

 

 

 

 

content.js

블로그 콘텐츠 내용이 담겨있는 iframe 태그를 인식해서, 그 안의 본문 텍스트를 추출하는 실질 코드!

// 페이지가 로드되면 실행
window.onload = function() {
    // 네이버 블로그 본문 컨테이너 찾기 (스마트에디터 ONE 기준)
    const postContainer = document.querySelector('.se-main-container');

    if (postContainer) {
        // 본문 텍스트만 추출 (공백 제거)
        const postText = postContainer.innerText.trim();
        
        console.log("검출된 블로그 본문:", postText.substring(0, 100) + "...");
        
        // 브라우저 상단에 간단한 버튼 생성 (테스트용)
        createTestButton(postText);
    }
};

function createTestButton(text) {
    const btn = document.createElement('button');
    btn.innerText = "본문 읽기 테스트";
    btn.style.position = "fixed";
    btn.style.top = "10px";
    btn.style.right = "10px";
    btn.style.zIndex = "9999";
    btn.style.padding = "10px";
    btn.style.backgroundColor = "#00c73c";
    btn.style.color = "white";
    btn.style.border = "none";
    btn.style.borderRadius = "5px";
    btn.style.cursor = "pointer";

    btn.onclick = () => {
        alert("본문 텍스트 추출 성공! (콘솔창 F12를 확인하세요)");
        console.log("전체 텍스트:", text);
    };

    document.body.appendChild(btn);
}

 

 

크롬확장프로그램 개발자모드

크롬 확장 프로그램 사이트에서 개발자 모드를 켜고, 아까 코드들을 올리면(폴더)

확장 프로그램 테스트를 할 수 있다.

 

콘솔에 본문 텍스트들이 성공적으로 추출된 모습

 

 

이후 OPEN ai에서 시크릿 키를 발행하고, content.js 파일에  fetch 함수를 넣어 open ai 서버와 통신하도록 수정해줍니다.

코드는 개인 키가 이제 포함되어서 일단 패스~

 

 

 

앞에 자신의 시크릿 코드를 넣은 후 아래 코드로 open ai api를 사용해 댓글을 생성한다.

async function generateComment(postText) {
    // 본문이 너무 길면 토큰을 많이 소비하므로 앞부분 1000자만 사용
    const slicedText = postText.substring(0, 1000);

    try {
        const response = await fetch('https://api.openai.com/v1/chat/completions', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${OPENAI_API_KEY}`
            },
            body: JSON.stringify({
                model: "gpt-4o-mini", // 가성비가 가장 좋은 모델
                messages: [
                    {
                        role: "system", 
                        content: "당신은 네이버 블로그의 다정한 이웃입니다. 제공된 글을 읽고, 내용에 공감하며 구체적인 부분을 언급하는 2~3문장의 따뜻한 댓글을 작성해 주세요. 말투는 '~요'체를 사용하세요."
                    },
                    {
                        role: "user",
                        content: `다음 블로그 글에 대한 댓글을 작성해줘: ${slicedText}`
                    }
                ],
                max_tokens: 150
            })
        });

        const data = await response.json();
        return data.choices[0].message.content;
    } catch (error) {
        console.error('API 호출 중 오류 발생:', error);
        return "댓글 생성에 실패했어요. 다시 시도해 주세요.";
    }
}

 

 

 

 

 

이후 아래 코드로 생성된 코멘트를 실제 댓글창으로 옮김

function injectComment(comment) {
    // 1. 댓글 입력창(textarea) 찾기
    const textarea = document.querySelector('.u_cbox_text');
    const submitBtn = document.querySelector('.u_cbox_btn_upload');

    if (!textarea) {
        alert("댓글창을 찾을 수 없습니다. 로그인이 되어 있는지 확인해 주세요.");
        return;
    }

    // 2. 댓글 입력
    textarea.value = comment;

    // 3. 중요: 입력 이벤트 발생시키기
    // 네이버 시스템이 "사용자가 글을 썼구나"라고 인식하게 하여 등록 버튼을 활성화시킵니다.
    textarea.dispatchEvent(new Event('input', { bubbles: true }));
    textarea.dispatchEvent(new Event('change', { bubbles: true }));

    // 4. 등록 버튼 강조 (자동 클릭은 위험할 수 있으니 일단 강조만!)
    submitBtn.style.backgroundColor = "red";
    submitBtn.style.border = "2px solid yellow";
    
    alert("댓글이 입력되었습니다! 등록 버튼을 눌러주세요.");
    
    // 자동 클릭까지 원한다면 아래 주석을 해제하세요 (주의: 스팸 방지 로직에 걸릴 수 있음)
    // submitBtn.click();
}

 

 

테스트를 해보니 댓글이 댓글폼에 작성이 안되는 오류가 발생했습니다

API 호출 중 오류 발생: TypeError: Cannot read properties of undefined (reading '0')

오류코드가 발생했었는데, 그냥 api 키에 토큰을 안 채워놨어서 발생했던 오류였습니다.

최소 금액을 일단 채워놓고 다시 테스트 해봅시당

 

 

 

 

돈을 채워넣어도 안되네요

 

 

여기서 1. html 태그를 제대로 못잡았다

2. 댓글창이 처음부터 잘 보이는 상태여야 한다

이런 문제가 있을 것 같아서

 

다시 댓글창 html 태그를 잘 분석 한 다음, 처음부터 화면에 댓글창이 보이는 상태에서 진행을 하니 문제없이 댓글이 바로 생성되었습니다.

 

 

 

5번 테스트 기준 3800토큰 = 1회 평균 7~800 토큰

그런데 gpt 4 모델은 1백만토큰당 0.5달러라고 러프하게 잡으면,

최소 금액 5달러(약 7천 4백원) 충전 시 10,000,000/800 = 12,500 댓글

아주아주 보수적으로 잡아도 1만개가 넘는 댓글을 달 수 있으니 블로그 접을때까지 쓸 수 있을거같다

오늘의 일기는 끗