Pada artikel ini, saya melanjutkan serangkaian publikasi yang ingin saya bicarakan 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 1 , Bagian 3 , Bagian 4

Memilih kerangka kerja untuk sisi server

Di awal ide saya, saya berpikir tentang bagaimana cara menyimpan data yang diperoleh sebagai hasil dari skrip. Kemungkinan menggunakan locaStorage atau solusi serupa untuk database sisi klien muncul di pikiran. Ketika perencanaan kode berlangsung di sepanjang jalur ini, ternyata mengunduh file dan menyimpan di komputer pengguna bukanlah ide yang baik, karena pengguna akan terikat pada satu komputer.

Oleh karena itu, perlu untuk menyimpan skrip pengguna, data yang diperoleh sebagai hasil menjalankan skrip di sisi server. File pengguna juga harus dimuat melalui sisi server. Pengguna harus mendaftar, mengatur ulang kata sandi, dll. Langsung melalui antarmuka ekstensi web, karena pendaftaran melalui halaman terpisah tidak akan memungkinkan interaksi yang nyaman dengan ekstensi web.

Dengan demikian, cara untuk menggunakan XHR bersama dengan RESTful API dipilih. Opsi ini juga memungkinkan penggunaan kode yang sama di masa mendatang untuk membangun sistem pengiriman data yang disalurkan melalui pipa. Misalnya, mendapatkan posisi sumber daya web dalam hasil mesin pencari dapat dijadwalkan dalam siklus harian. Setelah itu, aplikasi pihak ketiga meminta data yang diperoleh sebagai hasil dari skrip menggunakan API dan membuat grafik yang menunjukkan kecenderungan posisi untuk berubah dalam hasil pencarian.

Banyak kerangka kerja dalam berbagai bahasa pemrograman memiliki pustaka, modul, dan paket untuk pengembangan cepat aplikasi server RESTful. Selama sekitar 12 tahun saya telah bekerja dengan berbagai kerangka kerja berbasis PHP, dan selama 3 tahun terakhir saya juga telah bekerja dengan Meteor.js. Kerangka kerja ini berjalan di atas node.js, jadi saya memilihnya untuk bagian server karena kinerjanya yang tinggi (rata-rata 112 milidetik per catatan satu baris data yang diterima dari skrip) dan sekumpulan paket siap pakai untuk membangun aplikasi.

Sebagai perpustakaan RESTful , saya memilih paket github.com/kahmali/meteor-restivus , yang antara lain perlu ditambal, karena tidak berfungsi dengan benar dengan otorisasi kait dan perlindungan dari teknik menebak kata sandi tanpa batas.

Restivus memiliki fungsionalitas yang baik untuk menggambarkan RESTful API dan mendukung kerja dengan cara yang diizinkan atau anonim. Token dan userId digunakan sebagai konfirmasi otoritas untuk mengeksekusi metode yang ditentukan pengguna di alamat RESTful. Parameter ini dapat disimpan dalam izin web localStorage dan digunakan saat memanggil XHR.

Untuk zona administratif, saya memilih paket github.com/yogiben/meteor-admin yang dapat diperluas dan sangat dapat dikonfigurasi, yang memungkinkan saya mengurangi waktu untuk membuat banyak halaman dengan tipe yang sama untuk kebutuhan tim keamanan.

Merancang Antarmuka untuk Ekstensi Web

Antarmuka memainkan peran yang menentukan dalam pemilihan produk oleh pengguna. Kenyamanan dan minimalis dipilih sebagai kriteria utama untuk antarmuka ekstensi web. Selanjutnya, sisi estetika ditambahkan untuk melengkapi seluruh aplikasi.

Semantic-ui dipilih sebagai kerangka kerja css / html. Pada saat yang sama, saya menolak paket npm tambahan dan mekanisme perakitan seperti webpack untuk meminimalkan ketergantungan dan ukuran ekstensi web. Kode ini ditulis setransparan mungkin, hanya menggunakan tiga js libraries dan file pihak ketiga.

Untuk memulai proses, daftar halaman yang diperlukan dikompilasi. Halaman untuk bekerja dengan akun pengguna dikelompokkan ke dalam daftar ini.

1. Halaman login
2. Halaman Pendaftaran
3. Halaman Reset Kata Sandi

Pada titik ini, ada masalah pengaturan ulang kata sandi satu kali. Dalam aplikasi normal, pengguna dapat mengikuti tautan, mereset kata sandi, dan kemudian memasukkan aplikasi. Ekstensi web dapat "mencegat" tautan menggunakan navigator.registerProtocolHandler dan mengotorisasi pengguna dalam ekstensi web, tetapi tidak semua browser mendukung ini. Oleh karena itu, diputuskan untuk mereset kata sandi melalui tautan, dan kemudian pengguna dapat memasukkan ekstensi web menggunakan kata sandi baru.

Di bawah ini adalah formulir untuk mendaftarkan pengguna baru di ekstensi web.


Di sini Anda dapat melihat elemen untuk pemasaran sosial, seperti kode Undang dan tautan untuk distribusi di jejaring sosial di sebelah elemen untuk mengirim pertanyaan ke layanan dukungan.

Setelah pendaftaran, atau setelah otorisasi, pengguna dapat mengedit profilnya langsung di ekstensi web. Ini secara kualitatif meningkatkan solusi saat ini, karena menghilangkan kebutuhan untuk bekerja dengan situs web yang terpisah. Pengguna dapat melakukan semua tindakan di satu tempat.


Semua layar dibagi menjadi beberapa tab, yang memungkinkan Anda untuk dengan cepat berpindah antar layar dan memainkan peran semacam menu. Dalam beberapa kasus, untuk representasi yang lebih visual, elemen diminimalkan untuk iterasi saat ini. Sebagai contoh, tanda tangan tombol ditempatkan pada tombol itu sendiri, meskipun di masa depan direncanakan untuk mengganti daftar tombol vertikal dengan yang horisontal dan menghapus tanda tangan di tooltips. Ini dilakukan untuk memaksimalkan penyajian ekstensi web untuk pengguna baru. Ini adalah bagaimana layar utama dengan daftar skrip untuk iterasi saat ini dibuat.


Setiap skrip pengguna harus dibuat oleh seseorang. Seperti yang disebutkan sebelumnya dalam ekstensi web dapat ada skrip publik, serta skrip pribadi. Untuk menambahkan skrip, gunakan formulir sederhana berikut ini.


Selanjutnya, pengguna dapat mengatur tanda publisitas skrip, yang akan memungkinkan pengguna lain untuk menggunakan pengalaman komunitas ekstensi web.

Skrip publik memiliki beberapa batasan. Misalnya, mereka tidak dapat digunakan untuk memulai pada halaman, dalam penjadwal tugas dan memiliki tombol pintas. Selain itu, setiap skrip publik memiliki kemampuan untuk "mengedit", di mana pengguna dapat menghapus tanda publisitas dan menyimpannya di negara pribadi sebagai skripnya sendiri. Langkah-langkah tambahan ini diperlukan untuk melindungi terhadap pengembang yang tidak bermoral. Saat "mengedit" skrip publik, pengguna akan diminta untuk meninjau kode dan memutuskan penggunaannya untuk kebutuhannya.

Mengunduh file dalam ekstensi web dilakukan dengan membaca konten file ke dalam buffer, penyandian dan pengiriman lebih lanjut melalui saluran XHR ke server. Di server POST, permintaan diproses dan file dikirim ke penyimpanan cloud. Dalam skrip, pengguna dapat membaca file yang diunduh melalui GC.loadFile ('filename.ext'); , suatu fungsi dari perpustakaan internal tentang artikel terpisah yang akan ditulis.


Setiap skrip dapat menulis data dari perhitungan dengan memanggil fungsi perpustakaan internal. Setiap panggilan akan merekam satu baris dalam sel dengan nama yang sama untuk semua baris. Dengan cara ini Anda dapat menulis file csv. Layar di bawah ini menunjukkan antarmuka untuk bekerja dengan data keluaran. Pengguna dapat mengunduh data secara langsung dari ekstensi web, mengirim file yang dihasilkan ke emailnya, mendapatkan tautan ke API untuk digunakan dalam aplikasi pihak ketiga, atau menghapus data.


Semua tindakan yang mengubah status skrip, seperti tindakan hapus, memerlukan konfirmasi. Ekstensi web memiliki batasan pada penggunaan jendela pop-up atau konfirmasi, karena itu sendiri memiliki antarmuka yang berjalan di pop-up. Oleh karena itu, mekanisme input dari kata konfirmasi digunakan.


Pada artikel selanjutnya saya akan berbicara tentang "jebakan dalam mengimplementasikan interaksi ekstensi web dan sisi server . "