#JavaScript 프로그램 개발 #JS #크롬확장프로그램 #크롬브라우저 #크롬 #뽀모도로타이머 #타이머 #투두리스트 #브라우저투두리스트 #할일목록이 포스팅을 쓴단 얘기는!?그렇다!웹 크롬 스토어에서 내 확장 프로그램을 승인해줬다!!!예ㅔㅔㅔㅔㅔ어예ㅖㅔㅔㅔㅔ와~~ 처음으로 개발한 것을 공개해봤다.언제나의 깃을 통한 소스만 공개가 아니라...실제.... only 내 개발... # 왜 만들었는가?내가 가장 좋아하는 언어는 JavaScript다.여러 프로젝트에서 가장 오랫동안 썼던 것이기도 하고... 아무것도 준비되지 않은 환경에서 F12만 콕 눌러주면 개발자도구 콘솔창에서 바로 써볼 수 있는 언어라서?CSS랑 엮어서 왜 이놈을 못잡니 왜 저놈을 컨트롤못하니 빡칠테도 있지만 편하고 재밌고 좋다!I love js발단은 일단 3월.그런 JavaScript로 뭘 할 수 있지? 라고 찾아보다가 크롬 확장프로그램은 일단 JavaScript로 만들 수 있다는 것을 보았다.그런데 백엔드 역량을 키워한다고 생각하던 참이고, JS보다 프로그램 개발 Vue.JS나 Typescript등 습득이 중요하다고 생각했어서..흠흠 그렇구나 하고 넘겼다.​그리고 그다음은 5월 말.친구가 앗 넌 프로그래밍할 줄 아니까 이런거 만들 수 있지 않아? 하면서 크롬 확장 프로그램 얘기를 꺼내주었다.스토어에 게시하는 방법은 모르지만.. 뭘로 만드는지는 이미 두 달전에 찾아봤으니, 친구의 얘기를 듣다가 간단한거라도 뭐라도 해보자! 란 생각을 했다.5월 중순에 간만에 요구사항을 가지고 개발한 일주일(과제였지만)이 너무나도 즐거웠고 역시 난 개발을 해야해! 라고 생각하기도 했으며, 내가 만든 것을 다른 사람도 쓸 수 있게 공유하는 것은 진귀한 경험이긴 하니까.​원래 처음 도전하려한 주제는 구글 docs의 단어 찾기&단어 교체 기능이였다. 분명 없었단 말이다!!그런데 도전!외치고 구글 docs를 들어가니 웬걸. 그새 생겨있더라.(ㅠㅠ)눈에 탁 보이고, 도움이 프로그램 개발 될만한 소박한 걸로 시작해보고 싶었다.​그렇다면 작업시간을 정해두고 작업 목록을 보여주는 서비스면 좋겠다!! 그래서 타이머&투두리스트로 만들었다,# 구글 Docs 기준 단어 찾기&단어 교체 실패 이유 ㅎ...ㅎㅎ...ㅎㅎ기능이 있음에도 만들고 싶었다. 크롬 확장프로그램에서 브라우저 내부 접근을 해야할테니 그것만으로 도전의 가치가 있을 것이라 생각했다. 하지만 문제에 부딪혀 이 과제는 내려두었다.​구글 Docs는 실제 DOM 텍스트 노드가 없었다.텍스트 입력/수정은 구글 내부 JS 모델과 관련되어 있어, 화면에서는 Canvas나 가상 노드 형태로 그려진다.따라서 외부 JS코드인 크롬 확장 프로그램에서 접근할 수 없게 되었다.. (so sad)# 크롬 확장 프로그램의 기본 구조크롬 확장 프로그램은 웹 페이지와 상호작용하면서 브라우저의 기능을 확장하는 구조이다.따라서 기능 별로 파일이 나눠져 있는 것이 프로그램 개발 좋다.일단 폴더 구성에 있어 중요한 3가지가 있다.​1) manifest.json : 확장 프로그램의 메타 정보와 구성 요소를 정의한다. 크롬 브라우저에서 이 파일을 기준으로 코드를 프로그램을 해석한다.​2) content_script.js : 탭화면에서 실행되는 동작 스크립트로, 사용자 브라우저 탭 내부에서 실행된다.​3) background.js : 백그라운드에서 항상 실행되는 스크립트로, 탭 간 데이터 공유, 알림 처리, 장기 이벤트 처리에 사용된다.브라우저가 꺼지지 않는 이상, 계속 실행되는 숨은 작업자이기도 하다.여기서는 UI없이 백그라운드에서 이벤트(타이머)를 지속적으로 처리한다. = 마치 웹 서비스의 백엔드와 같이 동작한다.# 크롬 확장 프로그램 저장소 : Chrome.storage.localQ) Redis를 써서 할 일 목록을저장하는 기능은 어떤가?크롬 확장 프로그램은 브라우저 내부에서만 작동하기 때문에 Redis 같이 서버 측 인메모리 프로그램 개발 데이터베이스는 직접 사용할 수 없다.​.. 그럼에도 쓰고 싶다면!백엔드 서버를 별도로 따로 두고 확장 프로그램이 서버와 통신하게끔 되어야한다.Redis가 진짜로 필요한 경우는 다수 사용자, 동기화된 타이머 상태, 로그인 사용자별 히스토리 저장같은걸 하려는 경우가 있다.​이러한 방식을 대체할 수 있는, 사용 가능한 대체 저장 방식은 chrome.storage.local, IndexDB, localStorage 등 브라우저 내 저장소를 사용하는 방법이 있다. 일반적으로 크롬 확장 프로그램 개발에서는 chrome.storage.local을 사용한다.​비동기 API백그라운드와 popup.html 간 데이터 공유크롬 확장 프로그램 전용의 브라우저 내 저장소즉 서버없이 사용자의 설정이나 상태를 저장하고 확장 전역에서 공유할 수 있다.​chrome.storage.local을 통해 브라우저가 닫혀도 타이머의 설정이나 할일 목록은 이어진다.​# 크롬 확장 프로그램 알림 : Chrome.notifications.create(..)이는 크롬 알림을 프로그램 개발 띄운다.알림은 우측 하단 또는 알림센터에 표시되며, 사용자가 수동으로 끄지 않으면 자동으로 사라진다.​type : "basic" 은 가장 일반적인 텍스트 중심 알림이다.title : 알림 제목message : 알림 본문오른쪽 하단에 이렇게 뜬당# 개발 이슈[오류 메세지] Uncaught (in promise) Error : Cannot access a chrome:// URL크롬 확장 프로그램은 chrome:// (ex : chrome://extensions, chrome://newtab, chrome://settings 등)에 접근시도할 시 위와 같은 오류가 발생한다.​이유 : 보안 제한구글 크롬은 보안상의 이유로 모든 확장 프로그램이 chrome:// 페이지에 접근하는 것을 엄격히 금지한다.이 페이지는 브라우저 내부 페이지이기 때문에, 외부 스크립트 삽입이나 alert 호출 등이 불가능하다.manifestion.json에서 권한이 부여되어 있어도 이 도메인들은 예외없이 차단된다.​나같은 경우는 크롬 확장 프로그램 프로그램 개발 팝업을 크롬 설정페이지에서 실행해서 발생했었다. chrome:// URL 페이지만 아니면 정상 동작한다.​아마 이런 보안은 크롬 브라우저 상의 웹 접근성 보안인 것 같다.크롬 확장 프로그램에서 발생하는 chrome:// 접근 제한, 콘텐츠 스크립트 실행 제한, alert() 차단 등은 모두 웹 접근성 보안 정책(CSP, Content Security Policy)와 샌드박싱 때문이다.이는 기본적으로 확장 프로그램이 사용자 몰래 민감한 페이지나 브라우저 내부 설정 등을 조작하지 못하도록 설계되어 있다.​결론! 확장 프로그램은 정해진 범위 내에서만 동작해야 한다.그 안에서 메세지 전송, 알림, 뱃지, local storage 등 충분히 활용이 가능하다.​★ 알림의 경우 사용자 OS 설정에 따라 소리가 안날 수도 있다 ★.[오류 메세지] Unchecked runtime.lastError: Some of the required 프로그램 개발 properties are missing: type, iconUrl, title and message.이유 : Chrome.notificiations.create(...) 호출 시 필수 속성 중 하나 이상이 빠졌기 때문이다.이렇게 들어가야 하는데!! iconUrl이 빠졌었다. 나는 js 폴더를 생성해서 js 파일들을 모두 거기다 몰아 넣었는데 그러는 바람에 이미지 경로가 계속 틀려서 조금 헤맸다...파일 위치 바꿀 때 경로 확인 꼭 하자!!# 프로그램 요약스토어 게시할랬더니 이미지로 설명서 달래서 급하게 후다닥...​전체 소스와 확장 프로그램에 대한 설명은 영어지만...깃에다 업로드 했다.​Contribute to Greeense/pomodoroTodolist_extension development by creating an account on GitHub.​​역시 개발은 재밌다...이거 하면서 Azure나 도커 공부도 더 해볼겸 웹서비스를 만들어야겠다고 생각했다... 트래픽..azure가 버텨주겠지...(ㅈㄴ)아니면 로그인 필요없이 그냥 간단하게 GPT 결과받기(대신 프롬프트를 이용해 형식 프로그램 개발 지정) 같은거라도 해볼까 한다.​