I’m injecting CSS using somethings like that:
const CSS = `
body * {
/*CSS transition*/
transition: none !important;
/*CSS animations*/
animation: none !important;
}
`;
browser.tabs.insertCSS(tab.id, { code: CSS, cssOrigin: 'user' });
(full code on https://github.com/gagarine/no-transition/blob/master/background.js )
The problem is insertCSS doesn’t seem to take !important into account. At least some animation are still playing because it seem the website CSS can overwrite the CSS I’m injecting.
Is their a better approach to inject CSS? I like insertCSS because you can remove the CSS easely without reloading with browser.tabs.removeCSS. It’s also works from background.js.
The add-on is published, so you can quickly install if if you want https://addons.mozilla.org/en-US/firefox/addon/no-transition/