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

u7up0aaq 于 5个月前发布在其他

关注(0)|答案(1)|浏览(46)

如何在manifiest v3中使用新的insertCSS和removeCSS？文档对我没有帮助，也没有给予一些例子。
我有一个CSS文件，我想注入它在页面中，并删除它
代码如下：

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

字符串

错误日志：

未捕获的类型错误：调用scripting.removeCSS时出错（scripting.CSSInjection injection injection，optional function callback）：参数“injection”处出错：意外属性：HTMLSelectElement处的“injection”。（background.js：10：22）

css

来源：https://stackoverflow.com/questions/71115113/how-to-use-the-new-insertcss-and-removecss-in-manifiest-v3

1条答案

按热度按时间

ddrv8njm1#

我解决了！
使用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');
  }
});

型

赞(0）回复(0）举报 5个月前

我来回答

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

background.js

错误日志：

1条答案

代码

相关问题

热门标签

最新问答