如何在浏览器扩展中注入 CSS 用户来源？

Question

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

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

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

我希望 default.css 作为 user origin, not as author origin 注入。我该怎么做？

Answer 1

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

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

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

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

如何在浏览器扩展中注入 CSS 用户来源？

How to inject CSS with user origin in a browser extension?

css

google-chrome-extension

css-cascade