본문 바로가기

개발일지/RIDI-Journals8

[리디저널 제작기] 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.
[리디저널 제작기] 1. React로 크롬 확장프로그램 만들기 위한 기초 설정 안녕하세요. 박기린 입니다. 본 글은 [ 리디북스의 독서노트 글귀를 복사하는 크롬 확장프로그램 : RIDI-Journals ]의 제작 과정을 적어놓은 글입니다. 프로젝트 업무 정리 방식 선정 프로젝트의 모든 업무는 '칸반 보드' 방식을 이용해서 계획 / 정리 / 실행을 하였습니다. 칸반 보드 앱으로 FirstSeed Tasks 앱을 사용했습니다. 칸반 보드의 업무 계획 / 상황표에 맞춰서, 모든 과정을 차례대로 Upnote에 정리했습니다. 그리고 이 Upnote의 기록을 바탕으로 블로그에 개발 과정 글을 적습니다. create-react-app with TypeScript chrome extension은 자바스크립트로 제작되어야 합니다. 그리고 자바스크립트 라이브러리를 사용할 수 있습니다. RIDI-Jo.. 2023. 4. 5.
[RIDI-Journals] 리디북스의 독서노트 글귀를 복사하는 크롬 확장프로그램 안녕하세요. 박기린 입니다. 이번에 직접 [RIDI-Journals]라는 프로그램을 개발하여, 크롬 웹 스토어에 출시를 했습니다. 이 프로그램은 무엇이며, 어떻게 사용하는 지에 대해 알려드리겠습니다. [RIDI-Journals] 다운로드 경로 크롬 웹 스토어 링크 : https://chrome.google.com/webstore/detail/ridi-journals/nnoenkkonhieiadnloppmapbnboabbmh Ridi-Journals Ridi-Journals chrome.google.com 제작동기 & 목적 제작동기 리디북스의 독서노트 글귀들을 따로 모아서 정리하고 싶었는데, 형광펜을 칠한 글귀가 너무 많아 한 번에 복사하려니 문제가 발생했습니다. 1. 복사한 글자의 일부분이 끊겨서 나옵니.. 2023. 3. 30.
[RIDI-Journals] 사용법 글 최종 작성/수정 일 : 2023.3.30 RIDI-Journals 소개 글 : https://arnopark.tistory.com/629 본 글은 [크롬 확장프로그램 : RIDI-Journals]의 사용 설명서입니다. 프로그램을 여는 방법 이용하시는 크롬 브라우저에 RIDI-Journals 확장프로그램이 설치되고 나면, 크롬 우측 상단(URL 입력 창 옆)에 RI-JOUR 아이콘이 보입니다. 이 아이콘 누르면 프로그램이 켜집니다. ! 설치된 확장프로그램이 여러 개라 아이콘이 보이지 않는 경우, 확장 프로그램 아이콘을 누른 후, Ridi Journal에 Pin을 활성화하면 됩니다. UI 살펴보기 1. '더보기 누르기' 버튼 : 리디 독서노트 페이지에 있는 '20개 더보기' 버튼을 자동으로 끝까지 눌러줍.. 2023. 3. 25.

티스토리툴바