Dalam seri artikel ini, saya ingin berbicara tentang pengalaman saya menulis ekstensi web untuk browser. Saya sudah memiliki pengalaman membuat ekstensi web, yang dipasang oleh sekitar 100.000 pengguna Chrome, yang bekerja secara otonom, tetapi dalam seri artikel ini saya memutuskan untuk mempelajari proses pengembangan ekstensi web dengan mengintegrasikannya secara erat dengan sisi server.




Bagian 2 , Bagian 3 , Bagian 4

Gagasan untuk ekstensi web

Setiap pengembang dihadapkan dengan tugas mengotomatisasi proses di browser. Bagi saya, tugasnya adalah mengumpulkan anggota kelompok yang memiliki subjek tertentu di LinkedIn dan Facebook.

Sebelumnya, saya punya pengalaman menulis solusi web-parser di php, tetapi situs-situs ini menggunakan banyak elemen dinamis dan fokus solusi untuk tugas ini telah bergeser secara khusus untuk berinteraksi dengan sumber daya web melalui browser.

Tentu saja, saya tidak akan melanggar perjanjian tentang penyediaan layanan (Syarat dan Ketentuan), jadi apa yang dijelaskan di bawah ini adalah isapan jempol belaka dari imajinasi saya dan tidak direkomendasikan untuk implementasi.

Dimungkinkan untuk dengan cepat membuka konsol pengembang dan menulis skrip javascript yang akan mensimulasikan tindakan pengguna, setelah itu saya bisa mengumpulkan data. Pendekatan ini sebagian bekerja dengan Facebook, di mana anggota grup dan informasinya dapat dikumpulkan pada satu halaman. Tapi itu tidak berhasil untuk LinkedIn, di mana Anda perlu membuka halaman setiap anggota.

Setelah mencari solusi pihak ketiga, saya memilih iMacros untuk tugas ini. Ekstensi ini memiliki bahasa sendiri untuk menulis makro. Entah bagaimana saya mengadaptasinya untuk memecahkan masalah bagi LinkedIn. Saya harus mengunduh versi lama Mozilla Firefox, karena ekstensi tidak berfungsi untuk implementasi multi-threaded browser ini.

Saat mencari solusi pihak ketiga, saya menemukan banyak variasi web-parser, web-crawler, web-scraper, dll. Banyak yang berfokus pada situs-situs dengan navigasi halaman-demi-halaman, dan bukan pada konten dinamis. Beberapa solusi menyarankan menginstal solusi perangkat lunak untuk sistem operasi, dan kemudian menggunakan ekstensi web untuk suatu kompleks. Saya menemukan hal-hal yang sangat khusus, misalnya, untuk mengumpulkan peserta hanya di Facebook.

Setelah semua siksaan, saya punya ide untuk "menciptakan sepeda saya" untuk mengotomatisasi tugas-tugas di browser. Di antara persyaratan wajib untuk ekstensi web saya, saya menyoroti:

1. Bekerja dalam jumlah maksimum browser web, termasuk seluler.
2. Menggunakan bahasa skrip standar untuk browser adalah javascript.
3. Menggunakan file data Anda sendiri dalam skrip.
4. Kemampuan untuk menyimpan data yang diterima dari skrip ke file.
5. Script harus publik atau pribadi. Jika skrip bersifat publik, maka tim keamanan perlu memeriksa skrip tersebut.

Lebih jauh dari daftar ini, saya mencatat hal-hal yang lebih spesifik untuk setiap item.

1. Anda perlu menggunakan kerangka kerja untuk menulis ekstensi web untuk meminimalkan upaya mengembangkan solusi lintas-peramban.
2. Javascript didukung oleh semua browser, tetapi Anda perlu menulis perpustakaan Anda sendiri untuk berinteraksi dengan ekstensi web. Perpustakaan ini harus memiliki fungsi untuk menyimpan data, mengambil data dari file yang diunduh, dll.
3. Seringkali diperlukan untuk menggunakan input untuk menjalankan skrip. Misalnya, data untuk otorisasi, kunci untuk API, daftar halaman untuk dirayapi, dll. Data tersebut harus diunggah langsung ke ekstensi web dan disimpan di cloud.
4. Menyimpan data dari skrip adalah salah satu fungsi yang paling penting untuk otomatisasi. Data yang disimpan harus diunggah ke csv langsung dari ekstensi web, atau dikirim ke email pengguna ketika batas data untuk mengunggah terlampaui. Misalnya, jika mengunggah anggota grup lebih dari 10.000, maka mengunduh dari ekstensi web mungkin memakan waktu lama. Ini harus dihindari dengan membuat file di server.
5. Anda harus memiliki antarmuka web administratif untuk tim keamanan untuk memeriksa skrip pengguna yang telah mereka tandai sebagai publik.

Dari waktu ke waktu, saya menemukan semakin banyak solusi untuk masalah yang sama - menjalankan skrip khusus di browser. Semua solusi ini tidak sesuai dengan persyaratan saya, karena saya ingin memiliki ekstensi web yang dapat menghapus iklan di setiap halaman; ubah halaman dan tunjukkan hanya isinya, tanpa markup yang tidak perlu; mengumpulkan data dari halaman mana saja dan mengonversinya menjadi format yang nyaman untuk digunakan di masa mendatang; mengumpulkan data setelah periode waktu tertentu; dll.

Oleh karena itu, saya mati-matian “terbakar” dengan membuat ekstensi untuk menjalankan skrip khusus untuk berbagai tugas maksimum.

Memilih kerangka kerja ekstensi web

Karena saya awalnya menargetkan jumlah maksimum browser web, saya membutuhkan kerangka kerja untuk membangun ekstensi lintas-browser. Kita dapat segera mencatat fakta bahwa tidak ada kerangka kerja seperti itu. Karena banyak browser, walaupun mereka bekerja dengan cara ini dan memberikan ekstensi web dengan API yang serupa untuk interaksi, pada dasarnya berbeda.

Saya terpaksa segera meninggalkan versi awal dukungan browser seluler. Karena tidak satu pun peramban tersebut tidak menyediakan kemampuan untuk menggunakan ekstensi web. Saya menemukan hanya satu menyebutkan dukungan untuk ekstensi web di browser Dolphin, tetapi saya tidak dapat menemukan informasi terperinci di situs web resmi. Diputuskan untuk meninggalkan ide cemerlang ini.

Saat menulis ekstensi lama saya, saya menggunakan kerangka kango. Pada 2013, itu senyaman mungkin. Meskipun tanpa dukungan Internet Explorer.

Karena ekstensi saya dapat berfungsi sebagai bookmarklet, saya tidak memperhatikan fakta ini dan memilih kerangka kerja ini, yang untuk saat itu hanyalah solusi sempurna untuk pengembangan lintas-browser.

Sejak itu, proyek-proyek lain telah muncul yang telah menetapkan sendiri tujuan pengembangan lintas web dari ekstensi web. Saya menemukan semua proyek ini pada tahap awal pengembangan. Tugas mereka telah disederhanakan, karena Mozilla Firefox mulai menggunakan WebExtensions API, yang memungkinkan untuk dengan mudah mengubah ekstensi untuk Chrome menjadi ekstensi untuk Firefox.

Ekstensi untuk browser Opera pada 2013 kompatibel dengan ekstensi untuk Chrome. Ekstensi untuk Safari sekarang hanya berfungsi untuk MacO, karena dukungan untuk platform Windows dari browser Safari itu sendiri telah lama berhenti.

Browser Tor berjalan pada mesin Mozilla Firefox yang lama dan karenanya mendukung ekstensi web xpi, yang telah ditinggalkan oleh Mozilla Foundation demi teknologi Web Extension.

Intinya, kerangka kerja kango hampir melakukan tugasnya hingga hari ini, karena menghasilkan ekstensi web untuk semua browser kecuali Internet Explorer. Tetapi karena banyak waktu telah berlalu dan Firefox sekarang bekerja pada mekanisme yang mirip dengan Chrome, kango menghasilkan paket yang sama untuk dua browser. Saya harus memodifikasi generasi untuk Firefox dan menambahkan generasi untuk Tor.

Karena status proyek kerangka kango tidak jelas, serta lisensi untuk kode, saya tidak dapat memposting perubahan saya di domain publik. Jika pemegang hak cipta mengizinkan rilis versi 1.9.0 dengan kode sumber terbuka, maka saya akan dengan senang hati membantu dalam upaya ini.

Semua ekstensi web memiliki dua poin untuk bekerja dengan data. File content.js memungkinkan Anda untuk memanipulasi DOM, sementara background.html memungkinkan Anda untuk bekerja dengan data latar belakang dan interaksi server. Komunikasi antara kedua titik ini terjadi melalui mekanisme pesan.

Jadi, untuk memodifikasi DOM dengan data dari sisi server, kita perlu mendapatkannya dari background.html dan menggunakannya dalam content.js melalui mekanisme pengiriman pesan

Mekanisme ideal semacam itu tidak berhasil untuk kasus saya karena sejumlah alasan. Oleh karena itu, saya meninggalkan background.js hanya logika bekerja dengan pop-up dan tombol ekstensi web di browser.
Logika ekstensi web apa pun dengan jendela sembul adalah sama. Dengan mengklik tombol, kami hanya menampilkan pop-up, pada klik kedua, tutup.

Kerangka kerja Kango menawarkan pengembang antarmuka terpadu untuk pengembang, dan kemudian menerjemahkan kode ekstensi web tertulis ke ekstensi web untuk browser web tertentu, dan karenanya menghemat banyak waktu mengembangkan ekstensi web lintas-browser.

Pada artikel berikutnya, saya akan berbicara tentang memilih "Kerangka kerja untuk sisi server ekstensi web dan antarmuka ekstensi web"