css - 如何在浏览器扩展中注入带有用户来源的 CSS？

Question

我有一个非常简单的扩展：

{
  "manifest_version": 2,
  "name": "User Style Sheet Workaround",
  "version": "1",

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["default.css"]
    }
  ]
}

我想default.css被注入作为用户来源，而不是作为作者来源。我该怎么做？

Answer 1

在后台脚本的URL 更改事件中使用chrome.tabs.insertCSS 。cssOrigin: 'user'

例如，chrome.webNavigation.onCommitted（需要webNavigation权限）或 chrome.tabs.onUpdated（不需要任何特殊权限）。

应将允许 CSS 注入的目标站点添加到permissions.

清单.json：

{
  "manifest_version": 2,
  "name": "User Style Sheet Workaround",
  "version": "1",

  "background": {
    "scripts": ["bg.js"]
  },
  "permissions": ["<all_urls>"]
}

bg.js：

chrome.tabs.onUpdated.addListener((tabId, info) => {
  if (info.status === 'loading') {
    chrome.tabs.insertCSS(tabId, {
      file: 'style.css',
      cssOrigin: 'user',
      runAt: 'document_start',
      // allFrames: true,
      // matchAboutBlank: true,
    }, () => chrome.runtime.lastError); // ignoring errors
  }
});