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 tampak berwarna abu-abu jika tidak aktif.

Ketersediaan

≤ MV2

Beberapa contohnya:

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

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

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

Pertimbangkan untuk menggunakan tindakan browser, sehingga pengguna dapat selalu berinteraksi dengan .

Manifes

Daftarkan tindakan halaman Anda di 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 sebaiknya sediakan beberapa ukuran untuk ikon Anda. Chrome akan memilih yang terdekat dan menskalakannya untuk mengisi ruang 16-dip. Ini juga memastikan bahwa jika ukuran tampilan ikon berubah, Anda tidak perlu melakukan lebih banyak pekerjaan untuk menyediakan ikon yang berbeda! Namun, jika perbedaan ukurannya terlalu ekstrem, penskalaan ini dapat menyebabkan ikon kehilangan detail atau terlihat kabur.

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; mereka tidak bisa memiliki lencana, . Selain itu, tindakan halaman dapat berwarna abu-abu. Anda dapat menemukan informasi tentang ikon, tooltip, dan pop-up dengan membaca tentang UI tindakan browser.

Anda membuat tindakan halaman muncul dan berwarna abu-abu menggunakan pageAction.show dan pageAction.hide. Secara default, tindakan halaman ditampilkan berwarna abu-abu. Jika Anda menunjukkannya, Anda menentukan tab di mana ikon akan muncul. Ikon tetap terlihat hingga tab ditutup atau mulai menampilkan URL yang berbeda (misalnya, karena pengguna mengeklik tautan).

Tips

Untuk dampak visual terbaik, ikuti panduan berikut:

  • Gunakan tindakan halaman untuk fitur yang hanya tersedia untuk beberapa halaman.
  • Jangan gunakan tindakan halaman untuk fitur yang relevan bagi sebagian besar halaman. Menggunakan tindakan browser sebagai gantinya.
  • Jangan terus menganimasikan ikon Anda. Menjengkelkan.

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

    angka opsional

    ID tab yang akan dimintakan status. Jika tidak ada tab yang ditentukan, status non-tab tertentu akan ditampilkan.

Metode

getPopup()

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

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

Parameter

  • detail

    TabDetails

  • callback

    fungsi opsional

    Parameter callback terlihat seperti ini: 

    (result: string) => void

    • hasil

      string

Hasil

  • Promise<string>

    Chrome 101 dan yang lebih baru

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

getTitle()

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

Mendapatkan judul tindakan halaman.

Parameter

  • detail

    TabDetails

  • callback

    fungsi opsional

    Parameter callback terlihat seperti ini: 

    (result: string) => void

    • hasil

      string

Hasil

  • Promise<string>

    Chrome 101 dan yang lebih baru

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

hide()

Janji 
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 ini: 

    () => void

Hasil

  • Janji<void>

    Chrome 101 dan yang lebih baru

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

setIcon()

Janji 
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 dari salah satu ikon tersebut. Properti path atau imageData harus ditentukan.

Parameter

  • detail

    objek

    • iconIndex

      angka 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, gambar dengan ukuran scale * n akan dipilih, dengan n adalah ukuran ikon di UI. Minimal satu gambar harus ditentukan. Perhatikan bahwa 'details.imageData = foo' sama dengan 'details.imageData = {'16': foo}'

    • jalur

      string | objek opsional

      Baik jalur gambar relatif maupun kamus {size -> relatif image path} menunjuk ke ikon yang akan diatur. 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, gambar dengan ukuran scale * n akan dipilih, dengan n adalah ukuran ikon di UI. Minimal satu gambar harus ditentukan. Perhatikan bahwa 'details.path = foo' sama dengan 'details.path = {'16': foo}'

    • tabId

      angka

      ID tab yang tindakan halamannya ingin Anda ubah.

  • callback

    fungsi opsional

    Parameter callback terlihat seperti ini: 

    () => void

Hasil

  • Janji<void>

    Chrome 101 dan yang lebih baru

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

setPopup()

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

Menyetel 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 di pop-up. Jika ditetapkan ke string kosong (''), pop-up tidak akan ditampilkan.

    • tabId

      angka

      ID tab yang tindakan halamannya ingin Anda ubah.

  • callback

    fungsi opsional

    Chrome 67 dan yang lebih baru

    Parameter callback terlihat seperti ini: 

    () => void

Hasil

  • Janji<void>

    Chrome 101 dan yang lebih baru

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

setTitle()

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

Menetapkan judul tindakan halaman. Kolom ini ditampilkan dalam tooltip di atas tindakan halaman.

Parameter

  • detail

    objek

    • tabId

      angka

      ID tab yang tindakan halamannya ingin Anda ubah.

    • judul

      string

      String tooltip.

  • callback

    fungsi opsional

    Chrome 67 dan yang lebih baru

    Parameter callback terlihat seperti ini: 

    () => void

Hasil

  • Janji<void>

    Chrome 101 dan yang lebih baru

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

show()

Janji 
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 ini: 

    () => void

Hasil

  • Janji<void>

    Chrome 101 dan yang lebih baru

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

Acara

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 ini: 

    (tab: tabs.Tab) => void