Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p><strong><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window.close" rel="nofollow"><code>window.close()</code></a></strong> is for closing a window, so no wonder it does not work.</p> <p>"Unloading" a content-script is not possible, but if you want to remove an element (e.g. your <code>div</code>) from the DOM, just do:</p> <pre><code>elem.parentNode.removeChild(elem); </code></pre> <p><sub>(Whether you bind this behaviour to a link/button in your <code>&lt;div&gt;</code> 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.)</sub></p> <hr> <p>If you, also, want your script to stop performing some other operation (e.g. handling <code>click</code> events) you could (among other things) set a flag variable to <code>false</code> (when removing the <code>&lt;div&gt;</code>) and then check that flag before proceeding with the operation (e.g. handling the event):</p> <pre><code>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; </code></pre> <hr> <p>Notes:</p> <ul> <li><p>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.</p></li> <li><p>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 <code>&lt;div&gt;</code> instead of removing it (e.g.: <code>div.style.display = 'none';</code>).</p></li> <li><p>If you only need to disable event handler, instead of using the <code>enabled</code> flag, it is probably more efficient to keep a reference to the listener you want to disable and call <strong><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.removeEventListener" rel="nofollow"><code>removeEventListener()</code></a></strong>.</p></li> </ul> <p>E.g.: </p> <pre><code>function clickListener(evt) { evt.preventDefault(); ... } document.addEventListener('click', clickListener); /* In order to "disable" the content-script: */ div.parentNode.removeChild(div); document.removeEventListener('click', clickListener); </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload