将 HTML 添加到 Chrome 扩展中的 DOM 后，通过单击浏览器操作删除它？

Question

我想创建类似 Font Face Ninja 的内容，我在其中单击浏览器操作并加载 UI 并在再次单击后删除 UI。

我的最小复制如下-

manifest.json

{
  "manifest_version": 2,
  "name": "Sample",
  "version": "1.0.0",
  "description": "Sample Extension",
  "icons": {
    "16": "icon16.png",
    "32": "icon32.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {},
  "permissions": ["activeTab", "https://*/*", "http://*/*"]
}

content.js

const body = document.getElementsByTagName('body')[0]

const div = document.createElement('div')
div.innerHTML = `<h1>Sample Extension</h1>`
body.appendChild(div)

background.js

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

以上示例将 <h1>Sample Extension</h1> 附加到任何页面。这是我的 UI.

我想在再次单击浏览器操作时删除它。我该怎么做？

Answer 1

HTML 可以通过在 content.js 中执行 body.removeChild(div) 轻松删除。

但是，我希望它可以切换，这必须使用消息传递来完成，所以我发布了一个解决方案以使其可以切换，因此它在单击一次时将 HTML 添加到 DOM 并在单击时将其删除再次等等。

在这里找到解决方案 →

我还上传了包含 Browser Action 和 Page Action 的 repo（检查分支 page_action) 到 Github → https://github.com/deadcoder0904/insert-remove-ui-chrome-extension/

将 HTML 添加到 Chrome 扩展中的 DOM 后，通过单击浏览器操作删除它？

Remove HTML via clicking Browser Action after adding it to DOM in Chrome Extension?

javascript

firefox-addon

browser-extension

google-chrome-extension

manifest.json

content.js

background.js