打开和关闭Chrome扩展程序

Question

It seems to be the simplest task, but I'm having a hard time with it... I want to open my extension by clicking the extension icon, not every time a new tab opens. I also want to close it fully when the icon is pressed. I insert an iframe into the website's DOM, it's not a standard popup. Right now I'm hiding it, whenever the icon is clicked, but it still inserts the iframe whenever a new page/tab is loaded. I tried removing the iframe, which works, but triggers the content_script every time I re-insert it, re-scraping the website and adding to the array, which makes the TTS repeat words for every time that the extension has been reopened.

Manifest:

  {
  "manifest_version": 2,
  "name": "Caliban",
  "description": "Chrome extension that reads text aloud",
  "version": "1.0",
  "permissions": [
    "tabs",
    "storage",
    "<all_urls>",
    "tts"
  ],
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "js/translations.js",
        "js/enums.js",
        "js/element-wrapper.js",
        "js/content_script.js"
      ],
      "css": [
        "css/parent.css"
      ]
    }
  ],
  "background": {
    "scripts": [
      "js/translations.js",
      "js/enums.js",
      "js/element-wrapper.js",
      "js/background.js"
    ]
  },
  "browser_action": {
    "default_icon": "img/icon.png",
    "default_title": "Caliban"
  },
  "web_accessible_resources": [
    "css/*.css",
    "images/*.png",
    "images/*.svg",
    "popup.html"
  ]
}

content_script.js:

function createIFrame()
{
    iframe.style.position = "fixed";
    iframe.style.height = "300px";
    iframe.style.top = "0px";
    iframe.style.right = "0px";
    iframe.style.zIndex = "9000000000000000000";
    iframe.frameBorder = "1"; //temporary, so we can see the bounds while developing.
    iframe.overflow = "hidden";
    iframe.id = "CalibanMainUI";
    iframe.src = chrome.extension.getURL("popup.html");

    body.appendChild(iframe);
}

This function is called at the start of content_script.js. Also in content_script, I use below function to hide/show, but was used before to create/remove iframe.

function toggleIFrame() {
    if (isFrameOpen === true)
    {
        iframe.style.display = "none";
        isFrameOpen = false;
    }
    else
    {
        iframe.style.display = "initial";
        isFrameOpen = true;
    }

What I'm looking for is:

1. Open: User-controlled, not new tab-controlled. Create and insert iframe, scrape website.
2. Close: Remove iframe, unload scripts, release variables.

Does any such thing exist in boilerplate ? Or do I need to manually code these seemingly standard requirements?

I'll be happy to provide more code if needed.

Answer 1

Instead of injecting the content scripts through manifest "content_scripts" key, inject them manually through chrome.tabs.executeScript in the background page in response to chrome.browserAction.onClicked .

This way you control when to inject them and can also implement the logic to disable them if they were already injected (left as an exercise for the reader :)