chrome.pageAction

Deskripsi

Gunakan chrome.pageAction API untuk menempatkan ikon di toolbar utama Google Chrome, di sebelah kanan kolom URL. Tindakan halaman mewakili tindakan yang dapat dilakukan di halaman saat ini, tetapi tidak berlaku untuk semua halaman. Tindakan halaman muncul dalam warna abu-abu saat tidak aktif.

Ketersediaan

≤ MV2

Beberapa contoh:

  • Berlangganan feed RSS halaman ini
  • Buat slideshow dari foto halaman ini

Ikon RSS dalam screenshot berikut mewakili tindakan halaman yang memungkinkan Anda berlangganan feed RSS untuk halaman saat ini.

Tindakan halaman tersembunyi terlihat berwarna abu-abu. Misalnya, feed RSS di bawah ini berwarna abu-abu, karena Anda tidak dapat berlangganan feed untuk halaman saat ini:

Sebaiknya gunakan tindakan browser, sehingga pengguna selalu dapat berinteraksi dengan ekstensi Anda.

Manifes

Daftarkan tindakan halaman Anda dalam manifes ekstensi seperti ini:

{
  "name": "My extension",
  ...
  "page_action": {
    "default_icon": {                    // optional
      "16": "images/icon16.png",           // optional
      "24": "images/icon24.png",           // optional
      "32": "images/icon32.png"            // optional
    },
    "default_title": "Google Mail",      // optional; shown in tooltip
    "default_popup": "popup.html"        // optional
  },
  ...
}

Karena perangkat dengan faktor skala yang kurang umum seperti 1,5x atau 1,2x menjadi lebih umum, Anda dianjurkan untuk menyediakan beberapa ukuran ikon. Chrome akan memilih yang terdekat dan menskalakannya untuk mengisi ruang 16 derajat. Hal ini juga memastikan bahwa jika ukuran tampilan ikon diubah, Anda tidak perlu melakukan pekerjaan lagi untuk menyediakan ikon yang berbeda. Namun, jika perbedaan ukuran terlalu ekstrem, penskalaan ini dapat menyebabkan ikon kehilangan detail atau terlihat tidak jelas.

Sintaksis lama untuk mendaftarkan ikon default masih didukung:

{
  "name": "My extension",
  ...
  "page_action": {
    ...
    "default_icon": "images/icon32.png"  // optional
    // equivalent to "default_icon": { "32": "images/icon32.png" }
  },
  ...
}

Bagian-bagian UI

Seperti tindakan browser, tindakan halaman dapat memiliki ikon, tooltip, dan pop-up; tetapi tidak dapat memiliki badge. Selain itu, tindakan halaman dapat berwarna abu-abu. Anda dapat menemukan informasi tentang ikon, tooltip, dan pop-up dengan membaca UI tindakan browser.

Anda membuat tindakan halaman muncul dan berwarna abu-abu menggunakan metode pageAction.show dan pageAction.hide. Secara default, tindakan halaman berwarna abu-abu. Saat menampilkannya, Anda menentukan tab tempat ikon akan muncul. Ikon akan tetap terlihat hingga tab ditutup atau mulai menampilkan URL lain (misalnya, karena pengguna mengklik link).

Tips

Untuk memberikan dampak visual terbaik, ikuti panduan berikut:

  • Gunakan tindakan halaman untuk fitur yang hanya relevan untuk beberapa halaman.
  • Jangan gunakan tindakan halaman untuk fitur yang masuk akal bagi sebagian besar halaman. Sebagai gantinya, gunakan tindakan browser.
  • Jangan terus-menerus menganimasikan ikon Anda. Merepotkan.

Jenis

ImageDataType

Data piksel untuk gambar. Harus berupa objek ImageData (misalnya, dari elemen canvas).

Jenis

ImageData

TabDetails

Chrome 88 dan yang lebih baru

Properti

  • tabId

    nomor opsional

    ID tab untuk status kueri. Jika tidak ada tab yang ditentukan, status non-khusus tab akan ditampilkan.

Metode

getPopup()

Promise 
chrome.pageAction.getPopup(
  details: TabDetails,
  callback?: function,
)

Mendapatkan dokumen HTML yang ditetapkan sebagai pop-up untuk tindakan halaman ini.

Parameter

  • detail

    TabDetails

  • callback

    fungsi opsional

    Parameter callback terlihat seperti: 

    (result: string)=>void

    • hasil

      string

Hasil

  • Promise<string>

    Chrome 101+

    Promise hanya didukung untuk Manifes V3 dan yang lebih baru, platform lain perlu menggunakan callback.

getTitle()

Promise 
chrome.pageAction.getTitle(
  details: TabDetails,
  callback?: function,
)

Mendapatkan judul tindakan halaman.

Parameter

  • detail

    TabDetails

  • callback

    fungsi opsional

    Parameter callback terlihat seperti: 

    (result: string)=>void

    • hasil

      string

Hasil

  • Promise<string>

    Chrome 101+

    Promise hanya didukung untuk Manifes V3 dan yang lebih baru, platform lain perlu menggunakan callback.

hide()

Promise 
chrome.pageAction.hide(
  tabId: number,
  callback?: function,
)

Menyembunyikan tindakan halaman. Tindakan halaman tersembunyi tetap muncul di toolbar Chrome, tetapi berwarna abu-abu.

Parameter

  • tabId

    angka

    ID tab yang tindakan halamannya ingin Anda ubah.

  • callback

    fungsi opsional

    Chrome 67 dan yang lebih baru

    Parameter callback terlihat seperti: 

    ()=>void

Hasil

  • Promise<void>

    Chrome 101+

    Promise hanya didukung untuk Manifes V3 dan yang lebih baru, platform lain perlu menggunakan callback.

setIcon()

Promise 
chrome.pageAction.setIcon(
  details: object,
  callback?: function,
)

Menetapkan ikon untuk tindakan halaman. Ikon dapat ditetapkan sebagai jalur ke file gambar atau sebagai data piksel dari elemen kanvas, atau sebagai kamus untuk salah satu dari ikon tersebut. Properti path atau imageData harus ditentukan.

Parameter

  • detail

    objek

    • iconIndex

      nomor opsional

      Tidak digunakan lagi. Argumen ini diabaikan.

    • imageData

      ImageData|objek opsional

      Objek ImageData atau kamus {size -> ImageData} yang mewakili ikon yang akan disetel. Jika ikon ditetapkan sebagai kamus, gambar sebenarnya yang akan digunakan akan dipilih, bergantung pada kepadatan piksel layar. Jika jumlah piksel gambar yang sesuai dengan satu unit ruang layar sama dengan scale, maka gambar dengan ukuran scale * n akan dipilih, dengan n adalah ukuran ikon di UI. Minimal satu gambar harus ditentukan. Perhatikan bahwa 'details.imageData = foo' setara dengan 'details.imageData = {'16': foo}'

    • jalur

      string|object opsional

      Baik jalur gambar relatif atau kamus {size -> relative image path} yang mengarah ke ikon yang akan ditetapkan. Jika ikon ditetapkan sebagai kamus, gambar sebenarnya yang akan digunakan akan dipilih, bergantung pada kepadatan piksel layar. Jika jumlah piksel gambar yang sesuai dengan satu unit ruang layar sama dengan scale, maka gambar dengan ukuran scale * n akan dipilih, dengan n adalah ukuran ikon di UI. Minimal satu gambar harus ditentukan. Perhatikan bahwa 'details.path = foo' setara dengan 'details.path = {'16': foo}'

    • tabId

      angka

      ID tab yang tindakan halamannya ingin Anda ubah.

  • callback

    fungsi opsional

    Parameter callback terlihat seperti: 

    ()=>void

Hasil

  • Promise<void>

    Chrome 101+

    Promise hanya didukung untuk Manifes V3 dan yang lebih baru, platform lain perlu menggunakan callback.

setPopup()

Promise 
chrome.pageAction.setPopup(
  details: object,
  callback?: function,
)

Menetapkan dokumen HTML yang akan dibuka sebagai pop-up saat pengguna mengklik ikon tindakan halaman.

Parameter

  • detail

    objek

    • pop-up

      string

      Jalur relatif ke file HTML yang akan ditampilkan dalam pop-up. Jika ditetapkan ke string kosong (''), tidak ada pop-up yang ditampilkan.

    • tabId

      angka

      ID tab yang tindakan halamannya ingin Anda ubah.

  • callback

    fungsi opsional

    Chrome 67 dan yang lebih baru

    Parameter callback terlihat seperti: 

    ()=>void

Hasil

  • Promise<void>

    Chrome 101+

    Promise hanya didukung untuk Manifes V3 dan yang lebih baru, platform lain perlu menggunakan callback.

setTitle()

Promise 
chrome.pageAction.setTitle(
  details: object,
  callback?: function,
)

Menetapkan judul tindakan halaman. Ini ditampilkan dalam tooltip di atas tindakan halaman.

Parameter

  • detail

    objek

    • tabId

      angka

      ID tab yang tindakan halamannya ingin Anda ubah.

    • title

      string

      String tooltip.

  • callback

    fungsi opsional

    Chrome 67 dan yang lebih baru

    Parameter callback terlihat seperti: 

    ()=>void

Hasil

  • Promise<void>

    Chrome 101+

    Promise hanya didukung untuk Manifes V3 dan yang lebih baru, platform lain perlu menggunakan callback.

show()

Promise 
chrome.pageAction.show(
  tabId: number,
  callback?: function,
)

Menampilkan tindakan halaman. Tindakan halaman ditampilkan setiap kali tab dipilih.

Parameter

  • tabId

    angka

    ID tab yang tindakan halamannya ingin Anda ubah.

  • callback

    fungsi opsional

    Chrome 67 dan yang lebih baru

    Parameter callback terlihat seperti: 

    ()=>void

Hasil

  • Promise<void>

    Chrome 101+

    Promise hanya didukung untuk Manifes V3 dan yang lebih baru, platform lain perlu menggunakan callback.

Peristiwa

onClicked

chrome.pageAction.onClicked.addListener(
  callback: function,
)

Diaktifkan saat ikon tindakan halaman diklik. Peristiwa ini tidak akan diaktifkan jika tindakan halaman memiliki pop-up.

Parameter

  • callback

    fungsi

    Parameter callback terlihat seperti: 

    (tab: tabs.Tab)=>void