1. 프로젝트 시작 배경데이터는 현대 비즈니스와 연구에서 중요한 자원입니다. 하지만 웹사이트에서 필요한 데이터를 추출하는 과정은 종종 번거롭고 시간이 많이 소요됩니다. 특히, 복잡한 웹페이지에서 표 데이터를 수집할 때는 수작업으로 복사-붙여넣기를 반복해야 하는 경우가 많았습니다. 이러한 문제를 해결하기 위해 "테이블 익스포트"라는 크롬 확장 프로그램을 개발하게 되었습니다.이 도구의 목표는 사용자가 웹페이지의 표 데이터를 손쉽게 추출하고 CSV 또는 Excel 파일로 저장할 수 있도록 돕는 것입니다. 이를 통해 데이터 수집 작업의 효율성을 극대화하고, 사용자의 생산성을 높이는 것이 주요 목표였습니다.2. 초기 기획 단계2.1 요구사항 정의프로젝트를 시작하기 전에 다음과 같은 요구사항을 정의했습니다:자동 테..

안녕하세요, 저는 최근 "TikTok Screenshot"이라는 크롬 확장 앱을 개발한 개발자입니다. 이 프로젝트는 사용자가 틱톡(TikTok) 영상을 손쉽게 캡쳐할 수 있도록 돕는 도구로서, 인스타그램 릴스와 마찬가지로 많은 분들이 필요로 하지만 공식적으로 제공되지 않는 기능을 구현하기 위해 시작되었습니다. 이번 글에서는 개발 과정과 최종적으로 적용된 Sidepanel 기반의 다운로드 방식, 그리고 CORS(Cross-Origin Resource Sharing) 문제를 해결하기 위해 사용한 우회 방법에 대해 상세히 설명드리겠습니다.1. 프로젝트의 시작: 왜 TikTok Screenshot이 필요했을까?1.1 문제 정의틱톡은 짧고 재미있는 영상을 통해 전 세계적으로 큰 인기를 끌고 있는 소셜 미디어 플랫..

안녕하세요, 저는 최근 크롬 확장 앱 "Insta Screenshot"을 개발한 개발자입니다. 이 프로젝트는 사용자가 인스타그램 릴스(Reels)를 손쉽게 캡쳐할 수 있도록 돕는 도구로서, 많은 분들이 필요로 하지만 공식적으로 제공되지 않는 기능을 구현하기 위해 시작되었습니다. 이번 글에서는 개발 과정과 최종적으로 적용된 Sidepanel 기반의 다운로드 방식, 그리고 CORS(Cross-Origin Resource Sharing) 문제를 해결하기 위해 사용한 우회 방법에 대해 상세히 설명드리겠습니다.1. 프로젝트의 시작: 왜 Insta Screenshot이 필요했을까?1.1 문제 정의인스타그램은 전 세계적으로 가장 많이 사용되는 소셜 미디어 플랫폼 중 하나입니다. 특히 릴스(Reels)는 짧고 임팩트 ..

안녕하세요, 개발자 여러분! 오늘은 제가 최근에 작업한 YouTube Shot이라는 크롬 확장 프로그램을 소개하고, 개발 과정에서 겪었던 경험과 학습 내용을 공유하려고 합니다. 이 확장 프로그램은 유튜브 영상을 보다가 마음에 드는 장면을 바로 캡처해서 저장할 수 있는 툴인데요. 기술적으로 어떻게 구현했는지, 그리고 어떤 문제를 해결했는지 자세히 설명드릴게요.1. 왜 만들었나요?평소 유튜브를 보면서 "이 장면 정말 멋진데 저장하고 싶다!"라는 생각을 종종 하곤 했습니다. 그런데 매번 전체 화면을 캡처하거나 별도의 프로그램을 사용하는 게 번거롭더라고요. 그래서 간단하게 클릭 한 번으로 유튜브 영상의 특정 순간을 캡처하고 저장할 수 있는 도구를 만들어보자는 생각이 들었습니다. 그렇게 탄생한 게 YouTube ..

RegExer: Vue.js와 Side Panel로 만든 정규 표현식 도우미안녕하세요! 오늘은 제가 최근 개발한 크롬 확장 프로그램, RegExer에 대해 이야기해볼까 해요. RegExer는 웹 페이지에서 텍스트를 검색하고 분석하는 데 유용한 도구인데요, 특히 정규 표현식(Regular Expression)을 사용해서 복잡한 텍스트 패턴을 간단하게 처리할 수 있도록 도와줍니다. 이 글에서는 어떻게 프로젝트를 시작했는지, 어떤 기술을 사용했는지, 그리고 개발 과정에서 겪었던 재미있는 경험들을 공유하려고 해요.1. 왜 만들었을까?1.1. 아이디어의 시작이 프로젝트를 시작하게 된 이유는 간단합니다. 저도 예전에 웹 페이지에서 특정 정보를 긁어오거나 분석해야 할 때가 종종 있었거든요. 예를 들어, 이메일 주소나..

1일차: 아이디어에서 프로토타입까지오늘은 Readers 크롬 앱 개발의 첫 번째 날이었습니다. 독서 경험을 최적화하기 위한 도구를 만든다는 목표 아래, 다양한 작업을 진행하며 구체적인 기능 정의와 기본 프레임워크를 완성했습니다.아이디어 구체화처음에는 단순히 "광고 제거"라는 개념에서 시작했지만, 더 나아가 사용자가 콘텐츠에 몰입할 수 있도록 돕는 도구를 만들기로 결정했습니다. 특히 웹사이트에서 방해 요소를 제거하고, 눈에 편안한 레이아웃을 제공하는 것이 핵심 목표였습니다.핵심 요구사항 정의프로젝트를 본격적으로 시작하기 전, 필요한 기능들을 다음과 같이 정리했습니다:불필요 요소 제거: 광고, 배너, 애니메이션 등 본문과 무관한 요소를 자동으로 제거.개인화 설정 지원: 글꼴 크기, 줄 간격, 색상 모드 등을..

Multi Search 주요 기능핵심 기능다중 검색 엔진 동시 실행Google, Naver, YouTube 등 주요 플랫폼에서 한 번에 키워드 검색입력 키워드를 공백/콤마로 구분해 여러 탭 자동 생성UI/UX간결한 입력 인터페이스실시간 자동 완성 기능 (최근 검색어 기반)오류 방지: 빈 입력 시 경고 메시지 표시로딩 상태 표시탭 생성 시 스피너 애니메이션으로 진행 상황 시각화성능 최적화탭 생성 딜레이 시스템동시 탭 생성 시 Chrome 크래시 방지를 위해 200ms 간격 적용데이터 관리chrome.storage.local로 최근 검색어 저장 및 복구커스터마이징검색 엔진 선택 옵션사용자 설정에 따라 Google, Naver, YouTube 선택 가능 (체크박스 UI)지원 환경Chrome 브라우저 전용Win..