Opis
Używaj interfejsu API offscreen
do tworzenia dokumentów poza ekranem i zarządzania nimi.
Uprawnienia
offscreen
Aby używać interfejsu Offscreen API, zadeklaruj uprawnienia "offscreen"
w pliku manifestu rozszerzenia. Na przykład:
{
"name": "My extension",
...
"permissions": [
"offscreen"
],
...
}
Dostępność
Pojęcia i wykorzystanie
Skrypty service worker nie mają dostępu DOM, a wiele witryn ma politykę zabezpieczeń treści,
ograniczają funkcjonalność skryptów treści. Interfejs Offscreen API umożliwia rozszerzeniu korzystanie z modelu DOM
interfejsów API w ukrytym dokumencie bez zakłócania pracy użytkowników przez otwieranie nowych okien lub
. Interfejs API runtime
to jedyny interfejs API rozszerzeń
obsługiwane przez dokumenty poza ekranem.
Strony wczytywane jako dokumenty poza ekranem są obsługiwane inaczej niż w przypadku innych typów stron rozszerzeń.
Uprawnienia rozszerzenia są przenoszone do dokumentów poza ekranem, ale z ograniczeniami dotyczącymi interfejsu API rozszerzenia
dostęp. Jako że interfejs API chrome.runtime
jest jedynym
interfejsu API rozszerzeń obsługiwanego przez dokumenty poza ekranem, wiadomości muszą być obsługiwane
za pomocą elementów tego interfejsu API.
Dokumenty poza ekranem działają inaczej niż zwykłe strony na następujące sposoby:
- Adres URL dokumentu poza ekranem musi być statycznym plikiem HTML dołączonym do rozszerzenia.
- Nie można zaznaczyć dokumentów poza ekranem.
- Dokument poza ekranem to wystąpienie elementu
window
, ale wartość jego właściwościopener
zawsze wynosinull
. - Chociaż pakiet rozszerzeń może zawierać wiele dokumentów poza ekranem, zainstalowane rozszerzenie może a potem otworzyć tylko jedną z nich. Jeśli rozszerzenie jest uruchomione w trybie podzielonego z aktywnym profilem incognito można jeden dokument poza ekranem.
Używaj chrome.offscreen.createDocument()
oraz
chrome.offscreen.closeDocument()
, aby utworzyć i zamknąć ekran poza ekranem
dokument. Funkcja createDocument()
wymaga właściwości url
dokumentu oraz przyczyny i uzasadnienia:
chrome.offscreen.createDocument({
url: 'off_screen.html',
reasons: ['CLIPBOARD'],
justification: 'reason for needing the document',
});
Przyczyny
Listę prawidłowych powodów znajdziesz w sekcji Przyczyny. Powody są określane w czasie
tworzenia dokumentu, aby określić jego okres ważności. Przyczyna: AUDIO_PLAYBACK
ustawia
dokument zostanie zamknięty po 30 sekundach bez odtwarzania dźwięku. Żadne inne powody nie powodują nałożenia limitów bezterminowych.
Przykłady
Zachować cykl życia dokumentu poza ekranem
Z przykładu poniżej dowiesz się, jak sprawdzić, czy dokument poza ekranem istnieje.
Funkcja setupOffscreenDocument()
wywołuje funkcję runtime.getContexts()
, aby znaleźć
istniejącego dokumentu poza ekranem, albo tworzy dokument, jeśli jeszcze nie istnieje.
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;
}
}
Zanim wyślesz wiadomość do dokumentu poza ekranem, wywołaj setupOffscreenDocument()
, aby upewnić się,
dokument istnieje, co pokazano w przykładzie poniżej.
chrome.action.onClicked.addListener(async () => {
await setupOffscreenDocument('off_screen.html');
// Send message to offscreen document
chrome.runtime.sendMessage({
type: '...',
target: 'offscreen',
data: '...'
});
});
Pełne przykłady znajdziesz w artykułach na temat offscreen-clipboard i wersji demonstracyjne offscreen-dom na GitHubie.
Do wersji Chrome 116: sprawdzanie, czy dokument poza ekranem jest otwarty
Aplikacja runtime.getContexts()
została dodana w Chrome 116. We wcześniejszych wersjach
Chrome – użyj clients.matchAll()
aby sprawdzić istniejący dokument poza ekranem:
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 await matchedClients.some(client => {
client.url.includes(chrome.runtime.id);
});
}
}
Typy
CreateParameters
Właściwości
-
uzasadnienie
ciąg znaków
Ciąg tekstowy dostarczony przez dewelopera, który bardziej szczegółowo wyjaśnia, dlaczego potrzebujesz kontekstu w tle. Klient użytkownika _może_ go używać w wyświetlaniu użytkownikowi.
-
przyczyn(y)
Przyczyny, dla których rozszerzenie tworzy dokument poza ekranem.
-
URL
ciąg znaków
Względny URL, który ma być wczytywany w dokumencie.
Reason
Typ wyliczeniowy
"TESTING"
Powód używany wyłącznie do celów testowych.
"AUDIO_PLAYBACK"
Określa, że za odtwarzanie dźwięku odpowiada dokument poza ekranem.
"IFRAME_SCRIPTING"
Określa, że dokument poza ekranem musi zawierać element iframe i skryptować z niego, aby można było zmodyfikować zawartość elementu iframe.
"DOM_SCRAPING"
Określa, że dokument poza ekranem musi osadzać element iframe i wykorzystywać jego DOM w celu wyodrębnienia informacji.
„BLOBS”
Określa, że dokument poza ekranem musi wejść w interakcję z obiektami Blob (w tym z obiektem URL.createObjectURL()
).
"DOM_PARSER"
Określa, że dokument zewnętrzny musi używać interfejsu API DOMParser.
"USER_MEDIA"
Określa, że dokument poza ekranem musi wchodzić w interakcję ze strumieniami multimediów z multimediów użytkownika (np. getUserMedia()
).
"DISPLAY_MEDIA"
Określa, że dokument poza ekranem musi wchodzić w interakcje ze strumieniami multimediów z displayowych multimediów (np. getDisplayMedia()
).
"WEB_RTC"
Określa, że dokument poza ekranem musi używać interfejsów API WebRTC.
"CLIPBOARD"
Określa, że dokument poza ekranem musi współdziałać z interfejsem Clipboard API.
"LOCAL_STORAGE"
Określa, że dokument zewnętrzny wymaga dostępu do localStorage.
"WORKERS"
Określa, że dokument poza ekranem musi wywoływać instancje robocze.
"BATTERY_STATUS"
Określa, że dokument poza ekranem musi używać polecenia navigator.getBattery.
"MATCH_MEDIA"
Określa, że dokument poza ekranem musi korzystać z parametru window.matchMedia.
"GEOLOCATION"
Określa, że dokument poza ekranem musi używać polecenia navigator.geolocation.
Metody
closeDocument()
chrome.offscreen.closeDocument(
callback?: function,
)
Zamyka aktualnie otwarty dokument poza ekranem dotyczący rozszerzenia.
Parametry
-
wywołanie zwrotne
funkcja optional
Parametr
callback
wygląda tak:() => void
Zwroty
-
Obietnica<void>
Obietnice są obsługiwane w Manifest V3 i nowszych, ale wywołania zwrotne są podane w przypadku zgodność wsteczną. Nie można użyć obu w tym samym wywołaniu funkcji. Polecenie promowana jest realizowane z tym samym typem, który jest przekazywany do wywołania zwrotnego.
createDocument()
chrome.offscreen.createDocument(
parameters: CreateParameters,
callback?: function,
)
Tworzy nowy dokument poza ekranem na potrzeby rozszerzenia.
Parametry
-
parametry
Parametry opisujące dokument poza ekranem, który ma zostać utworzony.
-
wywołanie zwrotne
funkcja optional
Parametr
callback
wygląda tak:() => void
Zwroty
-
Obietnica<void>
Obietnice są obsługiwane w Manifest V3 i nowszych, ale wywołania zwrotne są podane w przypadku zgodność wsteczną. Nie można użyć obu w tym samym wywołaniu funkcji. Polecenie promowana jest realizowane z tym samym typem, który jest przekazywany do wywołania zwrotnego.