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

这在技术上不是答案，因为它是一个 open issue on bugs.chromium.org 但我设法使用另一种技术使我的代码工作 @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

browser.tabs.removeCSS 在 Chrome 扩展中不起作用？

browser.tabs.removeCSS is not working in Chrome extension?

javascript

css

browser-extension

google-chrome-extension

firefox-addon-webextensions

background.js

manifest.json

background.js

content.js

manifest.json