본문 바로가기

크롬5

[리디저널 제작기] 6. 크롬 웹 스토어에 확장프로그램 출시하기 안녕하세요. 박기린 입니다. 본 글은 [ 리디북스의 독서노트 글귀를 복사하는 크롬 확장프로그램 : RIDI-Journals ]의 제작 과정을 적어놓은 글입니다. 크롬 웹 스토어 개발자 등록 크롬 확장프로그램을 공식 웹 스토어에 등록하기 위해선, 먼저 개발자 등록을 해야 합니다. 약관 동의와 함께 5달러를 결제해야만 합니다. 한 번 결제로 등록이 완료되며, 이후 추가 비용을 요구하진 않습니다. 수수료 결제를 위해 카드 등록을 해야 하는데, '국가/지역'에 대한민국이 없습니다. 그래서 '미국'으로 지정하고, 청구지 우편번호를 '12345'로 지정했습니다. 아무렇게나 입력해도 딱히 문제가 발생하지는 않는 것으로 보입니다. (제가 사용하는 카드는 한국에서 발급받은 카카오뱅크 체크카드임에도 문제 없이 등록이 됐습.. 2023. 4. 12.
[리디저널 제작기] 5. 크롬 웹 스토어에 올릴 아이콘 디자인 만들기 안녕하세요. 박기린 입니다. 본 글은 [ 리디북스의 독서노트 글귀를 복사하는 크롬 확장프로그램 : RIDI-Journals ]의 제작 과정을 적어놓은 글입니다. 필요한 아이콘의 포맷 Icons should generally be in PNG format, because PNG has the best support for transparency. They can, however, be in any format supported by WebKit, including BMP, GIF, ICO, and JPEG. 공식 크롬 확장프로그램 API 문서의 글입니다. PNG 확장자(포맷)의 이미지 파일을 아이콘으로 사용하는 것을 적극 권장한다고 나와있습니다. BMP, GIF, ICO, JPEG도 가능은 하지만, 웬만하.. 2023. 4. 11.
[리디저널 제작기] 4. 더보기 버튼을 자동으로 눌러주는 기능 구현 안녕하세요. 박기린 입니다. 본 글은 [ 리디북스의 독서노트 글귀를 복사하는 크롬 확장프로그램 : RIDI-Journals ]의 제작 과정을 적어놓은 글입니다. 리디 독서노트 페이지의 더보기 버튼 리디 독서노트 페이지를 들어가면 형광펜(밑줄)을 친 글귀들이 보입니다. 근데 글귀의 수가 20개를 넘어가게 되면, 사진의 '20개 더보기'버튼이 생깁니다. 다음 20개의 글귀는 위 버튼을 눌러야만 볼 수 있고, 일일이 다 눌러줘야 모든 글귀를 확인할 수 있는 구조입니다. 크롬 확장프로그램은 탭의 현재 DOM에 올라온 텍스트만 긁어올 수 있기 때문에, '20개 더보기' 버튼을 전부 누른 후에 글귀를 긁어와야만 모든 글귀를 긁어올 수 있습니다. 만약 버튼을 누르지 않으면, 당장 보이는 몇 개의 글귀만 긁어와집니다... 2023. 4. 10.
[리디저널 제작기] 3. 팝업 UI 디자인 만들기 (styled-components) 안녕하세요. 박기린 입니다. 본 글은 [ 리디북스의 독서노트 글귀를 복사하는 크롬 확장프로그램 : RIDI-Journals ]의 제작 과정을 적어놓은 글입니다. UI 디자인 만들기Figma에서 직접 팝업창의 UI 디자인을 만들었습니다. 다크모드에 어울리는 색상에 심플한 디자인으로 구성했습니다. styled-componets로 스타일링하기React의 스타일링 모듈인 styled-components를 사용했습니다. TypeScript를 사용하기에, @types/styled-componets 모듈도 설치했습니다. 모은 독서노트 개수 : {texts.length}개 독서노트 모으기 클립보드에 복사하기 Made by ParkGiraffe JSX에 기본적인 틀을 만들어줍니다. 이제 styled-components를.. 2023. 4. 9.
[리디저널 제작기] 2. 리디 독서노트를 크롤링하는 기능 구현하기 안녕하세요. 박기린 입니다. 본 글은 [ 리디북스의 독서노트 글귀를 복사하는 크롬 확장프로그램 : RIDI-Journals ]의 제작 과정을 적어놓은 글입니다. 리디 독서노트 페이지의 글귀들을 팝업창에 복붙하기 // background.js chrome.runtime.onMessage.addListener(async function ( request, sender, sendResponse ) { if (request.action === "CHECK") { let [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true, }); chrome.scripting.executeScript({ target: { tabId: activeTa.. 2023. 4. 7.