browser.tabs.removeCSS не работает в расширении Chrome?

Question

Я хочу иметь возможность добавить глобальный CSS при нажатии browserAction и удалить тот же глобальный css при повторном нажатии browserAction.

Это содержимое моего файла.

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 , но мне удалось заставить мой код работать, используя другую технику @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