🎙️ Diponegoro Recorder (Chrome Extension)

Diponegoro Recorder adalah ekstensi Google Chrome ringan berupa floating widget (widget melayang) yang dirancang khusus untuk mempermudah pengerjaan tugas speaking bahasa Inggris di platform LearnSocial.

Dengan ekstensi ini, kamu tidak perlu lagi membuka aplikasi recorder bawaan laptop atau berpindah tab. Cukup rekam, dengarkan preview, dan unduh file .mp3 langsung dari halaman LearnSocial!

🌍 Latar Belakang & Versi Website

Awalnya, tools ini dibangun dalam bentuk website mandiri yang masih bisa diakses kapan saja melalui tautan berikut: https://diponegoro-recorder.vercel.app/

Namun, demi kepraktisan dan kemudahan pengerjaan tugas, agar tidak perlu repot membuka dua tab yang berbeda antara website rekam dan halaman tugas, website ini diadaptasi menjadi sebuah ekstensi Chrome. Meskipun saat ini belum dipublikasikan secara resmi di Chrome Web Store, fungsionalitasnya tetap sama persis dan alur kerja dijamin akan jauh lebih efisien!

✨ Fitur Utama

• Floating Widget: Tampil ringkas di pojok kanan bawah layar dan dilengkapi tombol minimize/maximize agar tidak menutupi materi pelajaran.
• Rekam & Pratinjau: Rekam suara dan langsung dengarkan hasilnya sebelum diunduh.
• Format MP3 Otomatis: File audio otomatis dikonversi ke format .mp3 menggunakan lamejs, siap untuk diunggah ke LearnSocial.
• Ringan & Cepat: Dibangun menggunakan HTML, CSS, dan JavaScript murni tanpa framework berat.

⚙️ Cara Pemasangan (Instalasi Lokal)

Karena ekstensi ini tidak dipublikasikan di Chrome Web Store, kamu bisa memasangnya secara manual (gratis) dengan Developer Mode (Mode Pengembang). Ikuti langkah-langkah mudah berikut:

Langkah 1: Unduh File

1. Klik tombol hijau <> Code di bagian atas repositori ini.
2. Pilih Download ZIP.
3. Ekstrak file ZIP yang baru saja diunduh ke sebuah folder di laptop kamu. (Alternatif: Kamu juga bisa melakukan git clone https://github.com/ReintB/diponegoro-recorder.git)

Langkah 2: Pasang di Google Chrome

1. Buka browser Google Chrome.
2. Ketik (copy-paste) URL berikut di address bar dan tekan Enter: chrome://extensions/
3. Di pojok kanan atas halaman tersebut, aktifkan toggle Developer mode (Mode Pengembang).
4. Klik tombol Load unpacked (Muat yang belum dikemas) di kiri atas.
5. Cari dan pilih folder hasil ekstrak tadi (pastikan kamu memilih folder yang berisi file manifest.json).
6. Selesai! Ekstensi Diponegoro Recorder sudah aktif.

🌐 Pengaturan Target Website (Opsional)

Secara bawaan (default), widget ini akan muncul di semua website. Jika kamu ingin widget ini hanya muncul secara eksklusif di website LearnSocial Undip, kamu bisa mengubah pengaturannya:

1. Buka file manifest.json di dalam folder ekstensi menggunakan text editor.
2. Cari baris kode berikut:

   "matches": ["<all_urls>"],

3. Ubah baris tersebut menjadi URL spesifik LearnSocial:

   "matches": ["*://undip.learnsocial.online/*"],

4. Simpan file manifest.json.
5. Buka kembali tab chrome://extensions/, lalu klik tombol Refresh (ikon melingkar) pada kotak ekstensi Diponegoro Recorder untuk menerapkan perubahan.

⏸️ Menonaktifkan atau Menghapus Ekstensi

Jika kamu sedang tidak mengerjakan tugas bahasa Inggris dan ingin menyembunyikan widget ini sementara waktu, kamu bisa mengaturnya dengan mudah:

1. Buka halaman ekstensi dengan mengetikkan chrome://extensions/ di address bar.
2. Cari kotak ekstensi Diponegoro Recorder Widget.
3. Mematikan Sementara: Matikan toggle (sakelar) berwarna biru di pojok kanan bawah kotak ekstensi hingga berubah menjadi abu-abu. Kamu bisa menyalakannya kembali kapan pun dibutuhkan.
4. Menghapus Permanen: Klik tombol Remove (Hapus) jika kamu ingin mencabut ekstensi ini sepenuhnya dari browser.

🛠️ Tech Stack

• HTML5 & CSS3
• Vanilla JavaScript
• lamejs (Untuk encoding MP3)

💡 Catatan Penggunaan

Pastikan browser Chrome kamu memiliki izin (permission) untuk mengakses mikrofon. Jika muncul pop-up permintaan akses mikrofon saat menekan tombol "Mulai Rekam", klik Allow (Izinkan).