Beberapa minggu yang lalu saya menghabiskan akhir pekan membuat yang lain Panggilan untuk proposal Dukungan pengiriman dalam bentuk ekstensi Firefox. Itu bukan jalan-jalan di taman. Untuk membantu orang lain yang mungkin tertarik melakukan hal yang sama (dan diri saya di masa depan), inilah latar belakang saya.

Konteks

Saya telah menulis beberapa artikel tentang saya alur kerja pengiriman konferensi. Untuk menyimpulkan:

• Semuanya didasarkan pada papan Trello.
• Saya membuat aplikasi yang mendaftarkan webhook di papan tulis.
• Saat saya memindahkan konferensi dari satu jalur ke jalur lain, itu memulai atau melanjutkan alur kerja sisi aplikasi.

Saya sumber papan dengan melihat situs web, terutama Panggilan kertas Dan Masukkan sesi, dan salin data konferensi ke kartu secara manual. Dua opsi otomatisasi tersedia:

1. Otomasi Penyediaan Konferensi
2. Otomatiskan pembuatan peta

Saya berpikir panjang dan keras tentang bagian pertama. Jika saya mengotomatiskannya, itu akan membuat daftar panjang kartu Trello, yang tetap harus saya filter. Saya menyimpulkan bahwa lebih baik memfilternya terlebih dahulu.

Namun, saya membuat kartu secara manual dengan menyalin dan menempel data yang relevan: nama, tanggal, tanggal jatuh tempo, tautan CFP, dan situs web. Inilah tepatnya ekstensi Firefox yang dapat membantu Anda.

Persyaratan dan desain

Kisah pengguna cukup sederhana:

AS A: Pengembang Malas
SAYA INGIN: Secara otomatis menambahkan data CFP ke Trello saat menelusuri halaman web di Papercall atau Sessionize
SO AS: Untuk menghabiskan waktu saya melakukan hal-hal yang lebih menyenangkan daripada menyalin dan menempel

– Riwayat pengguna unik saya

Satu-satunya persyaratan saya adalah harus bekerja dengan Firefox.

Ide pertama saya adalah tombol untuk memicu kreasi, tetapi saya tidak peduli di mana letaknya: di dalam hamparan halaman atau di suatu tempat di browser. Dalam kasus pertama, itu harus berupa JavaScript yang diinjeksi sisi klien; di sisi lain, ekstensi Firefox. Saya memilih opsi kedua karena saya perlu memikirkan cara melakukan yang pertama.

Saya juga ingin membangun ekstensi saya di Rust dengan WebAssembly terlebih dahulu. Spoiler: Saya tidak.

Ekstensi Firefox sederhana

Saya tidak tahu tentang menulis ekstensi Firefox, karena ini adalah pertama kalinya saya menulisnya. Langkah pertama saya adalah mengikuti Tutorial. Ini menjelaskan dasar-dasar struktur ekstensi. Kemudian saya mengikuti tutorial kedua. Ini menjelaskan cara membuat menu konteks untuk ekstensi tetapi tidak menjelaskan cara berinteraksi dengan halaman web. Pada titik ini, saya memutuskan untuk belajar sambil melakukan, sebuah teknik yang bekerja dengan baik untuk saya.

Ekstensi Firefox dimulai dengan a tampak. Ini yang dari tutorial pertama, disederhanakan:

{
  "manifest_version": 2,
  "name": "Borderify",
  "version": "1.0",
  "content_scripts": [
    {
      "js": ["borderify.js"]
    }
  ]
}

document.body.style.border="5px solid red";

Saya menemukan loop umpan balik pengembangan menjadi baik. Bayangkan Anda telah mengikuti tutorial dan membuat semua file yang diperlukan di atas. Anda dapat membuka dan mengklik tombol “Muat add-on sementara”.

Selanjutnya, arahkan ke file manifes Anda. Firefox memuat ekstensi: sekarang aktif.

Pada contoh di atas, JavaScript dalam tutorial menambahkan batas merah di sekitar setiap halaman web. Tidak ada gunanya, kami bisa melakukan yang lebih baik, tetapi ini menunjukkan cara kerjanya. Kita dapat mengubah script untuk mengubah warna, misalnya dari red Untuk green. Untuk membuat Firefox memuat ulang setiap perubahantermasuk perubahan pada manifes, klik tombol “Muat Ulang” di panel ekstensi sementara.

Berinteraksi dengan ekstensi

Seperti yang saya sebutkan di atas, saya ingin sebuah tombol untuk memicu pembuatan kartu Trello. Firefox memungkinkan beberapa opsi interaksi: pemicu langsung atau membuka jendela pop-up. Saya tidak perlu memasukkan parameter apa pun, jadi yang pertama sudah cukup untuk saya.

Firefox memungkinkan banyak tempat untuk menambahkan tombol: bilah alat peramban, bilah sisi, atau di bilah URL peramban. Saya menggunakan bilah alat tanpa alasan lain selain karena itulah yang ditunjukkan oleh tutorial kedua. Pada akhirnya, itu hanya berubah sedikit, dan beralih dari satu ke yang lain itu mudah.

Menambahkan tombol dilakukan dalam manifes:

"browser_action": {
  "default_area": "navbar",                            #1
  "default_icon": "icons/trello-tile.svg"              #2
}

1. Atur tombol pada bilah navigasi. Untuk detail tentang lokasi tombol, silakan merujuk ke Dokumentasi.
2. Konfigurasikan ikon. Anda dapat menggunakan bitmap dalam berbagai format, tetapi jauh lebih mudah untuk mendefinisikan SVG.

Pada titik ini, semuanya baik-baik saja dan keren. Kemudian saya membuang waktu berjam-jam untuk mencoba memahami berbagai jenis skrip dan bagaimana mereka berinteraksi. Saya akan membuat bagian khusus untuk itu.

Skrip, skrip di mana-mana

Bahasa default untuk skrip dalam ekstensi adalah JavaScript. Namun, tergantung pada lokasinya, mereka memainkan peran yang berbeda. Lebih buruk lagi, mereka perlu “berbicara” satu sama lain.

Mari kita mulai dengan content-script saya gunakan di atas manifest.json. Skrip konten ditautkan ke halaman web. Dengan demikian, mereka dapat mengakses DOM-nya. Mereka berjalan saat Firefox memuat halaman. Skrip menambahkan batas merah di sekitar halaman web body dalam tutorial.

Namun, kami memerlukan jenis skrip lain: skrip yang aktif saat kami mengklik tombol. Skrip ini harus dijalankan dengan ekstensi tetapi dapat mendengarkan acara. Mereka dikenal sebagai background skrip.

Skrip latar belakang adalah tempat meletakkan kode yang perlu mempertahankan status jangka panjang atau melakukan operasi jangka panjang, terlepas dari masa pakai halaman web atau jendela browser tertentu.

Skrip latar belakang dimuat segera setelah ekstensi dimuat dan tetap dimuat hingga ekstensi dinonaktifkan atau dicopot pemasangannya, kecuali persisten ditentukan sebagai false. Anda dapat menggunakan API WebExtension apa pun dalam skrip, selama Anda telah meminta izin yang diperlukan.

– skrip latar belakang

Mari kita buat skrip seperti itu. Ini dimulai dengan manifest – seperti biasa:

"background": {
  "scripts": [ "background.js" ]
}

Kami sekarang dapat membuat skrip itu sendiri:

function foo() {
    console.log('Hello from background')
}

browser.browserAction.onClicked.addListener(foo)    //1

1. Simpan itu foo berfungsi sebagai pendengar acara untuk tombol. Ketika tombol ekstensi diklik, itu memanggil foo fungsi.

Debugging ekstensi

Mari berhenti sejenak untuk berbicara tentang debugging. Saya kehilangan beberapa jam karena saya tidak tahu apa yang telah terjadi. Ketika saya mulai mengembangkan JavaScript 20 tahun yang lalu, kami “men-debug”. alert(). Itu bukan pengalaman pengembang terbaik yang bisa Anda harapkan. Praktik yang lebih modern termasuk Registrasi Dan debug. Spoiler: Saya tidak bisa menjalankan debugging, jadi saya akan fokus pada logging.

Pertama, skrip konten berfungsi dalam konteks halaman. Oleh karena itu, pernyataan logging berfungsi di konsol standar. Skrip latar belakang berfungsi dalam konteks lain. Untuk melihat pernyataan buku harian mereka, kita harus memiliki lain Konsol Pengembang Firefox. Anda dapat membukanya di panel ekstensi dengan mengklik tombol “Periksa”.

Komunikasi antar skrip

Sekarang kita tahu cara menghubungkan, kita bisa melangkah lebih jauh dan menjelaskan komunikasi antar skrip. Berikut adalah ikhtisar aliran keseluruhan:

Mari kita ubah kodenya sedikit sehingga background.js Kirim pesan :

function sendMessage(tab) {
    browser.tabs
           .sendMessage(tab.id, 'message in from background')
           .then(response => {
               console.log(response)
           })
           .catch(error => {
               console.error(`Error: ${error}`)
           })
}

browser.browserAction.onClicked.addListener(sendMessage)

Sekarang kita mengubah kode dari content.js:

browser.runtime.onMessage.addListener((message, sender) => {
    return Promise.resolve('message back from content')
});

Dapatkan konten

Sejauh ini, kami telah menerapkan aliran bolak-balik antara background dan content skrip. Daging mendapatkan konten halaman di content skrip dan kirimkan kembali ke background melalui pesan. Ingat bahwa hanya content skrip dapat mengakses halaman! Kode itu sendiri menggunakan Document API, misalnya., document.querySelector(), document.getElementsByClassName()dll. Detailnya tidak relevan.

Masalah selanjutnya adalah struktur Sessionize dan Papercall berbeda. Oleh karena itu, kami memerlukan kode awal yang berbeda untuk setiap situs. Kami dapat mengembangkan satu skrip yang memeriksa URL, tetapi ekstensi dapat melakukannya untuk kami. Mari kita edit manifes:

"content_scripts" : [{
  "matches": [ " ],            #1
  "js": [                                               #2
    "content/common.js",                                #4
    "content/sessionize.js"
  ]
},
{
  "matches": [ " ],          #1
  "js": [                                               #3
    "content/common.js",                                #4
    "content/papercall.js"
  ]
}]

1. Cocokkan situs yang berbeda
2. Script untuk sessionisasi
3. Skrip untuk Papercall
4. Kode dibagikan di kedua situs

Pada titik ini, kami berhasil mendapatkan data yang diperlukan dan mengirimkannya kembali ke background naskah. Langkah terakhir adalah memanggil Trello dengan datanya.

Manajemen kredensial otentikasi

Menggunakan REST Trello memerlukan kredensial autentikasi. Saya ingin membagikan kode di GitHub, jadi saya tidak dapat meng-hardcode kredensial: Saya memerlukan konfigurasi.

Anda dapat mengonfigurasi ekstensi Firefox melalui file khusus pilihan halaman. Untuk melakukan ini, tampak menawarkan layanan khusus options_ui bagian tempat kami dapat menyediakan jalur ke halaman HTML:

"options_ui": {
  "page": "settings/options.html"
}

Halaman tersebut dapat langsung mereferensikan skrip dan style sheet yang dibutuhkannya. Skrip harus:

1. Menyimpan kredensial di penyimpanan peramban untuk cadangan.
2. Muat kredensial dari penyimpanan peramban ketika halaman pengaturan terbuka.

Ini cukup sederhana dengan contoh yang disediakan.

Kode saya sangat mirip; itu hanya membutuhkan tiga bidang, bukan satu:

function saveOptions(e) {
    browser.storage.sync.set({                                               //1
        listId: document.querySelector('#list-id').value,
        key: document.querySelector('#key').value,
        token: document.querySelector('#token').value,
    })
}

function restoreOptions() {
    browser.storage.sync.get()                                               //1
           .then(data => {
               document.querySelector('#list-id').value = data.listId || ''
               document.querySelector('#key').value = data.key || ''
               document.querySelector('#token').value = data.token || ''
           }, error => {
               console.error(`Error: ${error}`)
           })
}

document.addEventListener('DOMContentLoaded', restoreOptions)                //2
document.querySelector('form').addEventListener('submit', saveOptions)       //3

1. Gunakan Firefox storage Lebah
2. Baca dari penyimpanan saat halaman dimuat
3. Simpan ke penyimpanan saat pengguna mengirimkan kode HTML form

Kita juga harus bertanya kepada storage otorisasi dalam manifes:

"permissions": [ "storage" ]

Kami sekarang dapat menyimpan kredensial Trello (bersama dengan ID daftar Trello yang diperlukan) di halaman pengaturan:

Kita bisa menggunakan yang sama storage API dalam memanggil kode Trello untuk membaca kredensial.

Pada titik ini, saya senang dengan pengaturan saya. Saya baru saja menambahkan perjalanan pulang pergi dari background Pada content untuk menampilkan a alert dengan nama dan URL papan Trello.

Kesimpulan

Itu adalah ekspansi pertama yang saya tulis, dan meskipun awalnya sulit, saya mencapai apa yang saya inginkan. Sekarang saya dapat menavigasi ke halaman Papercall dan halaman Sessionize, klik tombol perpanjang, dan dapatkan konferensi di papan Trello saya. Saya butuh beberapa hari dan itu menyenangkan; Itu sangat berharga. Saya terus mengerjakannya untuk memperbaikinya sedikit demi sedikit.

Kode sumber lengkap untuk artikel ini tersedia di GitHub.

Untuk selanjutnya