Zaktualizuj kod

Aktualizacje, które nie są związane z innymi problemami

To jest pierwsza z trzech sekcji opisujących zmiany niezbędne w kodzie, który nie jest częścią skryptu service worker rozszerzenia. Ta sekcja dotyczy wymaganych zmian w kodzie, które nie są związane z innymi problemami. W kolejnych 2 sekcjach omawiamy zastępowanie blokowania żądań sieciowych i zwiększanie bezpieczeństwa.

Zastąp tab.executeScript() funkcją scripting.executeScript()

W pliku manifestu w wersji 3 executeScript() przechodzi z interfejsu API tabs do interfejsu API scripting. Wymaga to zmian uprawnień w pliku manifestu, a także samych zmian w kodzie.

W przypadku metody executeScript() potrzebujesz:

  • Uprawnienie "scripting".
  • Uprawnienia dotyczące hosta lub uprawnienie "activeTab".

Metoda scripting.executeScript() działa podobnie do metody tabs.executeScript(). Jest kilka różnic.

  • Stara metoda umożliwiała przyjmowanie tylko 1 pliku, a nowa może przyjmować tablice plików.
  • Przekazujesz też obiekt ScriptInjection zamiast InjectDetails. Istnieje między nimi wiele różnic. Na przykład element tabId jest teraz przekazywany jako element elementu ScriptInjection.target, a nie jako argument metody.

Jak to zrobić, dowiesz się z przykładu.

(platforma) Manifest V2
async function getCurrentTab() {/* ... */}
let tab = await getCurrentTab();

chrome.tabs.executeScript(
  tab.id,
  {
    file: 'content-script.js'
  }
);

W pliku skryptu w tle.

(platforma) Manifest V3
async function getCurrentTab()
let tab = await getCurrentTab();

chrome.scripting.executeScript({
  target: {tabId: tab.id},
  files: ['content-script.js']
});

w skrypcie service worker rozszerzenia,

Zastąp tab.insertCSS() i cards.removeCSS() skryptami scripting.insertCSS() i scripting.removeCSS()

W pliku manifestu w wersji 3 insertCSS() i removeCSS() przechodzą z interfejsu API tabs na interfejs scripting API. Wymaga to modyfikacji uprawnień w pliku manifestu oprócz zmian w kodzie:

  • Uprawnienie "scripting".
  • Uprawnienia dotyczące hosta lub uprawnienie "activeTab".

Funkcje interfejsu API scripting są podobne do funkcji w tabs. Jest kilka różnic.

  • Wywołując te metody, przekazujesz obiekt CSSInjection zamiast InjectDetails.
  • Element tabId jest teraz przekazywany jako element elementu CSSInjection.target, a nie jako argument metody.

Ten przykład pokazuje, jak to zrobić w przypadku insertCSS(). Procedura removeCSS() jest taka sama.

(platforma) Manifest V2
chrome.tabs.insertCSS(tabId, injectDetails, () => {
  // callback code
});

W pliku skryptu w tle.

(platforma) Manifest V3
const insertPromise = await chrome.scripting.insertCSS({
  files: ["style.css"],
  target: { tabId: tab.id }
});
// Remaining code. 

w skrypcie service worker rozszerzenia,

Zastąp działania przeglądarki i działania na stronie działaniami

W platformie Manifest V2 działania przeglądarki i działania na stronie były osobnymi pojęciami. Choć zaczynali od różnych ról, z czasem różnice między nimi zmniejszyły się. W platformie Manifest V3 te koncepcje są skonsolidowane w interfejsie Action API. Wymaga to zmian w Twoim pliku manifest.json i kodzie rozszerzenia w inny sposób niż w skrypcie umieszczonym w tle platformy Manifest V2.

Działania w pliku manifestu w wersji 3 najbardziej przypominają działania przeglądarki, jednak interfejs API action nie udostępnia funkcji hide() i show() tak jak pageAction. Jeśli nadal potrzebujesz działań na stronie, możesz emulować je za pomocą treści deklaratywnej albo wywołać metodę enable() lub disable() z identyfikatorem karty.

Zastąp parametry „browser_action” i „page_action” wartością „action”

W manifest.json zastąp pola "browser_action" i "page_action" polem "action". Zapoznaj się z dokumentacją dotyczącą pola "action".

(platforma) Manifest V2
{
  ...
  "page_action": { ... },
  "browser_action": {
    "default_popup": "popup.html"
   }
  ...
}
(platforma) Manifest V3
{
  ...
  "action": {
    "default_popup": "popup.html"
  }

  ...
}

Zastąp interfejsy API BrowserAction i pageAction API

Tam, gdzie Twój plik Manifest V2 wykorzystywał interfejsy API browserAction i pageAction, użyj teraz interfejsu API action.

(platforma) Manifest V2
chrome.browserAction.onClicked.addListener(tab => { ... });
chrome.pageAction.onClicked.addListener(tab => { ... });
(platforma) Manifest V3
chrome.action.onClicked.addListener(tab => { ... });

Zastępowanie wywołań zwrotnych obietnicami

W platformie Manifest V3 wiele metod interfejsu API rozszerzeń zwraca obietnice. Obiekt Promise to serwer proxy lub obiekt zastępczy wartości zwracanej przez metodę asynchroniczną. Jeśli po raz pierwszy zdarzyło Ci się korzystać z obietnic, przeczytaj o nich w MDN. Na tej stronie opisujemy, co musisz wiedzieć, by używać ich w rozszerzeniu do Chrome.

Aby zapewnić zgodność wsteczną, po dodaniu obsługi obietnicy wiele metod nadal obsługuje wywołania zwrotne. Pamiętaj, że w tym samym wywołaniu funkcji nie można użyć obu. Jeśli przekażesz wywołanie zwrotne, funkcja nie zwróci obietnicy, a jeśli chcesz, by została zwrócona, nie zwróci tej funkcji. Niektóre funkcje interfejsu API, takie jak detektory zdarzeń, nadal będą wymagać wywołań zwrotnych. Aby sprawdzić, czy metoda obsługuje obietnice, poszukaj etykiety „Promise” w dokumentacji API.

Aby dokonać konwersji z wywołania zwrotnego na obietnicę, usuń wywołanie zwrotne i obsługuj zwróconą obietnicę. Poniższy przykład został zaczerpnięty z przykładu uprawnień opcjonalnych, w szczególności newtab.js. Wersja wywołania zwrotnego pokazuje, jak mogłoby wyglądać przykładowe wywołanie funkcji request() z wywołaniem zwrotnym. Pamiętaj, że wersję obiecującą można przepisać asynchronicznie i poczekać.

Oddzwanianie
chrome.permissions.request(newPerms, (granted) => {
  if (granted) {
    console.log('granted');
  } else {
    console.log('not granted');
  }
});
Obietnica
const newPerms = { permissions: ['topSites'] };
chrome.permissions.request(newPerms)
.then((granted) => {
  if (granted) {
    console.log('granted');
  } else {
    console.log('not granted');
  }
});

Zastąp funkcje, które oczekują kontekstu tła platformy Manifest V2

Inne konteksty rozszerzeń mogą wchodzić w interakcje z mechanizmami Service Worker rozszerzenia tylko za pomocą przekazywania wiadomości. W związku z tym musisz zastąpić połączenia, które oczekują kontekstu, w szczególności:

  • chrome.runtime.getBackgroundPage()
  • chrome.extension.getBackgroundPage()
  • chrome.extension.getExtensionTabs()

Skrypty rozszerzeń powinny wykorzystywać przekazywanie wiadomości do komunikacji między mechanizmem Service Worker a innymi częściami rozszerzenia. Obecnie wymaga to użycia sendMessage() i zaimplementowania chrome.runtime.onMessage w skrypcie usługi rozszerzeń. W dłuższej perspektywie warto zastąpić te wywołania funkcją postMessage() i modułem obsługi zdarzeń wiadomości skryptu service worker.

Zastąp nieobsługiwane interfejsy API

W platformie Manifest V3 należy zmienić wymienione poniżej metody i właściwości.

Metoda lub właściwość w pliku manifestu w wersji 2 Zamień na
chrome.extension.connect() chrome.runtime.connect()
chrome.extension.connectNative() chrome.runtime.connectNative()
chrome.extension.getExtensionTabs() chrome.extension.getViews()
chrome.extension.getURL() chrome.runtime.getURL()
chrome.extension.lastError Gdy metody zwracają obietnice, użyj promise.catch()
chrome.extension.onConnect chrome.runtime.onConnect
chrome.extension.onConnectExternal chrome.runtime.onConnectExternal
chrome.extension.onMessage chrome.runtime.onMessage
chrome.extension.onRequest chrome.runtime.onMessage
chrome.extension.onRequestExternal chrome.runtime.onMessageExternal
chrome.extension.sendMessage() chrome.runtime.sendMessage()
chrome.extension.sendNativeMessage() chrome.runtime.sendNativeMessage()
chrome.extension.sendRequest() chrome.runtime.sendMessage()
chrome.runtime.onSuspend (skrypty w tle) Nieobsługiwane przez mechanizmy Service Worker rozszerzenia. Zamiast tego użyj zdarzenia dokumentu beforeunload.
chrome.tabs.getAllInWindow() chrome.tabs.query()
chrome.tabs.getSelected() chrome.tabs.query()
chrome.tabs.onActiveChanged chrome.tabs.onActivated
chrome.tabs.onHighlightChanged chrome.tabs.onHighlighted
chrome.tabs.onSelectionChanged chrome.tabs.onActivated
chrome.tabs.sendRequest() chrome.runtime.sendMessage()
chrome.tabs.Tab.selected chrome.tabs.Tab.highlighted