world wide wishlist
1.0.0
wwwishlist는 웹의 모든 웹 사이트에서 크롬 브라우저의 로컬 스토리지로 소원을 절약 할 수있는 크롬 확장자입니다. 그로 인해 데이터가 완전히 비공개로 유지됩니다.
확장은 현재 발표되지 않았으며 내 친구가 1-2 개월 동안 테스트 한 후에는 완전히 공개 될 것입니다.
자세한 설명은 Chrome StorePage를 참조하십시오.
아래에는 내부 작업, 계획된 내용 및 기고자, 일부 문서 및 라이센스 제품에 대한 간단한 개요가 있습니다.
wwwishlists의 핵심은 스크레이퍼와 함께 팝업 (HTML, 컨트롤러 및 뷰)입니다.
스크레이퍼는 이미지를 반환하기 위해 팝업이 열리는 웹 사이트에 코드를 주입합니다. 나는 가격을 잡으려고 시도했지만 가격은 종종 텍스트 필드 (또는 여러) 이상이 아니라는 것을 빨리 알게되었습니다. 제품 이미지가 아닌 이미지를 제거하기 위해 이미지가 약간 필터링됩니다. Amazon.de 웹 사이트에서 문제를 해결했기 때문에 페이지의 모든 iframe에 이것을 주입하는 것에 대해 결정했습니다. 그 문제가 왜 존재하는지 알고 있다면 내 하루를 보내고 말해주십시오. 사용자가 모든 데이터를 입력하고 저장하면 선택한 이미지는 200x200 픽셀로 축소되고 Chrome Extension API가 로컬 스토리지에 대해 하나의 큰 JSON 파일 만 허용하기 때문에 Base64 데이터로 변환됩니다. 이 프로세스가 CORS에 실행되면 이미지 URL이 대신 안전합니다.
큰 기능 업데이트를 계획하지 않습니다. 내 확장이 수행되지 않는 웹 사이트에 매우 관심이 있습니다. 다음으로 작성하는 것은 아마도 기능에 대한 적절한 단위 테스트입니다. 나는 모든 것이 작동하는 동안 시험을했고 그 기간 동안 내가 작성한 의사 테스트를 자동화하지 않는 것을 후회하고 있습니다. 나는 더 나은 가격/통화 절약을 원하지만 (지금은 문자열 일뿐)하지만, 나는 그것을 사용하고 싶다는 것에 만족하기 위해서는 위시리스트의 모든 항목을 총 하나까지 (프로젝트 위시리스트의 경우) 추가 할 수있는 능력을 원할 것입니다. 그리고이를 위해서는 통화 변환기 API를 호출해야합니다. 내가 놓친 또 다른 큰 기능은 서버를 실행하지 않는 쉬운 공유 방법입니다.
새로운 기능을 사용하려면 GitHub 문제를 제기하십시오. 결국 풀 요청을 승인하기 위해 귀하와 협력하고 싶습니다. 버그 수정을 수행하거나 업데이트하려면 Docs PULL 요청이 매우 환영합니다. 이 프로젝트를 구축/포크하려면 :이 전체 프로젝트는 GPL 2에 따라 릴리스됩니다. 나는 비 통합 공유 및 변경을 제한하지 않고 상용화를위한 코드를 매력적으로 만들기 위해 GNU를 선택했습니다. 당신이 도와주고 싶지만 무엇을 알지 못하면, 계획된 섹션에서 위를 살펴보십시오.
컴퓨터에서 프로젝트를 설정하려면 NPM 10.5 이상이 필요합니다. 코드가 실행되면
npm install
Package.json에 지정된 종속성 Bulma 및 Node-Sass를 설치하기 위해. SASS 변경에서 새 Bulma 파일을 생성하려면 간단히 실행됩니다.
npm css-build
또는 Sass Run에서 작업하는 동안 자동으로 이런 일이 발생하기를 원한다면
npm start
불마를 지속적으로 구축합니다.
크롬 스토어 에이 크롬 확장을 추가하려면 오른쪽 상단의 퍼즐 아이콘을 클릭하십시오 -> 확장자 관리 -> 개발자 모드 켜기 -> 포장되지 않은로드 및 디렉토리에서 월드 와이드 위시리스트 폴더를 선택하십시오.
따라서 개발자 버전이 설치되어 있습니다.
Chrome Storage API는 큰 단일 .json 파일에만 저장할 수 있기 때문에 사악합니다. 이 파일은 DEV 도구를 통해 액세스 할 수 있지만 더 중요한 것은 StoragetemPlate.json에서 DB 구조를 볼 수 있습니다.
스토리지는 모델 및 데이터베이스 처리에서만 액세스해야합니다.
나는 현재 사람들이 기여하기를 원한다고 확신하지 못하므로 지금은 모든 단일 기능을 설명하지는 않지만 무슨 일이 일어나고 있는지에 대한 구조를 더 많이 설명 할 것입니다. 실제로 그렇게하고 싶다면 저에게 알려 주시면 이해하지 못하는 것을 설명하고 더 철저한 문서를 작성하게되어 기쁩니다.
나는 주로 코드의 MVC 패턴을 따릅니다. 요약하면 모든 페이지에는 컨트롤러와보기가 있으며 모든 데이터 포인트에는 모델이 있습니다. 각 모델은 그에 속하는 CRUD (읽기 업데이트 삭제) 작업을 담당합니다. 각 보기 에는 데이터 만 표시되거나 사용자의 데이터를 검색합니다. 각 컨트롤러는 사용자 작업을 기다리고 각각의 작업을 수행하기 위해보기와 모델을 요구합니다. 버전화는 시맨틱 버전 2.0.0에 따라 수행됩니다
현재 프로그램 구조는 다음과 같습니다.
설치 또는 업데이트에서 BAC소 그 외에도 배경을 제외하고 마우스 오른쪽 클릭 확장자 아이콘 메뉴에 남아있는 컨텍스트 메뉴 항목이 발생합니다.
DB가 작동하기 위해 로컬 스토리지 json을 설정하기 위해 설치 중에 Background.mjs에서 호출됩니다. DB 구조의 기능을 변경하려면 업데이트의 마이그레이션도 여기에서 발생합니다.
여기서 데이터베이스 값에 대한 모든 한계 (최소 및 최대 값)가 실시됩니다.
확장자는 UUID V7을 사용하므로 ID는 UNIX 타임 스탬프로 시작하여 임의의 숫자로 계속됩니다. 이는 가져 오기 데이터에 적절하게 중요합니다 (즉, 고유 한 데이터는 실제로 고유합니다).
이 파일은 데이터를 가져오고 내보내는 방법을 규칙했습니다. 이 확장이 다운로드 권한을 사용하는 이유입니다. 사용자는 설정 페이지에서만 해당 기능에 액세스합니다.
이 파일은 Wish 및 Wishlist Objects에서 CRUD 작업을 처리하는 클래스입니다.
SettingScontroller.mjs는 지금 당장 내보내기 가져 오기 기능 (버튼 링크)을 호출하는 역할을합니다. 현재 설정은 없지만 변경할 수 있습니다!
사용자는이 두 파일을 통해 mywishlist.html과 상호 작용합니다. 편집, 삭제, 삭제 취소, 삭제, 소원 이동, 위시리스트 생성이 모두 여기에서 발생합니다.
팝업이 클릭되면 컨트롤러는 Scraper.mjs를 호출하고 데이터를 사용하여 Scraper가보기를 검색 한 다음 팝업을 채우면 사용자가 저장할 사진과 추가 할 정보를 결정할 수 있습니다. 사용자가 뷰가 해당 데이터를 가져 오면 해당 사진을 Base64로 변환하고 컨트롤러로 다시 응답하여 저장합니다.
스크레이퍼는 이미지를 반환하기 위해 팝업이 열리는 웹 사이트에 코드를 주입합니다. 나는 가격을 잡으려고 시도했지만 가격은 종종 텍스트 필드 (또는 여러) 이상이 아니라는 것을 빨리 알게되었습니다. 제품 이미지가 아닌 이미지를 제거하기 위해 이미지가 약간 필터링됩니다. Amazon.de 웹 사이트에서 문제를 해결했기 때문에 페이지의 모든 iframe에 이것을 주입하는 것에 대해 결정했습니다. 그 문제가 왜 존재하는지 알고 있다면 내 하루를 보내고 말해주십시오.
이 프로젝트 전체에서 끊임없는 멘토와 환자 교사가 된 Kjeld Schmidt에게 감사드립니다. 당신의지도가 없으면 나는 코딩을 시작하지 않았을 것입니다.
멋진 이미지가 아닌 악어를 제공해 준 Huddel에게 감사합니다.
테스트를 도와 주신 다른 모든 친구, 가족 및 인터넷 낯선 사람에게 감사합니다.
멋진 프로그래머 커뮤니티를 구축 한 Jason Thor Hall과 그의 상인 상점을 튜토리얼 스크린 샷 자료로 사용할 수있는 허가를 받아 감사합니다.
