¿Cómo usar el nuevo insertCSS y removeCSS en manifiest v3? los documentos no me ayudan y no dieron ningún ejemplo al respecto.
Tengo un archivo CSS que quiero inyectarlo en la página y eliminarlo.
el codigo algo como esto:
document.getElementById('chat').addEventListener('change', (e) => { var chat = e.path[0].value; // inject css file let css = document.createElement('link'); css.rel = 'stylesheet'; css.type = 'text/css'; css.href = 'css/chat-rtl.css'; if (chat == 'rtl') { chrome.scripting.insertCSS({ injection: { css } }); // i know it is wrong syntax console.log('rtl'); } else { chrome.scripting.removeCSS({ injection: { css } }); // i know it is wrong syntax console.log('ltr'); } });TypeError no detectado: error en la invocación de scripting.removeCSS (scripting.CSSInjection injection, devolución de llamada de función opcional): error en el parámetro 'injection': propiedad inesperada: 'injection'. en HTMLSelectElement. (fondo.js:10:22)
lo soluciono!
La sintaxis correcta para usar insertCSS es:
chrome.scripting.insertCSS({ target: { tabId: tab.id }, files: ['css/chat-rtl.css'], }); y para obtener la tab , haga la función Función asíncrona y use:
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); document.getElementById('chat').addEventListener('change', async (e) => { var chat = e.path[0].value; // inject css file const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); if (chat == 'rtl') { chrome.scripting.insertCSS({ target: { tabId: tab.id }, files: ['css/chat-rtl.css'], }); console.log('rtl'); } else { chrome.scripting.removeCSS({ target: { tabId: tab.id }, files: ['css/chat-rtl.css'], }); console.log('ltr'); } });