如何在manifyst v3中使用新的insertCSS和removeCSS

Question

如何使用manifyst v3中新的insertCSS和removeCSS？ 这些文档对我没有帮助，也没有给出一些例子。

我有一个 CSS 文件，我想将其注入页面中并将其删除

代码是这样的：

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

错误日志：

未捕获的类型错误：调用 scripting.removeCSS 时出错（scripting.CSSInjection 注入，可选函数回调）：参数“注入”错误：意外的属性：“注入”。 在 HTMLSelectElement 处。 (背景.js:10:22)

Answer 1

我解决了！

正确的语法是使用

insertCSS

是：

chrome.scripting.insertCSS({
  target: { tabId: tab.id },
  files: ['css/chat-rtl.css'],
});

并获得

tab

使该函数成为异步函数并使用：

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