Stopping content script in chrome extension

Question

I have developed chrome extension , I have added , ``` chrome.browserAction.onClicked.addListener ``` which will start the script once clicked on , the script in turn will add a div at the bottom of the web page on the tab the browser action is clicked , All I have to do is , I need to add a close link which will stop the content script and close the div at the bottom , I have tried windows.close() , self.close() but nothing seems to work ,I would atleast want it to work in a way that 2nd time some one clicks on browser action, the script should stop. Here is my code, background.js ``` chrome.browserAction.onClicked.addListener( function() { chrome.tabs.executeScript( { file: 'myscript.js' } ); }); ``` myscript.js ``` document.body.appendChild(div); document.addEventListener("click", function (e) { e.preventDefault(); var check = e.target.getAttribute("id"); var check_class = e.target.getAttribute("class"); if(check=="ospy_" || check=="ospy_id" || check=="ospy_text" || check=="ospy_el…

Accepted Answer

`window.close()` is for closing a window, so no wonder it does not work. "Unloading" a content-script is not possible, but if you want to remove an element (e.g. your `div`) from the DOM, just do: ``` elem.parentNode.removeChild(elem); ``` (Whether you bind this behaviour to a link/button in your `

` or have the browser-action, trigger an event in the background-page that sends a message to the corresponding content-script which in turn removes the element is up to you. (But clearly the former is much more straight-forward and efficient.) If you, also, want your script to stop performing some other operation (e.g. handling `click` events) you could (among other things) set a flag variable to `false` (when removing the `

`) and then check that flag before proceeding with the operation (e.g. handling the event): ``` var enabled = true; document.addEventListener('click', function (evt) { if (!enabled) { /* Do nothing */ return; } /* I am 'enabled' - I'll handle this one */ evt.preventDefault(); ... /* In order to "disable" the content-script: */ div.parentNode.removeChild(div); enabled = false; ``` Notes: If you plan on re-enabling the content-script upon browser-action button click, it is advisable to implement a little mechanism, where the background-page sends a message to the content-script asking it to re-enable itself. If the content-script is indeed injected but disabled, it should respond back (to confirm it got the message) and re-enable itself. If there is no response (meaning this is the first time the user clicks the button on this page, the background-page injects the content script. If it is likely for the content script to be enabled-disabled multiple times in a web-pages life-cycle, it would be more efficient to "hide" the `

` instead of removing it (e.g.: `div.style.display = 'none';`). If you only need to disable event handler, instead of using the `enabled` flag, it is probably more efficient to keep a reference to the listener you want to disable and call `removeEventListener()`. E.g.: ``` function clickListener(evt) { evt.preventDefault(); ... } document.addEventListener('click', clickListener); /* In order to "disable" the content-script: */ div.parentNode.removeChild(div); document.removeEventListener('click', clickListener); ```

Stopping content script in chrome extension

Solution

Problem