Pengetahuan Dasar
1. Struktur file plug-in
1.1. manifest.json
Setiap ekstensi, Webapp yang dapat diinstal, dan kulit memiliki file manifes format JSON yang menyimpan informasi terkait plug-in yang penting.
Contoh konfigurasi dasar:
{"Name": "Demo Tindakan Browser", "Versi": "1.0", "Izin": ["Tab", "http: //*/*", "https: //*/*"], "browser_action": {"default_title": "switch light", "icon_icon. "popup.html"}, "latar": {"halaman": "latar belakang.html"}, "manifest_version": 2}1.2. popup
Jendela pop-up plug-in, default_popup di browser_action dalam konfigurasi di atas adalah halaman ini.
1.3. Halaman latar belakang
Sebagian besar aplikasi menyertakan halaman latar belakang untuk melakukan fungsi utama aplikasi.
1.4. Skrip konten
Skrip konten dapat mengaktifkan interaksi antara aplikasi dan halaman web, yang mengacu pada skrip JavaScript yang dapat berjalan di dalam halaman yang telah dimuat oleh browser. Anda dapat menganggap skrip konten sebagai bagian dari halaman web, bukan bagian dari aplikasi di dalamnya.
2. Interaksi antar file
Fungsi di halaman latar belakang dapat dipanggil langsung di jendela popup.
Skrip konten dapat membaca dan memodifikasi pohon DOM dari halaman web saat ini, tetapi tidak dapat memodifikasi pohon DOM dari halaman latar belakang (latar belakang) aplikasi yang terletak.
Interaksi antara skrip konten dan aplikasi: Anda dapat mengirim pesan satu sama lain
3. Suntikkan file JS (skrip konten) ke halaman web:
Metode 1: Konfigurasikan dalam file manifest.json:
"content_scripts": [{"cocok": ["http://www.google.com/*"], "css": ["mystyles.css"], "js": ["jQuery.js", "myscript.js"]}],Metode 2, via ExecutScript ():
Menyuntikkan skrip JavaScript ke halaman untuk dieksekusi.
chrome.tabs.executscript (integer tabid, detail objek, callback fungsi) chrome.tabs.executscript (tabid, {file: "func.js", allframes: true});Penampilan UI
1. Tindakan browser:
Tambahkan ikon di sebelah kanan bilah alamat dari toolbar Chrome utama.
Catatan: Aplikasi paket tidak dapat menggunakan tindakan browser
1.1. Konfigurasi di manifest.json
Daftar Tindakan Browser:
{"Name": "My Extension", ... "Browser_Action": {"Default_icon": "Images/Icon19.png", // Opsional "Default_title": "Google Mail", // Opsional; ditampilkan di tooltip "default_popup": "popup.html" // opsional}, ...}1.2. Deskripsi Item Konfigurasi
(1) default_icon
Ikon 19 * 19px
Ubah bidang default_icon di manifes Browser_Action, atau panggil metode seticon ().
chrome.browseraction.seticon (detail objek)
Atur ikon aksi browser. Ikon dapat menjadi jalur ke informasi gambar atau piksel yang diekstraksi dari elemen kanvas. Apakah itu jalur ikon atau imagedata kanvas, properti ini harus ditentukan.
(2) default_title
Ubah bidang default_title di manifes browser_action, atau panggil metode settitle (). Anda dapat menentukan string yang terlokalisasi untuk bidang default_title; Klik Internasionalisasi untuk melihat detail.
chrome.browseraction.settitle (detail objek)
Atur judul aksi browser, ini akan ditampilkan di tooltip.
(3) Lencana
Tindakan browser dapat secara opsional menampilkan lencana - menampilkan beberapa teks pada ikon. Lencana dapat dengan mudah memperbarui beberapa informasi prompt status ekstensi kecil untuk tindakan browser.
Karena ruang lencana terbatas, itu hanya mendukung kurang dari 4 karakter.
Untuk mengatur teks dan warna lencana, Anda dapat menggunakan setBadgetext () dan setBadgebackgroundColor ().
chrome.browseraction.setBadgetext (detail objek)
Atur teks lencana tindakan browser, dan lencana ditampilkan pada ikon.
setBadgebackgroundColorchrome.browseraction.setBadgebackgroundColor (detail objek)
Atur warna latar belakang lencana.
(4) default_popup
Tips Bubble Popup
Ubah bidang default_popup di manifes Browser_Action untuk menentukan file HTML, atau hubungi metode setPopup ().
chrome.browseraction.setpopup (detail objek)
Mengatur HTML yang ditampilkan di Popup saat mengklik Tindakan Browser.
1.3. Tips
Untuk tampilan terbaik, ikuti prinsip -prinsip berikut:
Konfirmasikan bahwa tindakan browser hanya digunakan dalam skenario di mana sebagian besar situs web memiliki persyaratan fungsional.
Konfirmasikan bahwa tindakan browser tidak digunakan di beberapa halaman web yang memiliki fungsi. Silakan gunakan tindakan halaman untuk skenario ini.
Pastikan ukuran ikon Anda harus menempati ruang piksel 19x19. Ikon aksi browser harus terlihat lebih besar dan lebih berat dari ikon tindakan halaman.
Jangan mencoba meniru ikon kunci pas Google Chrome, kinerjanya mungkin bermasalah di bawah tema yang berbeda, dan ekstensi harus lebih menarik.
Cobalah untuk menggunakan saluran alpha dan meratakan tepi ikon Anda, karena banyak pengguna menggunakan tema, ikon Anda harus berkinerja baik di berbagai latar belakang.
Jangan terus memamerkan ikon Anda, ini sangat ofensif.
2. Menu klik kanan
Anda dapat memilih untuk menambahkan item menu klik kanan untuk berbagai jenis objek (seperti gambar, tautan, halaman).
Anda dapat menambahkan beberapa item menu klik kanan sesuai kebutuhan. Beberapa item menu klik kanan yang ditambahkan dalam ekstensi akan secara otomatis dikombinasikan oleh Chrome dan ditempatkan di menu sekunder dari nama ekstensi yang sesuai.
Menu klik kanan dapat muncul dalam dokumen apa pun (atau bingkai dalam dokumen) atau bahkan dalam file lokal (seperti file: // atau chrome: //). Jika Anda ingin mengontrol tampilan menu klik kanan dalam dokumen yang berbeda, Anda dapat menentukan DocumentUrlPatterns saat memanggil create () dan update ().
2.1. Konfigurasi di manifest.json
Menyatakan izin "Contentmenus" dalam manifes. Pada saat yang sama, Anda harus menentukan ikon 16x16 untuk digunakan sebagai logo menu klik kanan. Misalnya:
{"Name": "My Extension", ... "Izin": ["ContextMenus"], "Icons": {"16": "Icon-Bitty.png", "48": "Icon-Small.png", "128": "Icon-Large.png"}, ...} "3. Pemberitahuan Desktop
Beri tahu pengguna bahwa sesuatu yang penting telah terjadi. Pemberitahuan desktop akan ditampilkan di luar jendela browser. Gambar di bawah ini menunjukkan efek pemberitahuan. Pada platform yang berbeda, efek tampilan pemberitahuan akan sedikit berbeda.
Langsung gunakan sepotong kecil kode JavaScript untuk membuat pemberitahuan, dan tentu saja, itu juga dapat dilakukan melalui halaman HTML terpisah dalam paket ekstensi.
3.1. Konfigurasi di manifest.json
{"Nama": "Ekstensi Saya", ... "Izin": ["Pemberitahuan"], ...}3.2. Berinteraksi dengan halaman yang diperluas:
Gunakan getBackgroundPage () dan getViews () untuk membuat interaksi di halaman pemberitahuan dan ekstensi
// Panggil metode halaman yang diperluas dalam pemberitahuan ... chrome.extension.getBackgroundPage (). Dothing (); // Panggil metode pemberitahuan dari halaman ekstensi ... chrome.extension.getViews ({type: "notification"}). Foreach (function (win) {win.doothinghthing ();});4. Omnibox
Antarmuka aplikasi Omnibox memungkinkan Anda untuk mendaftarkan kata kunci dengan bilah alamat Google Chrome, yang juga disebut Omnibox.
Bidang kata kunci Omnibox harus dimasukkan dalam manifes. Ikon dengan piksel 16x16 harus ditentukan sehingga akan ditampilkan di bilah alamat ketika pengguna memasukkan kata kunci.
4.1. Konfigurasi di manifest.json
{"Name": "Ekstensi Omnibox Aaron", "Versi": "1.0", "Omnibox": {"Kata Kunci": "Aaron"}, "Ikon": {"16": "16-full-color.png"}, "latar belakang_page": "latar belakang.html"}}Chrome secara otomatis membuat ikon dengan 16x16 piksel dalam mode skala abu -abu. Anda harus memberikan versi ikon penuh warna sehingga dapat digunakan dalam skenario lain.
5. Halaman Opsi
Agar pengguna dapat mengatur ekstensi Anda, Anda mungkin perlu menyediakan halaman opsi. Jika Anda memberikan halaman opsi, tautan akan disediakan pada halaman manajemen ekstensi chrome: // ekstensi. Klik tautan opsi untuk membuka halaman opsi Anda.
5.1. Konfigurasi di manifest.json
{"Name": "My Extension", ... "Options_Page": "options.html", ...}6. Menimpa halaman tertentu
Menggunakan halaman alternatif, Anda dapat mengganti beberapa halaman spesifik di Chrome secara default dan menggunakan halaman yang disediakan oleh ekstensi.
6.1. Konfigurasi di manifest.json
{"Name": "My Extension", ... "Chrome_Url_Overrides": {"pagetooverride": "mypage.html"}, ...}7. Tindakan halaman
Gunakan tindakan halaman untuk menempatkan ikon di bilah alamat.
Jika Anda ingin ikon ekstensi selalu terlihat, gunakan aksi browser.
Aplikasi paket tidak dapat menggunakan tindakan halaman.
7.1. Konfigurasi di manifest.json
{"Name": "My Extension", ... "Page_Action": {"Default_icon": "Icons/foo.png", // opsional "default_title": "do action", // opsional; ditampilkan di tooltip "default_popup": "popup.html" // opsional}, ...}7.2. Deskripsi Item Konfigurasi
Seperti tindakan browser, tindakan halaman dapat memiliki ikon, pesan cepat, dan pop-up. Tapi tidak ada lencana
Gunakan metode show () dan hide () untuk menampilkan dan menyembunyikan tindakan halaman. Secara default, tindakan halaman disembunyikan. Saat Anda ingin menampilkan, Anda perlu menentukan halaman tab tempat ikon berada. Ikon akan tetap terlihat sampai halaman tab ditutup atau mulai menampilkan URL yang berbeda (seperti: pengguna mengklik pada koneksi)
7.3. Tips
Gunakan tindakan halaman hanya untuk beberapa halaman;
Jangan gunakan untuk sebagian besar halaman, gunakan tindakan browser sebagai gantinya jika fungsionalitas memerlukannya.
Jangan selalu biarkan ikon muncul dalam animasi saat tidak apa -apa, itu akan sangat menjengkelkan.
8. Topik
Tema adalah ekstensi khusus yang dapat digunakan untuk mengubah penampilan seluruh browser. Tema ini mirip dengan ekstensi standar, tetapi tema tidak dapat berisi JavaScript atau kode HTML.
8.1. Konfigurasi di manifest.json
{"Versi": "2.6", "Name": "Camo Theme", "Theme": {"Images": {"Theme_Frame": "Images/Theme_frame_camo.png", "tema_frame_overlay": "gambar/tema_frame_pripe.png", "tema_toolbar": "" "tema_ntp_background": "gambar/tema_ntp_background_norepeat.png", "tema_ntp_attribution": "gambar/atribusi.png"}, "warna": {"bingkai": [71, 105, 91], "Toolbar": [207, 221, 192], "ntpe," To Toolbar ", [207, 221," 207, "2," : [36, 70, 0], "ntp_section": [207, 221, 192], "Button_background": [255, 255, 255]}, "Tints": {"Tombol": [0.33, 0.5, 0.47]}, ”" Properties ": {" NTP_Background_ALIGMENT_ALIGMENT.