highlighter chrome extension

Penyorot MarkIt

Ini adalah tautan ekstensi chrome yang memungkinkan Anda menyorot teks penting di halaman web mana pun. Kunjungi kembali halaman tersebut dalam 1 menit, 1 minggu, atau 1 tahun - data Anda akan selalu ada.

Teknologi

1. (Vanila) JavaScript
2. GoogleAPI

Fitur

1. Sorot teks apa pun dan tekan Command+K untuk menyimpannya secara otomatis
2. Pengguna dapat menghapus sorotan yang disimpan untuk URL apa pun dengan satu perintah sederhana, Command+Shift+A
3. Disinkronkan di semua perangkat - jika Anda menyorot teks dari laptop, lalu melihat halaman web yang sama dari ponsel Anda, sorotan Anda akan ada di sana (jika Anda masuk ke Chrome di keduanya).

Struktur Data Tersimpan Saya (Objek)

 highlights = {
    google.com: {
        text1: ["query selector", index, note, color]
        text2: ["query selector", index, note, color]
    },
    yahoo.com: {
        text3: ["query selector", index, note, color],
        text4: ["query selector", index, note, color]
    },
    https://developer.mozilla.org/en-US/docs/Web/API/document/execCommand: {
        "When an HTML document has been switched to designMode, its document object exposes an execCommand": ["p.summary", 20],
        "A DOMString specifying the name of the command to execute. See Commands for a list of possible commands.": ["p", 0, "example note", #CFFFDF]
    }
}

Cara Kerjanya

Saya memiliki dua skrip yang dimuat di setiap halaman. Yang pertama adalah background.js yang mendengarkan peristiwa tertentu. Peristiwa Command+K memicu fungsi yang memasukkan skrip ke dalam browser (injection_script.js), yang menyorot teks yang dipilih.

Untuk menyorot, seret mouse Anda ke beberapa teks, dan tekan Command+K. Ini memicu fungsi yang memanggil beberapa fungsi lainnya. Urutan acara:

1. Mengambil teks yang dipilih
2. Mengaktifkan Mode Desain, memungkinkan kita membuat perubahan sementara pada DOM
3. Jika latar belakang sudah disorot, maka kita perlu menghapus sorotan:
   1. Pilih tag < span > di sekitar teks dan atur style.backgroundColor = transparan (hilangkan sorotan)
   2. Mendapatkan objek 'highlight' dari penyimpanan - chrome.storage.get()
   3. Ulangi semua tombol (yang merupakan sorotan yang disimpan) untuk mencari kecocokan, dan menghapusnya dari penyimpanan
4. Jika tidak, bungkus teks dalam < span > dan terapkan warna latar belakang
5. Penyegaran di halaman: Ambil 'sorotan' dari penyimpanan
   1. Jika tidak ada data untuk URL aktif, setel kunci ke URL saat ini dan nilai ke objek kosong (aol.com: {})
   2. Jika ada, ambil struktur data highlight dari penyimpanan (chrome.storage.get())
6. Ambil dan tetapkan nilai pemilih kueri yang valid untuk teks yang dipilih (ini akan digunakan untuk menanyakan DOM dan menerapkan sorotan nanti. Lihat struktur objek di atas untuk klarifikasi)
   1. Jika elemen induk dari teks yang disorot memiliki nama kelas, simpan string "element.className" ("p.firstParagraph", "h2.sectionHeader", dll)
   2. Jika tidak ada nama kelas, simpan string "elemen" ("p", "h2", "li", dll)
7. Berikan nilai pada kunci (teks yang disorot) (array yang berisi 2 nilai - pertama, pemilih kueri & kedua, indeks tempat teks yang dipilih muncul di elemen induk)
   1. Saya menyimpan indeks string karena jika saya hanya menyimpan teks dan pemilih kueri, katakanlah Anda menyorot "the" di bawah tag "p", saat menerapkan sorotan jika Anda menyegarkan halaman, setiap kemunculan "the" di a Tag "p" akan disorot. Menambahkan nilai indexOf memungkinkan saya memverifikasi bahwa indeks cocok dengan DOM dan baru kemudian menerapkan sorotan, jadi saya menerapkan sorotan ke kata yang benar.
8. Simpan variabel sorotan yang diperbarui yang berisi teks baru yang disorot menggunakan chrome.storage.set()
9. Matikan Mode Desain "mati"

File JavaScript kedua yang berjalan di setiap halaman adalah content_script.js. Ia memeriksa apakah ada objek tersimpan yang disebut 'highlight'. Jika tidak ada berarti pengguna tidak pernah menyorot apa pun. Itu kemudian membuat objek kosong dan menyimpannya di Chrome.

Jika ia menemukan objek 'highlight', ia akan memeriksa apakah ada data tersimpan untuk URL aktif. Jika tidak ada, skrip akan kembali.

Jika ada sorotan yang disimpan untuk URL:

1. fungsi applyHighlights() berjalan
2. Dibutuhkan dua parameter, objek 'highlight' dan URL aktif
3. Mengulang kunci dari objek yang disimpan (kunci adalah sorotan yang disimpan, sedangkan nilai kunci tersebut adalah array yang berisi nilai querySelector dan indexOf)
4. Jalankan document.body.querySelectorAll() untuk mendapatkan array dari semua node yang cocok
5. Loop melalui setiap node yang dikembalikan dan jika innerHTML berisi "string" yang cocok dengan kunci objek (teks yang disorot) DAN pada nilai indeks yang sama: 1. Menjalankan fungsi .replace() yang membungkus teks yang cocok dalam tag < span > dengan atribut gaya sebaris untuk warna latar belakang

• catatan tambahan: Saya awalnya memeriksa setiap node DOM secara rekursif untuk memeriksa kecocokan, tetapi menyimpan nilai querySelector dan membandingkan nilai HTML hanya dari node yang cocok dengan nilai yang saya simpan jauh lebih cepat.

Peningkatan untuk Versi Berikutnya

1. Simpan string spesifik yang Anda soroti

• "Unduh perpustakaan jQuery dari jQuery.com".
• Jika Anda menyorot "jQuery" kedua, nilai yang disimpan akan menjadi nilai pertama.
• Ini karena nilai indexOf yang saya simpan kembali setelah pertandingan pertama
• PLAN - mulai menghitung indeks setelah tag span

2. tidak dapat menyorot seluruh elemen blok (jika Anda menyeret sorotan dari h2 ke tag ap hanya h2 yang akan terdaftar)
3. DALAM PROGRESS: Izinkan pengguna memilih warna highlight

• Saat ini dikodekan secara keras

4. Tampilkan jumlah sorotan & sorotan aktual untuk suatu laman di ekstensi popup.html
5. Batasan/kasus tepi: email, PDF
6. Saya meminta izin untuk setiap situs. yang mana beberapa situs memblokir akses '*' (cnn.com)
7. Jika Anda menyorot "jQuery" di satu elemen, dan menyorotnya lagi di elemen lain, elemen kedua akan menggantikan elemen pertama (karena kuncinya sama)
8. Jika elemen induknya adalah tag sebaris, maka indeks dalam teks/html tidak terdaftar (-1) atau berakhir dengan sorotan di akhir tag sebaris. Temukan indeks dari tag rentang dan mulai indeksDari sana
9. Mode Ciutkan - ciutkan dokumen hanya ke elemen induk dari sorotan yang disimpan

Masalah Terpecahkan

1. Menyimpan Sorotan yang mencakup tag elemen sebaris (a, em, st, dll.)

• Sebelumnya hanya teks sebelum tag inline yang disimpan, karena saya menyimpan innerText
• Saya menyelesaikannya dengan menyimpan innerHTML saja
• Masalah yang muncul dari perubahan ini adalah saya menyimpan indeks innerText, yang akan menerapkan kembali sorotan ke teks standar di dalam elemen teks, seperti tag "p". Tetapi indexOf berbeda untuk item di sekitar elemen sebaris karena indexOf menghitung setiap karakter dalam tag.
• Untuk mengatasi ini, saya membandingkan nilai innerText.indexOf DAN innerHTML.indexOf dan membandingkan masing-masing dengan node yang cocok saat menerapkan sorotan ke halaman yang dikunjungi lagi oleh pengguna.

2. Jika Anda mengklik dua kali untuk menyorot suatu bagian, nilai indexOf tidak akan terdaftar, dan oleh karena itu aplikasi saya tidak dapat menerapkan kembali sorotan

• Untuk mengatasinya saya menambahkan metode .toString() dan .trim() ke indexOf(...)

3. Menyorot tag < a > akan menghapus tautan pada pemuatan halaman.

Peningkatan di Masa Depan

## Contoh Gambar

Kasus Tepi

1. Jika nama kelas berubah
   • Solusi: jika nama kelas tidak ada di DOM, hapus nama kelas dari pemilih kueri dan cari saja node tag elemen
2. Jika konten disembunyikan oleh sebuah tombol, sorotan saya tidak akan terdaftar karena ia mencari on_load dan konten hanya terungkap setelah acara browser (inilah sebabnya tidak berfungsi di email)

Izinkan seseorang mengakses semua sorotan di popup.html Izinkan pengguna mengubah warna stabilo Memperbaiki bug sorotan elemen sebaris