browser.tabs.removeCSS在Chrome扩展中不能工作吗？

Question

我希望在单击browserAction时能够添加全局CSS，而再次单击browserAction时可以删除相同的全局css。

这些是我的文件内容。

background.js

import browser from 'webextension-polyfill'
let hasInserted = false
const css = `* {font-family: redactedregular !important;}`

browser.browserAction.onClicked.addListener(function(tab) {
  if (!hasInserted) browser.tabs.insertCSS(tab.id, { code: css })
  else browser.tabs.removeCSS(tab.id, { code: css })
  hasInserted = !hasInserted
})

manifest.json

{
  "manifest_version": 2,
  "name": "Redact The Web",
  "offline_enabled": true,
  "version": "1.0.0",
  "description": "Extension that redacts text on the web",
  "icons": {
    "16": "icon16.png",
    "19": "icon19.png",
    "24": "icon24.png",
    "32": "icon32.png",
    "38": "icon38.png",
    "48": "icon48.png",
    "64": "icon64.png",
    "128": "icon128.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {},
  "permissions": ["activeTab", "https://*/*", "http://*/*"]
}

问题是CSS会被插入，但如果我再次点击，它不会被删除。我该怎么解决呢？

Answer 1

从技术上讲，这不是答案，因为它是bugs.chromium.org上的一个open issue，但我设法使用了另一种技术@wOxxOm让我的代码工作，在上面的评论中提到。

我将CSS作为link插入并删除了它。要点如下：

background.js

import browser from 'webextension-polyfill'
let hasInserted = false

browser.browserAction.onClicked.addListener(function(tab) {
  browser.tabs.executeScript({ file: 'content.js' })

  if (!hasInserted) {
    browser.tabs.sendMessage(tab.id, {
      command: 'insertCSS',
    })
  } else {
    browser.tabs.sendMessage(tab.id, {
      command: 'removeCSS',
    })
  }
  hasInserted = !hasInserted
})

content.js

import browser from 'webextension-polyfill'

function insertCSS(file) {
  const style = document.createElement('link')
  style.rel = 'stylesheet'
  style.type = 'text/css'
  style.href = browser.extension.getURL('style.css')
  style.id = file
  document.getElementsByTagName('html')[0].appendChild(style)
}

function removeCSS(file) {
  const cssNode = document.getElementById(file)
  cssNode && cssNode.parentNode.removeChild(cssNode)
}

browser.runtime.onMessage.addListener(message => {
  const id = 'redact-the-web'
  if (message.command === 'insertCSS') {
    insertCSS(id)
  } else if (message.command === 'removeCSS') {
    removeCSS(id)
  }
})

manifest.json

{
  "manifest_version": 2,
  "name": "Redact The Web",
  "offline_enabled": true,
  "version": "1.0.0",
  "description": "Extension that redacts text on the web",
  "icons": {
    "16": "icon16.png",
    "19": "icon19.png",
    "24": "icon24.png",
    "32": "icon32.png",
    "38": "icon38.png",
    "48": "icon48.png",
    "64": "icon64.png",
    "128": "icon128.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {},
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_start"
    }
  ],
  "web_accessible_resources": ["style.css"],
  "permissions": ["https://*/*", "http://*/*"]
}

我在GitHub https://github.com/deadcoder0904/redact-the-web→上开源了整个代码。