このチュートリアルでは、最小の有用なChrome Manifest V3プロトタイプを構築します:Pinterest Pinページに組み込まれたプライベートテキストエリア、数値のPin IDでキーを付け、保存されたPin IDに保存されています。 chrome.storage.localこれは意図的にプロトタイプであり、Pinterestの以前のノートの生産準備のクローンではありません。
Pinterest の DOM は通知なしに変更することができます. 選択者を隔離し、Pinterest の保護されたブランドを模することを避け、サポートしているページのタイプや場所をテストします。
1. Manifest V3 拡張子を作成する
フォルダーを作成する マニスト・ジソン そして、 コンテンツ.jsクロムの 明確な参照 真実の源は、利用可能な鍵です。
{"manifest_version": 3, "name": "Pin Context Prototype", "version": "0.1.0", "description": "Save a private local note for a Pinterest Pin.", "permissions": ["storage"], "content_scripts": ["matches": ["https://.pinterest.com/*"], "js": ["content.js"], "run""""""""""""ホスティングマッチは広いので、Pinterestはクライアントサイドのナビゲーションを使用します. 機能がルートや国ドメインをサポートする場合、狭いドキュメントと範囲が少ない場合。
2.Pin URLから安定したキーを引き出す
カードの位置や目に見えるタイトルによるキーノートをしないでください. 数値IDをカノニックから抽出します。 ピン/... 道と帰り道 ゼロ 他のどこでも。
関数 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、およびサポートを主張するすべてのローカルパターンをテストします。
3.バージョンレコードを保存する
明確なスケジュールを維持し、将来の移住が可能になるようにしてください。
async 機能 readNote(pinId) { const key = 'pin-note:' + pinId; const result = wait chrome.storage.local.get(key); return result[key] ? { バージョン: 1, pinId, テキスト: '', 更新: null }; } async 機能 writeNote(pinId, テキスト) { const key = 'pin-note:' + pinId; const record = { バージョン: 1, pinId, テキスト, 更新: 新しい Date().toISOString() }; wait chrome.storage.local.set({ [key]: 記録 }; return record; }Chrome がデフォルト 10 MB の制限を記録 ストレージ・ローカル別々のものと共に、 無制限の保管 拡張を拡張するための許可. Chrome はまた、拡張子が削除されたときにローカル拡張子ストレージが削除されることを文書化します。 ストレージ API ドキュメント 重要なデータを招待する前に、輸出を設計する。
4. 孤立したアクセス可能な編集者を設置する
Shadow DOM は、偶然のスタイルの衝突を減らします. 例はページの体に付属するので、それはイギリスの Pinterest クラス名に依存しない:
async function mountEditor(pinId) { if (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.setAttribute('aria-label', 'Private note'; status = status.create.Element'; status status.Attribute, status; status.Attribute, status; status; status;インタフェーステキストを作成する テキスト信じられないこと インテリアHTML目に見える焦点スタイル、十分な対比、実際のラベル、キーボードアクセス、焦点を盗まない状態テキストを追加します。
5. キーストロックに書かずに保存する
関数 bindAutosave(編集者、状態、pineId) { 保存してくださいTimer; editor.addEventListener('input', () => { status.textContent = 'Unsaved'; clearTimeout(saveTimer); saveTimer = setTimeout(async () => { 試してみてください { 待って writeNote(pinId、 editor.value); status.textContent = 'Save locally'; } catch (error) { console.error('Pin note save failed', error); status.textContent = 'Can't save'; } }, 400); } ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) )生産には、ページの移行に付属する入力をフラッシュし、2つのタブが互いに過剰に書くことから保護し、最大のノートサイズと表面割合のエラーを定義します。
6. Pinterestのクライアントサイドナビゲーションを処理する
一回のページロードトレーダーは、フィードと詳細ビューの間のナビゲーションを失い、不適切な和解機能を使用し、変動を観察し、それぞれの変動をリモンティングすることなく、
⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇生産バージョンは、可能な限り直接ナビゲーション状態を監視し、もはや必要とされていない観察者を無接続する必要があります 長いフィードでコードをプロフィールする; ページのパフォーマンスを低下させる正しい機能は、まだ悪い拡張です。
7. マニフェストV3のセキュリティ制限を尊重する
Manifest V3 は、遠隔でホスト可能な実行コードを禁止します. 拡張子で実行可能なJavaScriptをバンドルし、正当な変更がない限り、デフォルトコンテンツのセキュリティポリシーを保持し、ダイナミックなコード実行を避け、機能が必要とする許可のみを要求します。 マニフェスト V3 概要 プラットフォームモデルを説明します。
8. 現実の製品のニーズに特性を追加する
- JSON スケジュール認証および紛争処理を含む輸出/輸入
- 復興のための人間読みやすい輸出
- 検索とオプションタグ
- 収納・使用・配当・配当の報告
- ノートごとに、すべてのデータの削除
- 観察可能な行動と一致するプライバシーポリシー
- スケジュールバージョンの間の移行テスト
- 明確な解除と非同期警告
- エラーテレメトリーは、慎重な最小限化と開示のみで行います。
9.失敗の道をテストする
- 未包装の拡張子を充電する
chrome://拡張子」 - フィード、ボード、ピン詳細ページ、非ピンルートを参照してください。
- 2 つのピン間を再充電なしで航行し、ノート隔離を確認します。
- 2 つのタブで同じ Pin を開き、紛争行動をテストします。
- ストレージを無効にしたり、割合の失敗をシミュレートしたり、警告を確認したりします。
- 輸出、テスト記録を削除し、復元します。
- テストキーボードのナビゲーション、ゾーム、スクリーンリーダーラベル、暗黒/光のページ条件。
エンジニアリングレッスン
信頼性の高いPinterest拡張子は、安定したアイデンティティ、耐久性の高いライフサイクル処理、アクセス可能なUI、制限された許可、文書化されたストレージ、およびテストされた出力パスに依存します。
あなたのPinterestシステムを構築し続ける
次のステップに合ったガイドを継続してください:
