이 튜토리얼은 가장 작은 유용한 Chrome Manifest V3 프로토 타입을 구축합니다 : Pinterest Pin 페이지에 설치된 개인 텍스트 공간, 숫자 Pin ID에 의해 키를 넣고 저장됩니다. chrome.storage.local그것은 의도적으로 프로토 타입이며, Pinterest의 이전 노트의 생산 준비 클론이 아닙니다.
Pinterest의 DOM은 알림없이 변경될 수 있습니다. 선택자를 고립시키고, Pinterest의 보호된 브랜드를 모방하는 것을 피하고, 지원하는 페이지 유형 및 지역을 테스트합니다.
1.Manifest V3 확장을 만드는 방법
폴더를 만들기 위해서 제조사 :JSON 그리고 컨테이너 JS크롬의 명백한 참조 그것은 사용 가능한 열쇠에 대한 진실의 근원입니다.
{ "manifest_version": 3, "name": "Pin 컨텍스트 프로토 타입", "버전": "0.1.0", " 설명": "Pinterest Pin에 대한 개인 로컬 노트를 저장합니다.", "허증": ["스토리지"], "content_scripts": ["matches": ["https://.pinterest.com/*"], "js": ["content.js"], "run" " " " " " " " " "호스팅 경기가 넓기 때문에 Pinterest는 클라이언트 측의 탐색을 사용합니다. 기능이 덜 경로 또는 국가 도메인을 지원하는 경우, 좁은 문서와 범위가 있습니다.
2.Pin URL에서 안정적인 키를 추출
카드의 위치 또는 눈에 띄는 제목에 따라 키 노트를 하지 마십시오. 핀 / ... 길과 반환 0 0 0 어디서나 다른 곳.
옵션 getPinId(url = location.href) { try { const { pathname } = new URL(url); const match = pathname.match(//pin/(d+)/?/); return match ? match[1] : null; } catch { return null; }유효한 세부 사항 URL, 쿼리 라인, 비 핀 페이지, 잘못된 URL 및 지원을 주장하는 지역 패턴을 테스트하십시오. ID가 불확실한 경우 조용히 메모를 붙이지 마십시오.
3) 버전된 레코드를 저장
미래의 이민이 가능하도록 계획을 명시적으로 유지하십시오 :
아시네스 기능 readNote(pinId) { const key = 'pin-note:' + pinId; const result = wait chrome.storage.local.get(key); return result[key] ?? { 버전: 1, pinId, 텍스트: '', 업데이트At: null }; } async function writeNote(pinId, 텍스트) { const key = 'pin-note:' + pinId; const record = { 버전: 1, pinId, 텍스트, 업데이트At: new Date().toISOString() }; wait chrome.storage.local.set({ [key]: record }); return record; }Chrome 문서 기본 10MB 제한 스토리지.LOCAL그리고 별도의 무제한 저장 크롬은 또한 지역 확장 저장소가 삭제되면 삭제된다고 문서화합니다. 스토리지 API 문서 그리고 중요한 데이터를 초대하기 전에 수출을 설계합니다.
4) 고립된, 접근 가능한 편집기를 설치합니다.
그림자 DOM은 우연한 스타일 충돌을 줄입니다.이 예제는 페이지 몸에 붙어 있으므로 영국 Pinterest 클래스 이름에 의존하지 않습니다.
아시네스 기능 mountEditor(pinId) { 만약 (document.querySelector('[data-pin-context-root]')) return; const host = document.createElement('aside'); host.dataset.pinContextRoot = ''; host.setAttribute('aria-label', 'Private Pin note'); document.body.append(host); const root = host.attachShadow({ 모드: 'open' }); const label = document.createElement('label'); label.textContent = 'Private note'; const editor = document.createElement('textarea'); editor.set.Attribute('label', 'Private note for this Pin'); document.set.setAttribute('aria-label', 'Private note'); status status(‘Elttribute'; status status(‘Elttribute'Attribute'; status(‘Elttribute'statuit); status(‘label'label'label';인터페이스 텍스트 만들기 텍스트Content불신앙하지 않음 내부HTML눈에 띄는 초점 스타일, 충분한 대조, 실제 레이블, 키보드 액세스 및 초점을 훔치지 않는 상태 텍스트를 추가합니다.
5) 각 키스트로크에 글을 쓰지 않고 저장
기능 bindAutosave( 편집기, 상태, pinId) { 저장하십시오Timer; editor.addEventListener('input', () => { status.textContent = 'Unsaved'; clearTimeout(saveTimer); saveTimer = setTimeout(async () => { 시도하십시오 { 기다리십시오 writeNote(pinId, editor.value); status.textContent = '현지적으로 저장'; } catch (error) { console.error('Pin note save failed', error); status.textContent = 'Can't save'; } }, 400); })생산을 위해, 또한 페이지 전환에 붙어있는 입력을 흐르고, 서로를 과장하는 두 개의 탭으로부터 보호하고, 최대 노트 크기를 정의하고, 표면 비율 오류.
Pinterest의 클라이언트 측의 탐색을 관리하십시오.
한 번의 페이지 로드 매니저는 피드와 세부 사항 뷰 사이의 항해를 놓치고 있습니다.동력적인 조화 기능을 사용하고 각 변형에 대한 격리없이 변화를 관찰하십시오.
⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ) ⁇ ( ⁇ ) ⁇ ( ⁇ ) ⁇ ) ⁇ (생산 버전은 또한 가능한 곳에서 네비게이션 상태를 직접 모니터링하고 더 이상 필요하지 않은 관찰자를 분리해야합니다. 긴 피드에 코드를 프로파일; 페이지 성능을 낮추는 올바른 기능은 여전히 나쁜 확장입니다.
7.Manifest V3 보안 제한을 준수
Manifest V3은 원격 호스팅 실행 코드를 금지합니다. 확장 프로그램과 함께 실행 JavaScript를 묶고 기본 콘텐츠 보안 정책을 유지하면 정당화 된 변경이 없으며, 역동적 인 코드 실행을 피하고 기능이 요구하는 허가만 요청합니다. 마니페스트 V3 리뷰 플랫폼 모델을 설명합니다.
8) 특징을 추가하여 실제 제품 요구 사항
- JSON 수출/수입, 스케줄 검증 및 분쟁 처리;
- 복구를 위한 인간 읽을 수 있는 수출;
- 검색 및 선택 태그;
- 저장소 사용 및 주식 보고;
- - 메모 및 모든 데이터에 대한 삭제;
- 관찰 가능한 행동과 일치하는 개인 정보 보호 정책;
- 스케줄 버전 사이의 이주 테스트;
- 명확한 제거 및 Non-sync 경고;
- 오류 텔레메트리 단지 조심스러운 최소화 및 공개.
9) 실패 경로를 테스트하는 방법
- 포장되지 않은 확장을 충전하십시오
크롬:// 확장그리고 - 피드, 테이블, 핀 세부 사항 페이지 및 비 핀 경로를 방문하십시오.
- 두 개의 핀 사이에서 다시 충전하지 않고 탐색하고 노트 격리를 확인합니다.
- 두 개의 탭에서 동일한 Pin을 열고 갈등 행동을 테스트합니다.
- 스토리지 끄거나 비율 실패를 시뮬레이션하고 경고를 확인합니다.
- 수출, 테스트 기록을 제거하고 복원합니다.
- 테스트 키보드 탐색, zoom, 스크린 리더 라벨 및 어두운 / 밝은 페이지 조건.
엔지니어링 수업
신뢰할 수있는 Pinterest 확장은 안정적인 정체성, 저항력있는 생활주기 관리, 접근 가능한 UI, 제한된 허가, 문서화 된 저장 및 테스트 된 출구 경로에 달려 있습니다.
Pinterest 시스템을 계속 구축하십시오.
다음 단계와 일치하는 가이드를 계속하십시오 :
