리디4 [리디저널 제작기] 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. [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. 이전 1 다음
