Cipta Chrome Extension penukar Markdown dengan Claude Code | Alpha | PandaiTech

Cipta Chrome Extension penukar Markdown dengan Claude Code

Tutorial mencipta Chrome extension dari kosong yang boleh menukar laman web kepada format Markdown, termasuk langkah deployment ke browser tanpa pengalaman koding.

Learning Timeline
Key Insights

Kelebihan Format Markdown untuk AI

Markdown adalah format terbaik untuk AI memahami kandungan laman web kerana ia mengekalkan struktur dokumen tanpa kod HTML yang berserabut. Ini sangat berguna jika anda ingin memberi 'context' kepada ChatGPT atau Claude.

Tips Kustomasi Extension

Anda boleh meminta Claude Code untuk menambah ikon kustom (contohnya logo syarikat anda) atau menambah fungsi tambahan seperti memuat naik fail terus ke Google Drive selepas penukaran selesai.

Langkah Penting: Developer Mode

Jangan lupa untuk mengaktifkan 'Developer mode' di halaman Extensions. Jika tidak, butang 'Load unpacked' tidak akan kelihatan dan anda tidak boleh memasang extension yang dibuat sendiri.
Prompts

Prompt Mencipta Extension Penukar Markdown

Target: Claude Code
I often want to provide the contents of a web page to a large language model to use as context. Could you create for me a Chrome extension that has the action of converting the current page to markdown and downloading the file to my downloads folder? I'll need you to walk me through the whole process of deploying the Chrome extension so that I can use it as well. It doesn't need to be public, but just the simplest way extension that converts the current page to markdown.
Step by Step

Penyediaan Folder dan Penjanaan Kod dengan Claude Code

  1. Cipta satu folder kosong baharu di komputer anda dan namakannya sebagai 'Chrome extension'.
  2. Buka folder 'Chrome extension' tersebut di dalam interface Claude Code.
  3. Taipkan prompt yang menyatakan idea extension anda secara terperinci (rujuk Prompt Card).
  4. Pastikan anda meminta Claude Code untuk memberikan arahan penuh cara 'deployment' atau pemasangan extension tersebut.
  5. Tunggu Claude Code menyediakan pelan struktur fail, butiran implementasi, dan menjana semua fail kod yang diperlukan secara automatik ke dalam folder anda.
  6. Sahkan bahawa semua fail (seperti manifest.json, background.js, dsb.) telah muncul di dalam folder tersebut sebelum meneruskan ke langkah seterusnya.

Cara Memasang Extension ke Google Chrome (Deployment)

  1. Buka pelayar Google Chrome di komputer anda.
  2. Taip `chrome://extensions/` pada bar alamat (URL bar) dan tekan Enter.
  3. Aktifkan toggle 'Developer mode' yang terletak di penjuru atas kanan halaman tersebut.
  4. Klik butang 'Load unpacked' yang muncul di bahagian atas kiri.
  5. Cari dan pilih folder 'Chrome extension' yang telah dijana oleh Claude Code tadi.
  6. Klik 'Select Folder' untuk memuatkan extension ke dalam browser.
  7. Pastikan extension 'Page to Markdown' (atau nama yang anda berikan) muncul dalam senarai tanpa sebarang mesej error.

Menguji dan Menggunakan Extension

  1. Klik ikon 'Extensions' (berbentuk kepingan puzzle) di bar alat Chrome (sebelah URL bar).
  2. Cari extension 'Page to Markdown' dan klik ikon 'Pin' supaya ia sentiasa kelihatan di bar alat.
  3. Layari mana-mana laman web yang anda ingin tukarkan kepada format Markdown.
  4. Klik pada ikon extension tersebut di bar alat Chrome.
  5. Buka folder 'Downloads' di komputer anda untuk melihat fail Markdown yang telah dijana secara automatik.
  6. Buka fail tersebut untuk memastikan kandungan laman web telah diekstrak dan diformat dengan betul dalam Markdown.

More from Coding & Pembangunan Aplikasi AI

View All