how to use the new insertCSS and removeCSS in manifiest v3

Issue

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:

background.js

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');
  }
});

error log:

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)

Solution

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 });

code

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-ltr.css'],
    });
    console.log('ltr');
  }
});

Answered By - Ahmed El-Tabarani