10 perkara yang mereka tidak pernah memberitahu anda di Firefox Extension School

Ini adalah artikel susulan kepada ebook baru-baru ini, membina lanjutan Firefox anda sendiri-pilihan tambahan tip, helah, dan hacks yang saya kumpulkan dari pengalaman saya dengan sambungan bangunan untuk Firefox, termasuk CodeBurner, SitePoint Reference Extension. Pengetahuan asas bagaimana untuk membina lanjutan Firefox diandaikan, jadi anda mungkin ingin merebut salinan ebook anda terlebih dahulu, jika anda belum melakukannya.

Kebanyakan apa yang ada di sini tidak didokumenkan secara jelas di Pusat Pemaju Mozilla (MDC), sama ada kerana ia masih dalam senarai "untuk melakukan" mereka, atau kerana saya membuatnya sendiri. Sebahagian daripadanya didokumentasikan dengan baik, tetapi sangat berguna bahawa saya fikir ia patut mengarahkan perhatian anda kepadanya. Saya akan mencipta mereka sebagai fungsi peringkat atas (menggunakan kata kunci fungsi). Dalam praktiknya, anda harus membuatnya sebagai kaedah objek lanjutan utama anda.

Takeaways Key

Gunakan `senarai gaya-` untuk menambah ikon kepada unsur-unsur XUL seperti `,` `, dan`

`kerana ramai yang tidak menyokong` latar belakang-imej`.

Buat `

` Elements di Firefox untuk MAC OS X Keyboard-boleh diakses dengan menambahkan `TabIndex =" 0 "` untuk membolehkan navigasi menggunakan kekunci anak panah.

• mengakses sasaran tetikus asal acara menu konteks di Firefox menggunakan harta `PopupNode`, yang memudahkan interaksi dalam menu konteks tersuai. Mencegah warisan yang tidak diingini atribut `flex` dalam susun atur XUL dengan menggunakan elemen pembalut perantaraan tanpa atribut` flex`, memastikan kawalan yang lebih tepat ke atas saiz elemen kanak -kanak. Melaksanakan helaian gaya khusus platform dalam sambungan Firefox untuk menampung konvensyen UI yang berbeza di seluruh Windows, Linux, dan Mac OS X, meningkatkan pengalaman pengguna dengan mematuhi piawaian antara muka asli.
• 1. Tambah ikon dengan imej gaya senarai
banyak elemen XUL tanpa sokongan untuk harta latar belakang CSS, tetapi banyak daripada mereka
• DO
sokongan gaya senarai sokongan. Ini termasuk , , dan . Anda boleh menggunakannya untuk menambah ikon aplikasi anda ke item menu utamanya, atau melekatkan ikon kaca pembesar kecil ke kotak teks yang digunakan untuk mencari:
• 2. Buat elemen keyboard-boleh diakses dalam mac os x

Setelah itu, anda boleh menggunakan kekunci anak panah untuk menukar antara tab, sama seperti di Windows dan Linux.

3. Rujuk sasaran tetikus asal acara menu konteks

Apabila anda mengklik item dalam menu konteks XUL, rujukan sasaran acara adalah yang anda klik. Tetapi bagaimana jika anda mahu merujuk kepada elemen sasaran asal ; Iaitu, elemen yang anda klik kanan untuk menelefon menu di tempat pertama?
Ini sangat mudah, kerana Firefox menyediakan harta yang mengandungi rujukan ini. Ia dipanggil PopUpnode dan merupakan harta dokumen. Cara paling mudah untuk menggunakannya ialah meluluskannya melalui acara perintah item menu:

textbox[type="search"] <br>{ <br>  list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}

4. Mencegah elemen daripada mewarisi Flex

Jika anda menambah atribut Flex ke kebanyakan elemen XUL, mereka akan berkembang untuk mengisi ruang yang ada. Tetapi Flex diwarisi, jadi anak -anaknya akan

juga berkembang, yang dalam beberapa kes sangat tidak diingini. Sebagai contoh, jika elemen kanak -kanak adalah anda mahu ia mempunyai dimensi yang tepat; Tetapi tidak ada cara untuk secara jelas menafikan flex yang diwarisi. Menanam dialog dari Acara Beban Chrome

Jika anda menggunakan Window.Opendialog untuk menanam dialog dengan ciri-ciri modal dan Centerscreen dari acara Chrome Load, dialog akan kebanyakannya tidak dapat dilihat di Mac OS X, tersembunyi di sudut kiri atas skrin. Ini kerana dialog diposisikan sebelum saiz tetingkap ditubuhkan, jadi harta Centerscreen gagal berfungsi seperti yang diharapkan. Masalah yang sama berlaku dengan fungsi amaran, yang boleh menjadi masalah jika anda menggunakannya sebagai alat debugging yang cepat dan kotor. Ini memastikan bahawa tetingkap utama bersaiz sebelum kebakaran dialog, jadi ia akan diposisikan dengan betul:

6. Tambah ikon dialog tersuai untuk Windows dan Linux

<tab> elements are natively inaccessible to the keyboard in Firefox for Mac OS X. To make them accessible you need to manually insert them into the tab order, by adding a tabindex attribute with the value 0. This value is effectively "auto", and places the element at its source-order position in the overall tab order:

untuk menambah ikon tersuai ke dialog, mula -mula buat folder bernama ikon di dalam direktori krom lanjutan anda. Kemudian, di dalam folder Ikon, buat folder lain yang dipanggil lalai. Di dalam folder lalai, simpan ikon dengan nama yang sama seperti id . Dokumentasi MDC mengatakan menggunakan imej XPM untuk Linux, tetapi mereka tidak mempunyai sokongan untuk ketelusan saluran alfa. Fail PNG memberikan sokongan, dan mereka juga berfungsi.

Ikon dialog tersuai di Windows XP

ini berbeza dengan Mac OS X, kerana dialognya dipaparkan tanpa ikon.

7. Dapatkan rujukan kepada tetingkap yang paling baru dibuka

anda boleh menggunakan antara muka pengantara Window Firefox untuk mendapatkan rujukan kepada tetingkap pelayar yang paling baru dibuka. Ini mungkin berguna jika anda ingin membuka pautan web dari dialog luaran, dan lebih dipercayai daripada Window.Opener. Dapatkan URL setiap tab terbuka

mengikuti dari hujung sebelumnya, kita boleh meleleh melalui semua tingkap pelayar yang kini terbuka, mengeluarkan URL mereka, dan membungkusnya ke dalam pelbagai hierarki (dikelompokkan terlebih dahulu oleh tetingkap, kemudian dengan tab). Setiap ahli matriks terakhir adalah array sendiri, yang mengandungi URL tab dan bendera Boolean (dipilih) untuk menunjukkan sama ada tab yang dipilih sekarang dalam tetingkap itu:

textbox[type="search"] <br>{ <br>  list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}

9. Buat antara muka anda bertindak balas terhadap perubahan fokus tetingkap

Kebanyakan tingkap MAC mengubah penampilan mereka apabila tingkap kehilangan fokus: latar belakang yang lebih ringan, hiasan tingkap, atau butang kelabu, contohnya. Untuk melaksanakan kesan ini pada kawalan antara muka anda sendiri, anda perlu tahu apabila tingkap mendapat keuntungan dan kehilangan fokus. Contohnya, jika fokus aplikasi bergerak ke dokumen dalam yang tertanam, acara Window Blur utama akan terbakar, walaupun tetingkap masih menjadi fokus. Ini kerana elemen itu sendiri tidak lagi mempunyai fokus aplikasi. Walaupun tingkah laku ini logik, ia juga mungkin tidak dijangka. Berita baiknya ialah tetingkap antara muka utama Firefox mempunyai atribut aktif yang berubah dari benar kepada "" (rentetan kosong) apabila tingkap benar -benar kehilangan tumpuan. Anda boleh menonton atribut ini dengan pendengar acara mutasi DOM, dan gunakannya sebagai pencetus untuk apa sahaja yang perlu anda lakukan:

berhati -hati bagaimana anda menggunakannya. Sebagai contoh, jika anda menggunakannya untuk mencetuskan dialog modal seperti amaran, tindakan pemijahan dialog akan menyebabkan tingkap kehilangan fokus; Menolaknya akan mendapatkan semula fokus, yang akan mencetuskan semula dialog! Contohnya, untuk menukar ikon antara keadaan normal dan kurang upaya:

textbox[type="search"] <br>{ <br>  list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}

10. Melaksanakan lembaran gaya spesifik platform

Firefox boleh didapati di pelbagai platform, dan masing-masing mempunyai konvensyen sendiri berkenaan dengan penampilan dan juga penempatan komponen antara muka. Contoh yang baik ini adalah butang OK dan Batal dalam dialog Alert: Pada Windows dan Linux butang OK berada di sebelah kiri butang Batal, sementara pada Mac OS ia adalah cara lain. Kemunculan butang tetingkap yang dekat dan meminimumkan adalah satu lagi contoh, kerana ia berbeza untuk setiap platform. Ini membolehkan anda melaksanakan variasi seperti ikon alternatif untuk butang, fon yang berbeza untuk kawalan antara muka tersuai, dan sebagainya. Folder platform peringkat atas dalam rajah berikut harus masuk ke dalam folder root lanjutan anda-pada tahap yang sama dengan folder Chrome. Semua nama folder dan nama fail mestilah tepat seperti yang ditunjukkan di sini (mereka juga sensitif kes), kecuali nama lembaran gaya itu sendiri; Ini boleh menjadi apa sahaja yang anda suka, tetapi sudah tentu ia mestilah sama untuk setiap salinan platform. Setiap fail chrome.Manifest harus mengandungi bar yang sama-sama tab yang sama (menggantikan "myextension" dengan nama pelanjutan anda):

Untuk menambah helaian gaya ke antara muka anda, tambahkan arahan pemprosesan XML-Stylesheet dengan corak URL berikut:

Lihat bagaimana semua yang anda perlu lakukan adalah merujuk kepada direktori kulit, dan Firefox akan berfungsi dengan gaya spesifik yang dimasukkan, mengikut platform yang dijalankan. Anda boleh memperluaskan prinsip dengan banyak helaian gaya yang berbeza seperti yang anda mahu: hanya buat versi dalam setiap folder platform, dan kemudian tambahkannya ke dokumen XUL menggunakan corak URL yang sama.

11. Tambah URL ke sejarah penyemak imbas Berikut adalah tip bonus tambahan. Rujukan XUL di MDC memberitahu anda bagaimana untuk membuat kotak teks dengan sejarah auto-lengkap. Malangnya, ia gagal memberitahu anda bagaimana untuk menambah URL baru ke sejarah, jadi saya terpaksa bekerja dengan cara yang sukar, dengan mengangkut kod sumber Firefox. Kaedah yang saya akan tunjukkan kepada anda di sini menambah URL, mengambil dan menjimatkan favicons, dan termasuk sejarah asas auto-lengkap ke dalam tawar-menawar!

kotak teks dengan menu auto-lengkap sejarah, menunjukkan entri yang kami tambahkan secara programatik

nota atribut yang diperlukan. Dalam contoh kod berikut, nama fungsi addurltohistory boleh menjadi apa sahaja yang anda inginkan, dan atribut Flex adalah pilihan, tetapi segala-galanya mestilah tepat seperti yang ditunjukkan:

Atribut yang lengkapSelectedIndex adalah supaya apabila anda memilih item dari menu auto-lengkap, nilainya secara automatik ditulis ke dalam kotak teks; Ini membolehkan anda menekan kekunci ENTER langsung untuk membakar fungsi arahan. Atribut baru adalah semata -mata supaya kita dapat mengelakkan secara manual menghuraikan nilai ruang kosong yang tidak diingini (seperti ruang utama atau trailing). Itu kerana elemen tidak mempunyai acara oncommand. Peristiwa yang biasanya digunakan untuknya adalah onInput (dipecat apabila teks yang boleh dipaparkan dimasukkan) dan onchange (dipecat apabila nilai berubah). Kerana nilai akan sering berubah sebagai tindak balas kepada cadangan auto-lengkap, yang kebanyakannya akan menjadi nilai yang tidak diingini, kami menangguhkan tindakan arahan sehingga kekunci Enter ditekan. Anda boleh menaip atau menampal teks ke dalam kotak teks dan menu lungsur akan muncul dengan sejarah anda, ditapis mengikut apa yang telah dimasukkan. Anda kemudian boleh memilih dari menu itu, dan pilihan anda akan ditulis ke dalam kotak teks.

Anda juga boleh menambah butang anak panah untuk membuat menu drop-down muncul dengan menambah enableHistory = "true". Dalam praktiknya, anda akan melaksanakan tugas lain selepas ini, (seperti memuatkan URL yang ditentukan ke dalam ) tetapi saya hanya akan memberi tumpuan kepada cara menambahkannya ke sejarah. Saya akan menunjukkan kepada anda kod terlebih dahulu, dan kemudian pergi melalui sedikit demi sedikit:

textbox[type="search"] <br>{ <br>  list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}

pertama dan paling utama kita melakukan sedikit pengesahan, menambah protokol jika URL tanpa satu (supaya pengguna hanya boleh menaip "www."), Kemudian menulis URL [Modified] kembali ke kotak teks. Kemudian, jika ia mengandungi mana -mana ruang atau titik berganda selain daripada parameter CGI, kami membuang amaran ke atas sintaks yang cacat dan keluar dari fungsi. Ini semua pengesahan yang kita perlukan untuk menghentikan Firefox daripada tercekik. Anda mungkin lebih suka mengendalikan ralat dengan lebih anggun, contohnya dengan membuang ralat ke konsol atau melaksanakan kaedah tersuai untuk memberi amaran kepada pengguna bahawa ralat telah berlaku.

Seterusnya, kami menjalankan perniagaan yang sebenarnya menambah URL ke sejarah. Perkhidmatan sejarah tidak akan menerima rentetan Uri biasa, jadi kita perlu membuat apa yang dipanggil iuri. Ini adalah objek URI yang mengandungi pelbagai metadata, termasuk tuan rumahnya, yang akan berguna kemudian. Kami membuat objek IURI menggunakan perkhidmatan IO, dan kemudian lulus ke perkhidmatan sejarah global, untuk menambahkannya ke sejarah penyemak imbas. Pertama, supaya kesilapan tidak dilemparkan jika, atas sebab apa pun, Favicon gagal berada di URL yang diharapkan, dan kedua, kerana ia hanya berfungsi di Firefox 3.5 atau lebih baru. Oleh itu, kita mula -mula memulakan perkhidmatan Favicon, dan kemudian membuat objek iuri untuk alamat Favicon (menggunakan nama hos dari IURI asal). Kami kemudian lulus objek Favicon Iuri ke perkhidmatan Favicon, untuk memuat dan menyelamatkan Favicon.

Dan di sana kita ada! Kali seterusnya kami menaip alamat yang sama ke dalam kotak teks, ia akan muncul dalam menu auto-lengkap, bersama-sama dengan faviconnya. Sekiranya anda ingin memaparkannya di kotak teks dengan segera, anda perlu menjalankan gelung setInterval untuk terus memeriksa sama ada ia wujud. Anda boleh melakukannya dengan kod seperti ini:

Kod ini sedikit rumit: setiap 500 milisaat (parameter kedua untuk setInterval), kami meminta perkhidmatan Favicon untuk favicon halaman. Ia akan mengembalikan URI yang diformat sama ada dengan Moz-Anno: Favicon: Protokol (jika Favicon telah dimuat turun) atau dengan Chrome: Protocol (jika ia mengembalikan imej lalai). Jika kami telah mencuba 20 kali (sejumlah 10 saat), atau jika kami berjaya memuat turun favicon untuk halaman-seperti yang ditunjukkan oleh Moz-Anno: Favicon: Dalam URI-maka kami menetapkannya sebagai URL gaya gaya untuk kotak teks. Sekiranya anda belum melakukannya, muat turun ebook saya Bina lanjutan Firefox anda sendiri yang datang percuma dengan sambungan Codeburner.

Simpan mata berjaga -jaga untuk artikel lain semua tentang membina sambungan Firefox, serta beberapa penambahan baru kepada keluarga Codeburner, akan datang tidak lama lagi!

textbox[type="search"] <br>{ <br>  list-style-image:url(chrome://myextension/content/images/magglass.png); <br>}

Soalan Lazim (Soalan Lazim) Mengenai Sambungan Firefox

Bagaimana saya boleh memasang sambungan Firefox?

Memasang Sambungan Firefox adalah proses yang mudah. Pertama, buka penyemak imbas Firefox anda dan klik pada butang menu, yang diwakili oleh tiga baris mendatar di sudut kanan atas. Dari menu lungsur, pilih 'Add-ons'. Ini akan membuka tab Pengurus Add-ons. Dalam bar carian, taipkan nama pelanjutan yang anda mahu pasang dan tekan Enter. Klik pada butang 'Tambah ke Firefox' di sebelah pelanjutan yang anda mahu pasang. Pop timbul akan kelihatan meminta kebenaran anda untuk menambah pelanjutan. Klik 'Tambah' dan pelanjutan akan dipasang.

Kenapa sambungan Firefox saya tidak berfungsi? Ia mungkin disebabkan oleh versi Firefox yang sudah lapuk, bertentangan dengan sambungan lain, atau isu dengan lanjutan itu sendiri. Cuba mengemas kini Firefox ke versi terkini, melumpuhkan sambungan lain untuk memeriksa konflik, atau memasang semula sambungan yang bermasalah. Jika isu ini berterusan, hubungi pemaju lanjutan untuk sokongan. Ini akan membuka tab Pengurus Add-ons. Di sini, anda boleh mengaktifkan atau melumpuhkan sambungan, mengeluarkan sambungan, atau mengakses pilihan untuk setiap pelanjutan. Setiap pelanjutan menggunakan beberapa sumber sistem, dan terlalu banyak boleh melambatkan penyemak imbas anda. Jika anda melihat penyemak imbas anda berjalan perlahan -lahan, cuba melumpuhkan beberapa sambungan untuk melihat apakah ia bertambah baik. Walau bagaimanapun, seperti mana -mana perisian, mereka berpotensi dieksploitasi oleh pelakon berniat jahat. Untuk memastikan keselamatan anda, hanya memasang sambungan dari sumber yang dipercayai, pastikan sambungan anda dikemas kini, dan kerap mengkaji keizinan sambungan anda. Walau bagaimanapun, anda juga boleh menyemak kemas kini secara manual dengan membuka menu Firefox, memilih 'add-ons', dan kemudian mengklik pada ikon gear dan memilih 'semak untuk kemas kini'. Untuk memeriksa sama ada pelanjutan tersedia untuk mudah alih, lawati halaman lanjutan di laman web Add-on Firefox dan cari label 'tersedia untuk Android'. Mozilla menyediakan panduan yang komprehensif mengenai cara membangunkan sambungan Firefox di laman web pemaju mereka.

Apakah sambungan Firefox yang terbaik untuk digunakan? Sesetengah sambungan popular termasuk asal -usul Ublock untuk menyekat iklan, lastpass untuk pengurusan kata laluan, dan pembaca gelap untuk mod gelap.

Bolehkah saya menggunakan sambungan krom pada Firefox? Walau bagaimanapun, tidak semua sambungan Chrome akan berfungsi di Firefox kerana perbezaan bagaimana kedua -dua pelayar mengendalikan sambungan.

Atas ialah kandungan terperinci 10 perkara yang mereka tidak pernah memberitahu anda di Firefox Extension School. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!