목록Chrome bookmark extension 개발기 (3)
나무 숲

다른 팀원들의 PR이 머지되어서 UI가 적용되었다. 덧붙여서 조금 정리하니 그럴듯해졌다. Chrome extension Popup page를 닫는 방법을 검색해보니 바로 결과가 나왔다. 저 팝업 페이지 또한 html이라는걸 생각하면 당연한 해답인듯,,! window.close(); 이 코드를 createBookmark의 콜백에 넣으니 Works like a charm✨ 그런데 테스트를 하다보니 버그가 발견되었다. 타이틀을 수정하고 Save했는데 defaultValue로 넣은 값이 그대로 적용되어서 저장되는 문제였다. 이 또한 검색을 해보니 React 공식에 내용과 샘플이 잘 나와있었다. const titleRef = React.createRef(""); const [title, setTitle] = us..

Chrome bookmark extension 개발기 (1) 을 통해 생각보다 간단하게 북마크 폴더/Url 추가 동작이 구현되었다. 그런데 구글 북마크를 생각해보면 북마크 팝업 페이지가 열릴 때 페이지 Title, Url이 기본으로 채워져 있다. 그래서 해당 기능을 구현하고자 했다. 시행착오 1. 아래와 같은 값을 디폴트로 세팅하면 될줄알았는데 안됐다. 항상 해당 탭의 최초 페이지에 대한 값만 불러와졌다. 팀 회의 및 리뷰를 통해 Extension이기 때문에 다른 api가 있을 수 있겠다고 결론내렸다. => 검색결과 Tab api가 있었다. Title = document.title Url = window.location.href 2. UseRef를 사용해보려다가 UseState로도 충분하다는걸 알고 Us..
chrome.bookmarks API를 사용하여 Extension을 개발하는 프로젝트에 참여하게 되었다. 나는 찐따라 가장 쉬운 부분을 요청했고, 맡았다 ㅎㅎ extension을 개발한다는 것 자체가 생각도 못해본 일이라 해나가면서 시행착오와 삽질 및 기록용 문서를 작성해나가보려 한다. 또한, 모든 공식 문서가 영어이기도 하고 영어공부를 한다는 느낌으로 내용은 되도록이면 영어로 정리한다. 사용하는 스택은 React +Tailwind CSS 이다. Chrome extension 개발을 위해서는 manifest를 조작해서 사용한다. 이에 대한 자세한 내용은 생략하고 공식문서를 참조한다. Try creating bookmark 🏷 Chrome bookmark API? Create, Organize, Manip..