chrome.offscreen

Beschreibung

Mit der offscreen API können Sie Offscreen-Dokumente erstellen und verwalten.

Berechtigungen

offscreen

Wenn Sie die Offscreen API verwenden möchten, deklarieren Sie die "offscreen" Berechtigung im Erweiterungsmanifest. Beispiel:

{
  "name": "My extension",
  ...
  "permissions": [
    "offscreen"
  ],
  ...
}

Verfügbarkeit

Chrome 109+ MV3+

Konzepte und Verwendung

Service Worker haben keinen DOM-Zugriff und viele Websites haben Content-Security-Richtlinien, die die Funktionalität von Content-Skripts einschränken. Mit der Offscreen API kann die Erweiterung DOM-APIs in einem ausgeblendeten Dokument verwenden, ohne die Nutzererfahrung zu beeinträchtigen, indem neue Fenster oder Tabs geöffnet werden. Die runtime API ist die einzige Erweiterungs-API die von Offscreen-Dokumenten unterstützt wird.

Seiten, die als Offscreen-Dokumente geladen werden, werden anders als andere Arten von Erweiterungsseiten verarbeitet. Die Berechtigungen der Erweiterung werden auf Offscreen-Dokumente übertragen, aber der Zugriff auf die Erweiterungs-API ist eingeschränkt. Da beispielsweise die chrome.runtime API die einzige Erweiterungs-API ist, die von Offscreen-Dokumenten unterstützt wird, muss die Nachrichtenübermittlung mit Mitgliedern dieser API erfolgen.

Offscreen-Dokumente verhalten sich auch in anderer Hinsicht anders als normale Seiten:

  • Die URL eines Offscreen-Dokuments muss eine statische HTML-Datei sein, die mit der Erweiterung gebündelt ist.
  • Offscreen-Dokumente können nicht fokussiert werden.
  • Ein Offscreen-Dokument ist eine Instanz von window, aber der Wert der zugehörigen opener-Property ist immer null.
  • Ein Erweiterungspaket kann zwar mehrere Offscreen-Dokumente enthalten, aber es kann jeweils nur eines geöffnet sein. Wenn die Erweiterung im Split-Modus mit einem aktiven Inkognitoprofil ausgeführt wird, kann jedes Profil ein Offscreen-Dokument haben.

Verwenden Sie chrome.offscreen.createDocument() und chrome.offscreen.closeDocument(), um ein Offscreen -Dokument zu erstellen und zu schließen. Für createDocument() sind die url des Dokuments, ein Grund und eine Begründung erforderlich:

chrome.offscreen.createDocument({
  url: 'off_screen.html',
  reasons: ['CLIPBOARD'],
  justification: 'reason for needing the document',
});

Gründe

Eine Liste der gültigen Gründe finden Sie im Abschnitt Gründe. Gründe werden beim Erstellen des Dokuments festgelegt, um die Lebensdauer des Dokuments zu bestimmen. Mit dem Grund AUDIO_PLAYBACK wird festgelegt, dass das Dokument nach 30 Sekunden ohne Audiowiedergabe geschlossen wird. Bei allen anderen Gründen werden keine Lebensdauerlimits festgelegt.

Beispiele

Lebenszyklus eines Offscreen-Dokuments verwalten

Im folgenden Beispiel wird gezeigt, wie Sie dafür sorgen, dass ein Offscreen-Dokument vorhanden ist. Die setupOffscreenDocument() Funktion ruft runtime.getContexts() auf, um ein vorhandenes Offscreen-Dokument zu suchen, oder erstellt das Dokument, falls es noch nicht vorhanden ist.

let creating; // A global promise to avoid concurrency issues
async function setupOffscreenDocument(path) {
  // Check all windows controlled by the service worker to see if one
  // of them is the offscreen document with the given path
  const offscreenUrl = chrome.runtime.getURL(path);
  const existingContexts = await chrome.runtime.getContexts({
    contextTypes: ['OFFSCREEN_DOCUMENT'],
    documentUrls: [offscreenUrl]
  });

  if (existingContexts.length > 0) {
    return;
  }

  // create offscreen document
  if (creating) {
    await creating;
  } else {
    creating = chrome.offscreen.createDocument({
      url: path,
      reasons: ['CLIPBOARD'],
      justification: 'reason for needing the document',
    });
    await creating;
    creating = null;
  }
}

Bevor Sie eine Nachricht an ein Offscreen-Dokument senden, rufen Sie setupOffscreenDocument() auf, um sicherzustellen, dass das Dokument vorhanden ist, wie im folgenden Beispiel gezeigt.

chrome.action.onClicked.addListener(async () => {
  await setupOffscreenDocument('off_screen.html');

  // Send message to offscreen document
  chrome.runtime.sendMessage({
    type: '...',
    target: 'offscreen',
    data: '...'
  });
});

Vollständige Beispiele finden Sie in den Demos offscreen-clipboard und offscreen-dom auf GitHub.

Vor Chrome 116: Prüfen, ob ein Offscreen-Dokument geöffnet ist

runtime.getContexts() wurde in Chrome 116 hinzugefügt. In früheren Versionen von Chrome können Sie mit clients.matchAll() nach einem vorhandenen Offscreen-Dokument suchen:

async function hasOffscreenDocument() {
  if ('getContexts' in chrome.runtime) {
    const contexts = await chrome.runtime.getContexts({
      contextTypes: ['OFFSCREEN_DOCUMENT'],
      documentUrls: [OFFSCREEN_DOCUMENT_PATH]
    });
    return Boolean(contexts.length);
  } else {
    const matchedClients = await clients.matchAll();
    return matchedClients.some(client => {
      return client.url.includes(chrome.runtime.id);
    });
  }
}

Typen

CreateParameters

Properties

  • Begründung

    String

    Ein vom Entwickler bereitgestellter String, der den Bedarf für den Hintergrundkontext genauer erläutert. Der User-Agent _kann_ diesen String dem Nutzer anzeigen.

  • Gründe

    Die Gründe, warum die Erweiterung das Offscreen-Dokument erstellt.

  • URL

    String

    Die (relative) URL, die in das Dokument geladen werden soll.

Reason

Enum

"TESTING"
Ein Grund, der nur zu Testzwecken verwendet wird.

"AUDIO_PLAYBACK"
Gibt an, dass das Offscreen-Dokument für die Audiowiedergabe verantwortlich ist.

"IFRAME_SCRIPTING"
Gibt an, dass das Offscreen-Dokument ein Iframe einbetten und skripten muss, um den Inhalt des Iframes zu ändern.

"DOM_SCRAPING"
Gibt an, dass das Offscreen-Dokument ein Iframe einbetten und das zugehörige DOM scrapen muss, um Informationen zu extrahieren.

"BLOBS"
Gibt an, dass das Offscreen-Dokument mit Blob-Objekten interagieren muss (einschließlich URL.createObjectURL()).

"DOM_PARSER"
Gibt an, dass das Offscreen-Dokument die DOMParser API verwenden muss.

"USER_MEDIA"
Gibt an, dass das Offscreen-Dokument mit Media-Streams aus Nutzermedien interagieren muss (z.B. getUserMedia()).

"DISPLAY_MEDIA"
Gibt an, dass das Offscreen-Dokument mit Media-Streams aus Displaymedien interagieren muss (z.B. getDisplayMedia()).

"WEB_RTC"
Gibt an, dass das Offscreen-Dokument WebRTC-APIs verwenden muss.

"CLIPBOARD"
Gibt an, dass das Offscreen-Dokument mit der Clipboard API interagieren muss.

"LOCAL_STORAGE"
Gibt an, dass das Offscreen-Dokument Zugriff auf localStorage benötigt.

"WORKERS"
Gibt an, dass das Offscreen-Dokument Worker erzeugen muss.

"BATTERY_STATUS"
Gibt an, dass das Offscreen-Dokument navigator.getBattery verwenden muss.

"MATCH_MEDIA"
Gibt an, dass das Offscreen-Dokument window.matchMedia verwenden muss.

"GEOLOCATION"
Gibt an, dass das Offscreen-Dokument navigator.geolocation verwenden muss.

Methoden

closeDocument()

chrome.offscreen.closeDocument(): Promise<void>

Schließt das derzeit geöffnete Offscreen-Dokument für die Erweiterung.

Ausgabe

  • Promise<void>

    Promise, das aufgelöst wird, wenn das Offscreen-Dokument geschlossen wurde.

createDocument()

chrome.offscreen.createDocument(
  parameters: CreateParameters,
)
: Promise<void>

Erstellt ein neues Offscreen-Dokument für die Erweiterung.

Parameter

  • Parameter

    Die Parameter, die das zu erstellende Offscreen-Dokument beschreiben.

Ausgabe

  • Promise<void>

    Promise, das aufgelöst wird, wenn das Offscreen-Dokument erstellt wurde und der erste Seitenaufbau abgeschlossen ist.

hasDocument()

Ausstehend
chrome.offscreen.hasDocument(): Promise<boolean>

Bestimmt, ob die Erweiterung ein aktives Dokument hat.

Ausgabe

  • Promise<boolean>

    Promise, das mit dem Ergebnis aufgelöst wird, ob die Erweiterung ein aktives Offscreen-Dokument hat.