Kage - Alat untuk menghapus JavaScript dari situs web dan mengarsipkannya secara offline

 (github.com/tamnd)
2 poin oleh GN⁺ 3 jam lalu | 1 komentar | Bagikan ke WhatsApp
  • Merender halaman dengan Headless Chrome untuk mengambil snapshot DOM final seperti yang dilihat manusia, lalu menghapus semua JavaScript dan mengunduh CSS, gambar, serta font ke jalur lokal guna membuat salinan statis yang berfungsi tanpa kode
  • Menyelesaikan masalah halaman yang disimpan dengan "Save As" lalu rusak seiring waktu menjadi layar kosong, spinner macet, atau mencoba menghubungi server analytics yang sudah hilang
    • Menyediakan file .html yang bisa langsung dibuka dari disk tanpa pelacakan, panggilan jaringan, atau perilaku tak terduga
  • Menggunakan crawling breadth-first, membaca robots.txt, menentukan titik awal dari sitemap.xml, dan tetap berada di host seed
    • Memiliki sifat idempotent, sehingga halaman yang sama hanya diambil sekali, terlepas dari http·https atau ada tidaknya trailing slash
    • Menyimpan posisi saat Ctrl-C dan melanjutkan saat dijalankan ulang, merender ulang dengan --refresh, dan memulai baru dengan --force
  • Menyediakan flag untuk mengatur cakupan dan perilaku crawling seperti --max-pages, --max-depth, --scope-prefix, --subdomains, --scroll, --workers
  • Dengan kage pack, salinan dapat dikemas menjadi satu file, dengan pilihan arsip ZIM atau file eksekusi mandiri yang juga berfungsi sebagai situs itu sendiri
    • ZIM kompatibel dengan ekosistem Kiwix sehingga dapat dibuka lewat kiwix-serve maupun aplikasi desktop dan seluler Kiwix
    • Biner mandiri membuat penerima tidak perlu memasang apa pun, dan --base dapat digunakan untuk membuat viewer untuk OS lain (sekitar 13 MiB + ukuran situs)
  • Packing deterministik memastikan salinan yang sama selalu menghasilkan file yang identik byte demi byte, dengan UUID arsip diturunkan dari konten sehingga aman untuk checksum dan cache
  • Jika dibangun dengan tag webview, menggunakan WebView OS (WKWebView·WebView2·WebKitGTK) agar terbuka di jendela aplikasi sendiri, bukan tab browser
  • Pipeline pemrosesan: URL seed → render Headless Chrome → snapshot DOM final → hapus JS → lokalkan aset → simpan ke disk
  • Lisensi MIT

Bacaan terkait

1 komentar

 
GN⁺ 3 jam lalu
Komentar Hacker News

  • Saya penasaran bagaimana GIF demo di README dibuat, jadi saya lihat: https://github.com/tamnd/kage/blob/01e75b87ecc893bbba7943c63...
    Ternyata menggunakan proyek lain dari penulis yang sama, yaitu https://github.com/tamnd/ascii-gif
    Skrip yang dipakai untuk demo ada di https://github.com/tamnd/kage/blob/01e75b87ecc893bbba7943c63..., dan cara menjalankannya juga ditulis sebagai komentar: ascii-gif render docs/demo/kage.tape -o docs/static/demo.gif
    Ini terlihat seperti wrapper yang sangat opinionated untuk https://github.com/charmbracelet/vhs

    • Apakah Anda sudah mendengar kabar baik dari penyelamat terminal asciinema: https://asciinema.org/
    • Di $HOME/bin/ saya juga ada cukup banyak binary pribadi seperti ini. Misalnya delete-all-npm, clean-rust-cache, download-youtube-playlist, get-markdown; enak karena tidak perlu menghafal perintah
      Kadang agen coding juga bisa mencari sendiri bagaimana cara memanggil alat-alat seperti ini
    • Ini juga bisa dibuat sebagai animated SVG alih-alih GIF, dan karena cuma keyframe teks, ukurannya jauh lebih kecil daripada GIF: https://github.com/vytskalt/pseudoc/blob/main/assets/factori...
    • Sebagai referensi, di platform lain seperti Windows/macOS, LiceCAP adalah alat yang sangat bagus untuk merekam layar menjadi GIF kecil. Ini dibuat oleh penulis Winamp dan Reaper DAW: https://www.cockos.com/licecap/
    • VHS sangat bagus untuk membuat pembuatan video command-line menjadi scriptable

  • Saya bisa melihat ini dipakai saat ingin membuat wiki perusahaan mudah diakses bahkan secara offline. Misalnya ada dokumentasi berguna di wiki yang diperlukan di lapangan saat sinyal ponsel tidak ada
    Keren bahwa seluruh situs bisa dibundel menjadi satu binary, tetapi versi yang tidak memerlukan proses serving terpisah akan terasa sangat menarik
    Tampaknya juga mungkin dibuat seperti shim titik masuk HTML tunggal dengan sedikit JavaScript untuk menelusuri arsip konten situs, idealnya dalam bentuk yang tertanam

    • Memposting ini ke Hacker News memang tempat yang pas. Saya akan mempertimbangkan untuk mengerjakan idenya
      Di kepala saya sudah ada skrip/program yang mengubah HTML menjadi Markdown, jadi secara praktis saya bahkan bisa menyimpan semuanya ke disk sebagai folder file Markdown lalu meng-commit-nya ke repositori Git

  • Ini luar biasa. Saya ingin mengambil prototipe buatan seseorang dari tempat seperti Lovable sebagai salinan offline, lalu mengelola versi dan membagikannya dalam format yang lebih mudah
    Pendekatan yang kami ambil kami tulis di sini: https://productnow.ai/blogs/extracting-html-from-ai-prototyp...
    Sekarang saya akan melihat ini dan mencoba apakah sebagian bisa diubah. Saya suka gagasan mirror offline, dan use case terkait kolaborasi jadi jauh lebih sederhana

  • Di situ tertulis kage serve $HOME/data/kage/paulgraham.com, tetapi kalau hasilnya statis saya tidak paham kenapa perlu server. Tidak bisakah dibuat agar bisa langsung dibuka di browser?
    Misalnya kalau bisa seperti $ firefox $HOME/data/kage/paulgraham.com, hasilnya akan bisa dipakai bahkan di mesin yang tidak memasang kage

    • Mungkin sebagai gantinya bisa pakai python -m http.server. Saya belum mencobanya, tetapi sepertinya akan bekerja
      Sebenarnya Kage terdiri dari dua bagian. Satu adalah crawler yang merayapi halaman dan mengubahnya menjadi HTML bersih dengan menangkap DOM setelah dirender oleh Chrome/Chromium, dan yang lain adalah komponen pack/serve yang mengemas hasilnya menjadi file ZIM untuk Kiwix atau executable
    • Biasanya kalau halaman dimuat seperti itu, JavaScript diblokir
    • Kalau begitu, kemungkinan besar akan menemui banyak sekali masalah CORS

  • Menurut saya SingleFile [0] adalah versi yang jauh lebih kokoh dari ini
    JavaScript juga dihapus seluruhnya, tetapi semuanya dibundel menjadi satu file HTML yang mudah dibagikan. Aset biner seperti web font atau gambar dimasukkan sebagai string base64
    Juga menyediakan CLI berbasis Puppeteer [1]
    [0]: https://github.com/gildas-lormeau/singlefile
    [1]: https://github.com/gildas-lormeau/single-file-cli

    • Repositori ini tampaknya hanya menyimpan satu halaman web
      Yang sedang diimplementasikan di sini adalah pencerminan seluruh situs web termasuk subhalaman, jadi semuanya tetap bisa dijelajahi saat offline. Misalnya seperti semua esai di paulgraham.com
    • Saya sangat suka SingleFile. Ekstensi Firefox-nya bekerja cukup baik untuk menyimpan halaman dengan rapi
      Namun jika Kage bisa menggabungkan kualitas reproduksi setingkat SingleFile dengan pendekatan perayapan ala HTTPTrack, ini tampak menjanjikan. Aplikasi satu halaman agak rumit untuk diarsipkan, jadi saya penasaran seberapa baik Kage akan menanganinya
    • Terima kasih untuk tautannya. Saya akan mencoba mengimplementasikan fitur HTML tunggal ini. Sepertinya akan bagus untuk dimiliki
    • Apa bedanya dengan melakukan File -> Save as di browser web mana pun di komputer?
    • Saya juga terpikir soal ini pada awalnya, dan menurut saya ini solusi yang sangat elegan. Juga tidak rumit secara tidak perlu

  • Saya mencoba menggandakan situs HTTP, yaitu bukan HTTPS, tetapi muncul navigation failed: net::ERR_NAME_NOT_RESOLVED. Bahkan saat protokolnya dinyatakan eksplisit dengan http://, hasilnya tetap sama

  • Saya biasa memakai httrack(https://www.httrack.com) saat mengunduh wiki untuk dibaca di pesawat. Tidak sempurna, tetapi lebih baik daripada hal-hal lain yang pernah saya temukan sebelumnya
    Saya juga akan mencoba ini, dan akan sangat senang kalau hasilnya bagus

    • Jadi nostalgia. Sekitar 20 tahun lalu, internet masih berupa dial-up telepon yang mahal, jadi saya pergi ke warnet, mengunduh situs web dan komik dengan HTTrack, menyalin semuanya ke USB flash drive 128MB yang saat itu terasa sangat besar, lalu membawanya pulang untuk dibaca secara offline
    • Kalau khusus wiki, apakah ada alasan untuk tidak memakai Kiwix? Untuk kasus yang bukan rilis “resmi”, memang lebih rumit, tetapi ada layanan yang membuatkan file ZIM. Aplikasi pembaca desktop-nya menurut pengalaman saya cukup bagus
      https://wiki.openzim.org/wiki/Build_your_ZIM_file
      EDIT: https://get.kiwix.org/en/solutions/applications/kiwix-reader...
    • https://github.com/archiveteam/grab-site atau browsertrix mungkin lebih mudah dipakai bagi sebagian orang. Ini alat yang digunakan saat banyak data data.gov harus disimpan sebelum diturunkan

  • Selama bertahun-tahun saya mengumpulkan cukup banyak arsip situs web lama. Yang menarik, dump HTML yang jelek justru lebih berguna daripada arsip yang “sempurna”
    Itu juga salah satu alasan saya makin menyukai RSS seiring waktu. Feed yang berusia sekitar 10 tahun sering kali lebih mudah dipakai hari ini daripada situs web berbentuk aplikasi yang diawetkan dengan susah payah

    • Saya sedang mengerjakan proyek untuk menghasilkan dan mengarsipkan feed RSS. Proyek itu menyimpan seluruh riwayat sejak saat crawler mulai berjalan
      Setelah sedikit dirapikan, saya berencana segera merilisnya sebagai open source

  • Ini tampaknya berpotensi memberi beban yang cukup besar pada situs. Apakah ada pengaturan untuk mengendalikan kecepatan penyalinan atau menghindari gambar/video?
    Saya juga penasaran apakah ada cara mengambil hanya sebagian dari situs web

    • Bisakah Anda membuat ini sebagai issue baru? Saya akan menanganinya nanti. Sekarang pukul 1 dini hari di zona waktu saya, tetapi saya senang ada yang tertarik
    • Tinggal berpura-pura jadi crawler AI, masalah selesai

  • Proyek yang rapi dan saya suka idenya
    Sekilas saya lihat Chrome dijalankan dengan --no-sandbox, apakah ada alasan khusus untuk itu? Dari sisi keamanan, itu kemungkinan bukan ide yang baik. Kalau tidak ada alasan, saya sarankan sandbox tetap diaktifkan
    Bagaimanapun juga, kerja yang keren

    • --no-sandbox diperlukan di Docker. Mungkin diasumsikan bahwa ini kebanyakan dijalankan di Docker?