퇴근후 공방

이제 기본 구조는 알았으니 내가 원하는 기능을 넣으면 된다.내가 상상한 기능을 구상해보기 위해 대충 그림판으로 편집해서 구도를 잡았다..     나만 사용하는 확장 프로그램이기 때문에 우선 디자인은 크게 고려하지 않았다. 우선 background.js와 content.js와 같이 필요 없는 코드들을 비활성화했다. 그리고 아래와 같이 Popup.html, Popup.js를 수정하고 styles.css를 추가했다.  popup.html 오늘 날짜 복사   popup.jsdocument.addEventListener("DOMContentLoaded", () => { const fullDateSpan = document.getElementById("fullDate"); const to..

유튜브에서 크롬 확장 프로그램을 만드는 영상을 봤더니 갑자기 나도 만들고 싶어졌다. 기왕이면 내가 필요한 기능을 넣어서 만들어보기로 했다.예를 들어, 나는 운동을 할때 비공개로 일기를 적어놓는다.제목을 년도와 날짜로 표시하는데 이걸 일일히 직접 작성한다. 아마 확장 프로그램으로 오늘의 날짜를 제목에 맞게 복사할 수 있다면 큰 수고를 덜 수 있을 것 같다.       이제 확장 프로그램을 제일 빨리 만들어 볼 수 있는 방법을 사용했다.바로 ChatGPT에게 물어보는 것이다.자바스크립트는 데이터가 많아서 그런지 쉽게 대답해준다. manifest.json확장의 메타데이터를 정의하며, 필수적인 파일입니다. 다음과 같은 정보를 포함합니다{ "manifest_version": 3, "name": "My Chro..

예전에 직접 만든 qnn 기사 진행도 알리미를 확장 프로그램으로 잘 쓰고 있었는데 한 가지 불편한게, 저 팝업이 계속 뜨고 있다. '개발자 모드에서 확장 사용 해제' 라고, 확장 스토어에서 받은 기능이 아니라 내가 개발자 모드를 켜서 넣은 프로그램이라서 보호 차원에서 뜨는 것이라고 한다. 확장 사용 해제를 누르면 기능이 비활성화되고 나중에는 브라우저를 끌 때까지와 2주 뒤밖에 선택할 수 없다. 제일 깔끔한 방법은 정식으로 확장 스토어에 올리고 받아서 사용하면 되지만 개발자 등록 비용을 내야 하고 올리는 중간에 심사도 받아야 해서 바로 해결할 수 있는 해법은 아니다. === 엣지 브라우저 기준으로, edge://flags 또는 chrome://flags를 주소창에 입력한다. chrome이라고 써도 브라우저..

저번에 만들었던 qnn 확장 프로그램이 어느 순간 제대로 작동하지 않기 시작했다. 분명 qnn 사이트에서 기사를 보고 있는대도 퍼센트가 올라갔다는 알림이 오지 않았다. 새로고침을 해도 다시 주소를 입력해도 반응이 없었다. f12로 콘솔 로그를 찍어도 아무련 변화가 없었다. 결국 manifest.json의 matches의 인식해야 하는 주소를 더 추가해서 어떻게든 이 프로그램이 qnn사이트를 인식하기를 빌었다. 그러자 잠깐 인식이 되는가 싶었더니 페이지를 이동하자 다시 제대로 작동하지 못하고 멈춰버렸다. 그러다 알게 된 건데, 인식이 실패한 상태에서 새로고침을 한번 눌러주면 인식이 되는 것이었다. 단순히 페이지 이동하는 것으로는 사이트의 주소가 바뀐 것을 제대로 알지 못하는 것 같았다. 예전에 특정 사이트..

저번에 확장프로그램을 상단바의 아이콘만 바꿔서 실행테스트만 해보았다. 하지만 그건 정말 기초적인 기능만 하는 깡통 프로그램이었기 때문에 내가 원하는 기능을 수행하려면 결국 확장프로그램에 대해 더 공부할 수 밖에 없었다. 할 수 있다면 그냥 프로그램을 변형해서 구현하고 싶었는데 역시 세상에 쉬운것은 없다. (35) 친구 브라우저에 악성코드 심기 - YouTube 페페따봉 다행히 구글 확장 프로그램의 기본 개념과 쉽게 만드는 법을 알려주는 한 한국 개발자의 영상이 있었다. js도 모르고, 영어도 잘 못하는 나에게는 이게 제일 이해가 잘 되었다. 게다가 SetInterval 이라는 함수를 사용하면 확장프로그램의 기능을 계속 실행을 시킬 수 있다는 것을 알게 되었다. 이게 있어야 qnn24의 % 알림을 한번만 ..

내가 하는 앱테크들 중에서 뉴스를 보면 포인트를 주는 qnn24라는 사이트가 있다. 뉴스기사를 약 7초동안 보고 있으면 진행도 5%가 오르고 100%를 채우면 포인트를 지급받는 방식이다. 기사도 읽으면서 소소하게 포인트도 버니 괜찮은 앱테크라 생각한다. 다만 한가지 신경쓰이는 점이 있다면, 브라우저 창을 좁게 하거나 모바일 환경에서는 실시간으로 진행도가 오르는 것을 볼 수 있는데 평소 내가 자주 사용하는 환경인 pc에서는 그게 보이지 않는다. 이유는 모르겠으나 진행도를 볼 수 없어서 불편했다. 그렇다고 모바일로 보자니 pc버전의 장점인 다른 뉴스기사들을 바로 눌러서 이동할 수 있다는 점을 포기하고 싶지 않았다. 모바일은 위의 주제 탭을 누르고 다시 기사를 선택해야한다. 그러다가 생각한 것이 '확장프로그램..