Tengo algunos estilos de elementos simples que me gustaría cambiar con una extensión de Chrome.

Solo quiero cambiar el valor del ancho de 10em a 20em, por ejemplo. También me gustaría poder deshacer el cambio o poder ingresar el valor desde la ventana emergente.

 #mw-panel { position: absolute; top: 0; width: 10em; left: 0; }

Eliminé el archivo styles.css del archivo manifest.json y también agregué el archivo css al archivo manifest.json con la esperanza de poder habilitar/deshabilitar el CSS con los botones emergentes.

 "web_accessible_resources": [ { "resources": ["styles.css"], "matches": ["https://en.wikipedia.org/*"] } ]

Tengo una extensión de trabajo con archivos emergentes HTML y js. Intenté usar insertCSS en content.js, pero leí que no funcionará desde allí, pero debería hacerlo desde un archivo js emergente o de fondo. Esperaba usar también la función removeCSS.

También leí que con algunas de las formas en que puede cargar un archivo CSS, el modificador !important no funcionará. Así que todo esto puede ser por no.

Actualmente no puedo pasar este error después de hacer clic en el botón emergente: Respuesta de manejo de error: TypeError: No se pueden leer las propiedades de undefined (leyendo 'insertCSS')

 $('.format').click(function() { chrome.tabs.query({currentWindow: true, active: true}, function (tabs){ var activeTab = tabs[0]; chrome.scripting.insertCSS({ target: { tabId: activeTab.id }, file: ["styles.css"] }); /*chrome.tabs.sendMessage(activeTab.id, {"buttonclicked": "wider"});*/ });