Actualizaciones que no están relacionadas con otros problemas
Esta es la primera de tres secciones en las que se describen los cambios necesarios para el código que no forma parte del service worker de extensión. En esta sección, se describen los cambios de código necesarios que no están relacionados con otros problemas. En las siguientes dos secciones, se explica cómo reemplazar el bloqueo de solicitudes web y cómo mejorar la seguridad.
Reemplaza tab.executeScript() por scripting.executeScript()
En Manifest V3, executeScript()
pasa de la API de tabs
a la API de scripting
. Esto requiere cambios en los permisos del archivo de manifiesto, además de cambios reales en el código.
Para el método executeScript()
, necesitas lo siguiente:
- El permiso
"scripting"
. - Los permisos de host o el permiso
"activeTab"
El método scripting.executeScript()
es similar a cómo funcionaba con tabs.executeScript()
. Hay algunas diferencias.
- Si bien el método anterior solo podía tomar un archivo, el nuevo puede tomar un array de archivos.
- También pasas un objeto
ScriptInjection
en lugar deInjectDetails
. Hay varias diferencias entre ambos. Por ejemplo,tabId
ahora se pasa como miembro deScriptInjection.target
, en lugar de como argumento del método.
En el ejemplo, se muestra cómo hacerlo.
async function getCurrentTab() {/* ... */} let tab = await getCurrentTab(); chrome.tabs.executeScript( tab.id, { file: 'content-script.js' } );
async function getCurrentTab() let tab = await getCurrentTab(); chrome.scripting.executeScript({ target: {tabId: tab.id}, files: ['content-script.js'] });
Reemplaza tab.insertCSS() y tab.removeCSS() con scripting.insertCSS() y scripting.removeCSS()
En Manifest V3, insertCSS()
y removeCSS()
pasan de la API de tabs
a la API de scripting
. Esto requiere cambios en los permisos del archivo de manifiesto, además de cambios en el código:
- El permiso
"scripting"
. - Los permisos de host o el permiso
"activeTab"
Las funciones de la API de scripting
son similares a las funciones de tabs
. Hay algunas diferencias.
- Cuando llamas a estos métodos, pasas un objeto
CSSInjection
en lugar deInjectDetails
. - Ahora se pasa
tabId
como miembro deCSSInjection.target
, en lugar de como argumento del método
En el ejemplo, se muestra cómo hacerlo para insertCSS()
. El procedimiento para removeCSS()
es el mismo.
chrome.tabs.insertCSS(tabId, injectDetails, () => { // callback code });
const insertPromise = await chrome.scripting.insertCSS({ files: ["style.css"], target: { tabId: tab.id } }); // Remaining code.
Reemplaza las acciones del navegador y las acciones de la página por acciones
Las acciones del navegador y las acciones de la página eran conceptos separados en Manifest V2. Si bien comenzaron con roles distintos, las diferencias entre ellos disminuyeron con el tiempo. En Manifest V3, estos conceptos se consolidan en la API de Action. Esto requiere cambios en tu manifest.json
y el código de la extensión que son diferentes de los que habrías puesto en la secuencia de comandos en segundo plano de Manifest V2.
Las acciones en Manifest V3 se parecen más a las acciones del navegador. Sin embargo, la API de action
no proporciona hide()
ni show()
como lo hizo pageAction
. Si aún necesitas acciones de la página, puedes emularlas con contenido declarativo o llamar a enable()
o disable()
con un ID de pestaña.
Reemplaza "browser_action" y "page_action" por "action".
En manifest.json
, reemplaza los campos "browser_action"
y "page_action"
por el campo "action"
. Consulta la referencia para obtener información sobre el campo "action"
.
{ ... "page_action": { ... }, "browser_action": { "default_popup": "popup.html" } ... }
{ ... "action": { "default_popup": "popup.html" } ... }
Reemplaza las APIs de exploreAction y pageAction con la API de Action
Cuando Manifest V2 usaba las APIs de browserAction
y pageAction
, ahora debes usar la API de action
.
chrome.browserAction.onClicked.addListener(tab => { ... }); chrome.pageAction.onClicked.addListener(tab => { ... });
chrome.action.onClicked.addListener(tab => { ... });
Reemplaza devoluciones de llamada por promesas
En Manifest V3, muchos métodos de API de extensión muestran promesas. Una Promise es un proxy o un marcador de posición para un valor que muestra un método asíncrono. Si nunca usaste las promesas, puedes leer más sobre ellas en MDN. En esta página, se describe lo que necesitas saber para usarlas en una extensión de Chrome.
Para ofrecer retrocompatibilidad, muchos métodos siguen admitiendo devoluciones de llamada después de que se agrega compatibilidad con promesas. Ten en cuenta que no puedes usar ambos en la misma llamada a función. Si pasas una devolución de llamada, la función no mostrará una promesa y, si quieres que se devuelva una promesa, no pases una devolución de llamada. Algunas funciones de la API, como los objetos de escucha de eventos, seguirán requiriendo devoluciones de llamada. Para verificar si un método admite promesas, busca la etiqueta "Promise" en la referencia de API.
Para convertir una devolución de llamada en una promesa, quita la devolución de llamada y controla la promesa que se muestra. El siguiente ejemplo se toma de la muestra de permisos opcionales, específicamente newtab.js
. La versión de devolución de llamada muestra cómo se vería la llamada de ejemplo a request()
con una devolución de llamada. Ten en cuenta que la versión de la promesa se puede volver a escribir con async y await.
chrome.permissions.request(newPerms, (granted) => { if (granted) { console.log('granted'); } else { console.log('not granted'); } });
const newPerms = { permissions: ['topSites'] }; chrome.permissions.request(newPerms) .then((granted) => { if (granted) { console.log('granted'); } else { console.log('not granted'); } });
Reemplaza las funciones que esperan un contexto en segundo plano de Manifest V2
Otros contextos de extensión solo pueden interactuar con los service workers de extensión mediante el transmisiones de mensajes. En consecuencia, deberás reemplazar las llamadas que esperan un contexto en segundo plano, específicamente:
chrome.runtime.getBackgroundPage()
chrome.extension.getBackgroundPage()
chrome.extension.getExtensionTabs()
Las secuencias de comandos de tu extensión deben usar la transmisión de mensajes para la comunicación entre un service worker y otras partes de tu extensión. Actualmente, esto implica usar sendMessage()
e implementar chrome.runtime.onMessage
en tu service worker de extensión. A largo plazo, deberías reemplazar estas llamadas por postMessage()
y el controlador de eventos de mensajes de un service worker.
Reemplaza las APIs no compatibles
Los métodos y las propiedades que se indican a continuación deben cambiar en Manifest V3.
Método o propiedad de Manifest V2 | Reemplazar con |
---|---|
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 |
Cuando los métodos muestran promesas, usa 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.onRequest |
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 (secuencias de comandos en segundo plano) |
No se admite en los service workers de extensión. En su lugar, usa el evento de documento 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 |