CODEWITHSUNDEEP
javascriptgoogle-chromeiframegoogle-chrome-extension
Silvio Langereis
Silvio Langereis

Reputation: 471

Opening and closing chrome extension

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.

Upvotes: 0

Views: 293

Answers (1)

Iv&#225;n Nokonoko
Iv&#225;n Nokonoko

Reputation: 5118

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 :)

Upvotes: 1

Related Questions