Tindakan ekstensi di Manifes V3

Simeon Vincent

Twitter GitHub Glitch

Sejak peluncuran ekstensi Chrome, platform ini memungkinkan developer mengekspos fungsi ekstensi secara langsung di UI Chrome level teratas menggunakan tindakan. Tindakan adalah tombol ikon yang dapat membuka pop-up atau memicu beberapa fungsi dalam ekstensi. Secara historis, Chrome mendukung dua jenis tindakan, tindakan browser, dan tindakan halaman; Manifes V3 mengubah hal ini dengan menggabungkan fungsinya dalam API chrome.action baru.

Histori singkat tindakan ekstensi

Meskipun chrome.action sendiri baru di Manifes V3, fungsi dasar yang disediakannya berasal dari saat ekstensi pertama kali menjadi stabil pada bulan Januari 2010. Rilis stabil platform ekstensi Chrome pertama mendukung dua jenis tindakan yang berbeda: tindakan browser dan tindakan halaman.

Tindakan browser memungkinkan developer ekstensi menampilkan ikon "di toolbar utama Google Chrome, di sebelah kanan kolom URL" (sumber) dan memberikan cara mudah kepada pengguna untuk memicu fungsi ekstensi di halaman mana pun. Di sisi lain, tindakan halaman dimaksudkan untuk "mewakili tindakan yang dapat dilakukan di halaman saat ini, tetapi tidak berlaku untuk semua halaman" (sumber).

Dengan kata lain, tindakan browser memberi developer ekstensi platform UI yang persisten di browser, sementara tindakan halaman hanya muncul ketika ekstensi dapat melakukan sesuatu yang berguna di halaman saat ini.

Kedua jenis tindakan tersebut bersifat opsional, sehingga developer ekstensi dapat memilih untuk tidak menyediakan tindakan, tindakan halaman, atau tindakan browser (menentukan beberapa tindakan tidak diizinkan).

Sekitar enam tahun kemudian, Chrome 49 memperkenalkan paradigma UI baru untuk ekstensi. Untuk membantu pengguna memahami ekstensi yang mereka miliki, Chrome mulai menampilkan semua ekstensi aktif di sebelah kanan omnibox. Pengguna dapat "melimpah" ekstensi ke dalam menu Chrome jika mau.

Guna menampilkan ikon untuk setiap ekstensi, update ini juga menghadirkan dua perubahan penting pada perilaku ekstensi di UI Chrome. Pertama, semua ekstensi mulai menampilkan ikon di toolbar. Jika ekstensi tidak memiliki ikon, Chrome akan membuat ikon secara otomatis. Kedua, tindakan halaman dipindahkan ke toolbar bersama tindakan browser dan diberi kemampuan untuk membedakan antara status "show" dan "hide".

Perubahan ini memungkinkan ekstensi tindakan halaman untuk terus berfungsi seperti yang diharapkan, tetapi juga mengurangi peran tindakan halaman dari waktu ke waktu. Salah satu efek dari desain ulang UI adalah tindakan halaman yang diaktifkan secara efektif oleh tindakan browser. Karena semua ekstensi muncul di toolbar, pengguna merasa bahwa mengklik ikon toolbar ekstensi akan memanggil ekstensi, dan tindakan browser menjadi interaksi yang semakin penting untuk ekstensi Chrome.

Perubahan Manifes V3

UI dan ekstensi Chrome terus berkembang selama beberapa tahun setelah UI ekstensi tahun 2016 didesain ulang, namun sebagian besar tindakan browser dan tindakan halaman tidak berubah. Artinya, setidaknya hingga kami mulai merencanakan cara memodernisasi platform ekstensi dengan Manifest V3.

Tim ekstensi menunjukkan dengan jelas bahwa tindakan browser dan tindakan halaman menjadi semakin berbeda tanpa makna. Lebih buruk lagi, perbedaan perilaku mereka yang halus menyulitkan developer untuk menentukan mana yang akan digunakan. Kami menyadari bahwa kami dapat mengatasi masalah ini dengan menggabungkan tindakan browser dan tindakan halaman ke dalam satu "tindakan".

Masuk ke Action API; chrome.action paling mirip dengan chrome.browserAction, tetapi memiliki beberapa perbedaan penting.

Pertama, chrome.action memperkenalkan metode baru bernama getUserSettings(). Metode ini memberi developer ekstensi cara untuk memeriksa apakah pengguna telah menyematkan tindakan ekstensinya ke toolbar.

let userSettings = await chrome.action.getUserSettings();
console.log(`Is the action pinned? ${userSettings.isOnToolbar ? 'Yes' : 'No'}.`);

"getUserSettings" mungkin tampak tidak biasa untuk fungsi ini jika dibandingkan dengan, misalnya, "isembedded", tetapi histori tindakan di Chrome menunjukkan bahwa UI browser berubah lebih cepat daripada API ekstensi. Dengan demikian, tujuan kami dengan API ini adalah mengekspos preferensi pengguna terkait tindakan pada antarmuka umum untuk meminimalkan churn API di masa mendatang. Hal ini juga memungkinkan vendor browser lain mengekspos konsep UI khusus browser dalam objek UserSettings yang ditampilkan oleh metode ini.

Kedua, ikon dan status diaktifkan/dinonaktifkan dari tindakan ekstensi dapat dikontrol menggunakan Declarative Content API. Hal ini penting karena memungkinkan ekstensi bereaksi terhadap perilaku penjelajahan pengguna tanpa mengakses konten atau bahkan URL halaman yang dia kunjungi. Misalnya, mari kita lihat bagaimana ekstensi dapat mengaktifkan tindakannya saat pengguna mengunjungi halaman di example.com.

// Manifest V3
chrome.runtime.onInstalled.addListener(() => {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: {hostSuffix: '.example.com'},
          })
        ],
        actions: [new chrome.declarativeContent.ShowAction()]
      }
    ]);
  });
});

Kode di atas hampir sama dengan apa yang akan dilakukan ekstensi dengan tindakan halaman. Satu-satunya perbedaan adalah di Manifes V3 kita menggunakan declarativeContent.ShowAction, bukan declarativeContent.ShowPageAction di Manifes V2.

Terakhir, pemblokir konten dapat menggunakan metode setExtensionActionOptions deklaratifNetRequest API untuk menampilkan jumlah permintaan yang diblokir oleh ekstensi untuk tab tertentu. Kemampuan ini penting karena memungkinkan pemblokir konten terus memberikan informasi kepada pengguna akhir tanpa mengekspos metadata penjelajahan yang berpotensi sensitif ke ekstensi.

Penutup

Memodernisasi platform ekstensi Chrome adalah salah satu motivasi utama kami untuk Manifes V3. Dalam banyak kasus, itu berarti beralih ke teknologi baru, tetapi juga berarti menyederhanakan antarmuka API kami; itulah tujuan kami di sini.

Saya harap postingan ini membantu menjelaskan tentang sudut khusus dari platform Manifest V3 ini. Untuk mempelajari lebih lanjut pendekatan tim Chrome terhadap masa depan ekstensi browser, lihat halaman Visi platform dan Ringkasan Manifes V3 dalam dokumentasi developer kami. Anda juga dapat mendiskusikan ekstensi Chrome dengan developer lain di Google Grup chromium-extensions.