Cara Membuat Dan Menambahkan Tombol Di Toolbar Navigasi Firefox [Panduan]

Hari ini, kami membawa panduan Firefox yang dapat diikuti siapa saja untuk membuat tombol kustom di bilah alat navigasi. Seiring dengan tombol yang terlihat di bilah alat navigasi, ada daftar tombol lain yang berbeda fungsionalitas disediakan di Firefox yang dapat ditambahkan di mana saja pada bilah alat dan dapat disesuaikan menurut kebutuhanmu. Karena posisi dan perilaku tombol dapat diubah tanpa memerlukan pengetahuan tambahan, orang dapat melakukannya mudah membangun ekstensi baru yang berperilaku seperti yang diarahkan, duduk di posisi yang ditentukan, sambil sangat dapat disesuaikan. Posting ini mencakup cara membuat ekstensi sederhana - tombol bilah alat yang akan menyediakan fungsionalitas sederhana.

Untuk memulai, pertama-tama Anda harus mencari tahu ekstensi folder (folder yang berada di folder Profil Firefox). Pengguna Windows 7 dan Windows Vista akan menemukan folder ini di sini;

C: \ Users \ <> \ AppData \ Roaming \ Mozilla \ Firefox \ Profiles \ <> \ ekstensi

Namun, jika Anda menggunakan Windows XP, ketikkan %Data aplikasi% di Windows Run console dan tekan Enter.

Sekarang buka folder Firefox dan kemudian Profiles -> -> folder ekstensi

Setelah itu ekstensi folder dibuka, buat folder baru dengan nama [email protected]init.

Buka folder yang baru dibuat, dan buat direktori baru yaitu chrome, bersama dengan dua file - chrome.manifestasi dan install.rdf. Sekarang kita akan mengedit file-file ini dalam editor teks, kami rasa Anda menggunakan editor apa pun dengan dukungan UTF-8, seperti - Notepad bawaan Windows.

Pertama, buka chrome.manifestasi file dan masukkan baris kode init berikut. Kode yang disediakan di bawah ini juga berfungsi untuk surat Thunderbird, menulis, dan buku alamat, dan untuk Sunbird. Namun, jika Anda hanya perlu menggunakan tombol di Firefox, baris kode untuk Thunderbird dan Sunbird dapat dikecualikan.

content custombutton chrome / style chrome: //global/content/customizeToolbar.xul chrome: //custombutton/content/button.css # Hamparan Firefox chrome: //browser/content/browser.xul chrome: //custombutton/content/button.xul # hamparan email Thunderbird chrome: //messenger/content/messenger.xul chrome: //custombutton/content/button.xul # Thunderbird menyusun overlay chrome: //messenger/content/messengercompose/messengercompose.xul chrome: //custombutton/content/button.xul # overlay buku alamat Thunderbird chrome: //messenger/content/addressbook/addressbook.xul chrome: //custombutton/content/button.xul # Sunbird overlay chrome: //calendar/content/calendar.xul chrome: //custombutton/content/button.xul

Setelah kode dimasukkan ke dalam file, tutuplah setelah menyimpan perubahan. Sekarang edit install.rdf file, Anda harus memasukkan baris kode berikut di dalamnya. Anda dapat mengubah tombol deskripsi umum, teks dapat ditambahkan dalam 6, 7, dan 8 baris kode (harus dilampirkan dalam tanda kutip ganda), Anda dapat memasukkan nama tombol, teks deskriptif, dan pembuat nama.

1.0 Firefox  Thunderbird  Sunbird 

Setelah Anda mengubah deskripsi, simpan perubahan dan tutup file. Ingat folder yang baru dibuat (chrome), di mana kita akan membuat 3 file dan menyisipkan 2 gambar. Pertama buat 3 file dengan nama berikut;

• button.css
• button.xul
• button.js

Sekarang kita akan menerapkan gaya ke tombol, tidak ada yang rumit di sini, kita hanya akan menerapkan beberapa gaya dasar di atas desain tombol (menentukan dimensi gambar dan mengarahkan efek pada tombol). Jika Anda terbiasa merancang file CSS (Cascading Style Sheet), mengubah nilai & efek akan menjadi menang, namun, jika Anda mendengar namanya untuk pertama kalinya, cukup masukkan garis gaya berikut kode dalam button.css file, setelah selesai, simpan perubahan dan tutup.

# custom-button-1, # wrapper-custom-button-1 {list-style-image: url ("chrome: //custombutton/content/button-1.jpg");} / * gaya umum untuk semua kustom tombol * / .custombutton {-moz-image-region: rect (0px 24px 24px 0px);} .custombutton: hover {-moz-image-region: rect (24px 24px 48px 0px);} [iconsize = "small"] .custombutton {-moz-image-region: rect (0px 40px 16px 24px);} [iconsize = "small"] .custombutton: arahkan kursor {-moz-image-region: rect (24px 40px 40px 24px);}

Sekarang buka button.xul file dalam editor teks dan masukkan baris kode berikut. Ingatlah bahwa kami juga menyediakan kode untuk Thunderbird & Sunbird, jika Anda hanya mengikuti panduan ini untuk Firefox, Anda dapat mengecualikan baris yang terkait dengan Thunderbird & Sunbird.

1.0UTF-8teks / csschrome: //custombutton/content/button.css Firefox Surat thunderbird Thunderbird menulis Buku alamat Thunderbird Sunbird detail tombol 

Sekarang Anda perlu memasukkan dua file gambar yang memiliki nama tombol-1.jpg dan Icon.jpg dengan dimensi masing-masing 40 × 48 dan 48 × 48 untuk mendapatkan hasil terbaik. Namun, Anda dapat membuat gambar dengan ukuran berapa pun yang tidak melebihi lebar dan panjang 48px. Di bawah ini Anda dapat melihat gambar tombol yang kami gunakan - tombol-1.jpg gambar untuk tombol bilah alat dengan ukuran masing-masing (besar & kecil) dan efek hover dapat dilihat di bawah kedua ukuran gambar default. Icon.jpg gambar mengacu pada gambar ikon ekstensi utama (yang akan Anda lihat di galeri ekstensi Firefox)

tombol-1.jpg

Icon.jpg

Setelah dibuat, pindah ke file ke-5 - button.js. File JavaScript ini sangat penting, karena akan menentukan fungsi utama tombol. Anda dapat menambahkan skrip sampel yang meminta pesan untuk menguji fungsionalitas atau menggunakan skrip lanjutan untuk melakukan apa pun yang Anda inginkan. Juga ada banyak skrip yang dibuat khusus untuk memenuhi persyaratan, Anda juga dapat melihat beberapa skrip sederhana namun bermanfaat sini. Karena panduan ini untuk pengguna tingkat dasar, kami akan membuat item bookmark sederhana yang akan membuka situs web yang ditentukan. Buka button.js file dan masukkan baris kode berikut untuk membuat tombol bookmark (untuk ditampilkan di toolbar Firefox).

CustomButton = {1: function () {const url = " https://www.addictivetips.com/" dokumen .getElementById ("konten") .webNavigation .loadURI (url, 0, null, null, null)},}

Sekarang Anda baik untuk pergi, kami rasa Anda akan memeriksa kode yang Anda masukkan dalam file yang disebutkan dan memverifikasi dimensi gambar lagi. Untuk menginstal ekstensi yang baru dibuat, tutup semua instance Firefox yang sedang berjalan dan kemudian jalankan. Jika semuanya berjalan dengan baik, Anda mungkin akan melihat permintaan instalasi tambahan baru, yang menunjukkan bahwa ekstensi telah berhasil diinstal.

Untuk membuat tombol yang baru dibuat muncul di bilah alat navigasi, dari menu Lihat, di bawah sub-menu Bilah Alat, klik Kustomisasi.

Dialog Kustomisasi Bilah Alat akan muncul, dari mana Anda harus menyeret tombol yang baru dibuat di atas bilah alat navigasi. Setelah dimasukkan, Anda juga dapat mengubah posisinya dengan menyeretnya ke mana pun Anda suka.

Sekarang cukup klik tombol untuk memverifikasi fungsi yang dimasukkan dalam file JavaScript.

Fungsionalitas tombol yang dihasilkan ditentukan oleh pengguna, jadi tergantung keahlian Anda, seberapa banyak Anda dapat mengkalibrasi fungsinya. Pengguna pemula dapat membuat pintasan, menautkan aplikasi, mendesain bookmark sementara pengguna berada di antara keduanya tingkat rata-rata & pakar tentu saja dapat memanfaatkannya dan menambahkan fungsionalitas yang diperlukan dalam JavaScript utama mengajukan.