크롬익스텐션으로 네이버블로그 글쓰기 도우미만들기

소개

네이버블로그 글을 작성할 때 마크다운도 적용안되니,
뭔가 꾸미려면 정성을 다해 마우스로 하나씩 클릭을 해야합니다.
원래 글은 정성을 다해 써야죠. 암요.

글을 복사해와서 붙혀넣기한 다음,
중간중간에 있는 타이틀을 소제목으로 바꾸고 싶은데!!
왼쪽 상단으로 멀리 갔다가 다시 본문으로 오려니 시간이 너무 많이 걸려서 자동화하고 싶었습니다.

그래서 크롬익스텐션으로 결정.

크롬익스텐션은 내가 띄워놓은 브라우저를 컨트롤하기에 너무 좋은 서비스입니다. 물론 노코드는 아니고, 프로그래밍을 해야하지만, 요즘 난이도 낮아졌기때문에 도전할 만 합니다.
개발지식보다는 개발배경(스터디장님이 말씀해주셨던 인상깊은 말)만 갖추면 된다고 생각됩니다.

개발배경 :
웹페이지의 요소(element), CSS selector, 커서나 VScode같은 개발도구, 나에게 잘 맞는 AI툴

웹페이지 분석
1. iframe안에 존재하네. 이거 고려대상
2. id가 uuid형식인 걸 보니, 이걸 기준으로 가져오면 안되겠는 데?
3. 첫번째 본문이라고 되어 있는 버튼을 누르면 하위에 클릭할 수 있는 요소가 3개가 나옵니다. 그 첫번째버튼의 요소
4. 잘 째려보니, 3개중 유일한 요소를 찾아냅니다. 노란색 줄 친 부분..

어 근데? 네이버야. 요소 이름이 바뀐 것 같지않니? 사례 글 작성하다가 뭔가 이상한 부분을 찾아냄.. ㅎㅎ
data-log의 속성(property)을 가져와야하는 데,
두번째단계의 요소들의
- 본문 data-log="prt.fmttext",
- 소제목 data-log="prt.fmtquot",
- 인용구 data-log="prt.fmtstit" 소제목과 인용구의 속성이 바뀐 느낌.. 암튼

자 이걸로 크롬익스텐션으로 작성해봅니다.

진행 방법

저는 최근에 grok을 유료구독하고 있어요. deepersearch에서 나오는 추론을 자주 보고싶어서요.
(저의 질문의 의도를 추측하며 파악하려는 걸 보는 게 좋네요.)
게시글을 작성하다가 생각한 저의 맥락을 그대로 전달했습니다. 과연 어떻게 나올까?
여기서 제시한 기본 코드를 커서로 가져와서 마무리를 할 예정입니다.

지금 grok이 생각중인데, 너무 오래 생각하네요.