browser.sidePanel

Açıklama

chrome.sidePanel API'sini kullanarak içeriği, tarayıcının yan panelinde bir web sayfasının ana içeriğiyle birlikte barındırın.

İzinler

sidePanel

Yan Panel API'sini kullanmak için uzantı manifest dosyasına "sidePanel" iznini ekleyin:

manifest.json:

{
  "name": "My side panel extension",
  ...
  "permissions": [
    "sidePanel"
  ]
}

Kullanılabilirlik

Chrome 114 veya daha yeni bir sürüm MV3 veya daha yeni bir sürüm

Kavramlar ve kullanım

Yan Panel API'si, uzantıların kendi kullanıcı arayüzlerini yan panelde göstermesine olanak tanır. Böylece, kullanıcının göz atma yolculuğunu tamamlayan kalıcı deneyimler sağlanır.

Yan panel açılır menüsü
Chrome tarayıcıdaki yan panel kullanıcı arayüzü.

Bazı özellikler:

  • Sekmeler arasında gezinirken yan panel açık kalır (bu şekilde ayarlanmışsa).
  • Yalnızca belirli web sitelerinde kullanılabilir.
  • Yan paneller, uzantı sayfası olarak tüm Chrome API'lerine erişebilir.
  • Kullanıcılar, Chrome'un ayarlarında panelin hangi tarafta gösterileceğini belirtebilir.

Kullanım alanları

Aşağıdaki bölümlerde, Yan Panel API'sinin bazı yaygın kullanım alanları gösterilmektedir. Tam uzantı örnekleri için Uzantı örnekleri bölümüne bakın.

Her sitede aynı yan paneli gösterme

Yan panel, her sitede aynı yan paneli gösterecek şekilde başlangıçta manifestin "side_panel" anahtarındaki "default_path" özelliğinden ayarlanabilir. Bu, uzantı dizinindeki göreli bir yolu işaret etmelidir.

manifest.json:

{
  "name": "My side panel extension",
  ...
  "side_panel": {
    "default_path": "sidepanel.html"
  }
  ...
}

sidepanel.html:

<!DOCTYPE html>
<html>
  <head>
    <title>My Sidepanel</title>
  </head>
  <body>
    <h1>All sites sidepanel extension</h1>
    <p>This side panel is enabled on all sites</p>
  </body>
</html>

Belirli bir sitede yan paneli etkinleştirme

Uzantılar, belirli bir sekmede yan panel etkinleştirmek için sidepanel.setOptions() kullanabilir. Bu örnekte, sekmede yapılan güncellemeleri dinlemek için browser.tabs.onUpdated() kullanılır. URL'nin www.google.com olup olmadığını kontrol eder ve yan paneli etkinleştirir. Aksi takdirde devre dışı bırakır.

service-worker.js:

const GOOGLE_ORIGIN = 'https://www.google.com';

browser.tabs.onUpdated.addListener(async (tabId, info, tab) => {
  if (!tab.url) return;
  const url = new URL(tab.url);
  // Enables the side panel on google.com
  if (url.origin === GOOGLE_ORIGIN) {
    await browser.sidePanel.setOptions({
      tabId,
      path: 'sidepanel.html',
      enabled: true
    });
  } else {
    // Disables the side panel on all other sites
    await browser.sidePanel.setOptions({
      tabId,
      enabled: false
    });
  }
});

Kullanıcı, yan panelin etkin olmadığı bir sekmeye geçici olarak geçtiğinde yan panel gizlenir. Kullanıcı daha önce açık olduğu bir sekmeye geçtiğinde otomatik olarak tekrar gösterilir.

Kullanıcı, yan panelin etkin olmadığı bir siteye gittiğinde yan panel kapanır ve uzantı, yan panel açılır menüsünde gösterilmez.

Tam bir örnek için sekmeye özel yan panel örneğine bakın.

Araç çubuğu simgesini tıklayarak yan paneli açın.

Geliştiriciler, kullanıcıların sidePanel.setPanelBehavior() ile işlem araç çubuğu simgesini tıkladıklarında yan paneli açmasına izin verebilir. Öncelikle manifest'te "action" anahtarını bildirin:

manifest.json:

{
  "name": "My side panel extension",
  ...
  "action": {
    "default_title": "Click to open panel"
  },
  ...
}

Şimdi bu kodu önceki örneğe ekleyin:

service-worker.js:

const GOOGLE_ORIGIN = 'https://www.google.com';

// Allows users to open the side panel by clicking on the action toolbar icon
browser.sidePanel
  .setPanelBehavior({ openPanelOnActionClick: true })
  .catch((error) => console.error(error));
...

Kullanıcı etkileşimiyle yan paneli programatik olarak açma

Chrome 116'da sidePanel.open() özelliği kullanıma sunuluyor. Eklentilerin, işlem simgesini tıklama gibi bir eklenti kullanıcı hareketiyle yan paneli açmasına olanak tanır. Alternatif olarak, bir uzantı sayfasında veya içerik komut dosyasında kullanıcı etkileşimi (ör. bir düğmeyi tıklama) de olabilir. Tam bir demo için Open Side Panel örnek uzantısına bakın.

Aşağıdaki kod, kullanıcı bir bağlam menüsünü tıkladığında geçerli pencerede genel bir yan panelin nasıl açılacağını gösterir. sidePanel.open() kullanılırken açılacağı bağlamı seçmeniz gerekir. Genel bir yan paneli açmak için windowId simgesini kullanın. Alternatif olarak, yan paneli yalnızca belirli bir sekmede açmak için tabId simgesini ayarlayın.

service-worker.js:

browser.runtime.onInstalled.addListener(() => {
  browser.contextMenus.create({
    id