es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

chrome.action no está definido, migrando al manifiesto v3.

11 Jul, 2023 Programación

Estoy tratando de migrar una extensión de la versión 2 al manifiesto de la versión 3.

Mi objetivo es que al hacer clic en el ícono de la extensión se abra la página de opciones.

Ahora revisé la guía de migración.

Entonces, en la versión 2 (funciona) se utiliza chrome.browserAction.onClicked.addListener. Y la guía me dice que en la versión 3 debo usar chrome.action.onClicked.addListener.

Entonces hice un manifiesto:

{
  "manifest_version": 3,
  "version": "0.0.3",
  "name": "Live_option_page",
  "description": "construir página de opciones en vivo con Vuetify 3",
  "minimum_chrome_version": 93,
  "icons": {
    "16": "images/16x16.png"
  },
  "action": {
    "default_icon": "images/16x16.png"
  },
  "background": {
    "service_worker": "background/index.js"
  },
  "web_accessible_resources": [{
    "resources": ["/options/*"],
    "matches": ["<all_urls>"]
  }],
  "options_ui": {
    "page": "options/index.html",
    "open_in_tab": true
  },
  "permissions": [
    "activeTab",
    "tabs",
    "browser_action"
  ]
}

Ahora tengo un service_worker /background/index.js

const API = chrome || browser;

console.log(API.action) // => imprimirá undefined

API.action.onClicked.addListener((tab) => {
    console.log("icono clicado en la pestaña ", tab);
    API.tabs.create({url: "options/index.html"});
})

Entonces el Service Worker se bloqueó y chrome.action es indefinido.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para migrar de v2 a v3 del manifiesto y abrir la página de opciones al hacer clic en el ícono de la extensión, debes actualizar el código de la siguiente manera:

    1. Actualiza el archivo del manifiesto con la nueva clave de acción.
    2. Reemplaza chrome.browserAction.onClicked.addListener con chrome.action.onClicked.addListener en el archivo service_worker/background/index.js.

    Aquí está el archivo del manifiesto actualizado:

    {
  "manifest_version": 3,
  "version": "0.0.3",
  "name": "Live_option_page",
  "description": "construye página de opciones en vivo con Vuetify 3",
  "minimum_chrome_version": 93,
  "icons": {
    "16": "images/16x16.png"
  },
  "action": {
    "default_icon": "images/16x16.png"
  },
  "background": {
    "service_worker": "background/index.js"
  },
  "web_accessible_resources": [{
    "resources": ["/options/*"],
    "matches": ["<all_urls>"]
  }],
  "options_ui": {
    "page": "options/index.html",
    "open_in_tab": true
  },
  "permissions": [
    "activeTab",
    "tabs",
    "scripting"
  ]
}

    Y aquí está el archivo service_worker/background/index.js actualizado:

    const API = chrome || browser;

API.action.onClicked.addListener((tab) => {
  console.log("icono clicado en la pestaña ", tab);
  API.tabs.create({ url: "options/index.html" });
});

    Asegúrate de recargar la extensión después de realizar los cambios.

Comments are closed.