Estoy tratando de crear una extensión de Chrome que pueda crear dinámicamente ContextMenu en función de la información de almacenamiento. Cada menú creado tiene su propia clave y realizará algunas acciones y luego enviará un mensaje a Content.js para mostrar el cuadro de información en la página si se hace clic en él.
El menú se actualizará si el usuario selecciona algunas opciones en la página Opciones. Options.js enviará un mensaje a background.js, background.js actualiza el almacenamiento y luego actualiza el menú.
El comportamiento del menú funciona bien después de cargar la extensión. Pero ya no funciona después de unos minutos. Si abro una consola de trabajador de servicio, puede permanecer más tiempo, pero finalmente no responde cuando hago clic en el botón de menú. Además, si activo la actualización del menú desde la página de opciones, el botón vuelve a funcionar. Pero aún falló después de unos minutos.
Investigué un poco y descubrí que parece que background.js se cancelará muy pronto después de que se haya cargado. Así que dudo que cause este problema. Pero, ¿cómo es que el oyente de menú agregado no funciona después de eso? El oyente ya debería estar agregado, ¿no es así?
Fondo.js
function eventListener(message, sender, sendResponse) { if (message.event === "updateMenu") { updateMenu(); sendResponse({ result: "update menu completed" }); } } function updateMenu() { chrome.storage.local.get("currencyMappings", function (result) { prepareContextMenuBySetting(result.currencyMappings); }); } function prepareContextMenuBySetting(mappings) { chrome.contextMenus.removeAll(); chrome.contextMenus.create( { id: "rootMenu", title: "%s", contexts: ["selection"] }, function () { if (chrome.extension.lastError) { console.log("Got expected error: " + chrome.extension.lastError.message); } }); mappings.forEach(map => { currencies = map.split("|"); chrome.contextMenus.create( { id: `${currencies[0]}to${currencies[1]}`, title: `${currencies[0]} => ${currencies[1]}`, type: "normal", parentId: "rootMenu", contexts: ["selection"] }); }) chrome.contextMenus.onClicked.addListener( (info, tab) => { let rate = null; rateKey = info.menuItemId.split("to"); makeExchange(rateKey, info) } ); }Actualizar : el registro se mostrará cuando la función esté funcionando. Pero no hubo ningún inicio de sesión en la consola cuando la acción del botón no funciona. Evento tanto Server Worker como consola de página.
Descubro la posible razón. De acuerdo con https://developer.chrome.com/docs/extensions/mv2/background_pages/#listeners , es posible que no funcione agregar un oyente en la función de oyente.
La causa raíz es que backgound.js se cancelará en poco tiempo. Solo mantenga el oyente raíz. Después de que se termina backgound.js, el oyente en mi botón de menú ya no funciona.
Además, el background.js en realidad vuelve a funcionar si se llama al oyente raíz. Ex.
chrome.runtime.onMessage.addListener(eventListener); agregué un console.log() en la parte superior de background.js y controlé la consola. Después de que Service Worker no esté disponible, lo que significa que backgroud.js está cerrado, entonces envío un mensaje a background.js. Se activará console.log().
La solución de mi problema es agregar el oyente del menú al nivel raíz.
chrome.contextMenus.onClicked.addListener( (info, tab) => { console.log("item clicked"); let rateKey = info.menuItemId.split("to"); makeExchange(rateKey, info) } );Luego, una vez que se active background.js, se configurará el botón de escucha.