how to use the new insertCSS and removeCSS in manifiest v3? the docs don't help me and didn't give some example on that.
I have a CSS file that I want to inject it in the page and remove it
the code something like this:
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');
}
});
Uncaught TypeError: Error in invocation of scripting.removeCSS(scripting.CSSInjection injection, optional function callback): Error at parameter 'injection': Unexpected property: 'injection'. at HTMLSelectElement. (background.js:10:22)
I solve it!
The right syntax was to use insertCSS is:
chrome.scripting.insertCSS({
target: { tabId: tab.id },
files: ['css/chat-rtl.css'],
});
and to get tab make the function Asynchronous function and 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');
}
});