StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to toggle actions of a browser action?
text
Body
copied!<p>I have created my first chrome extension which adds event handlers to all the anchor elements on the page on clicking. If the user clicks the icon second time the event handlers are reattached to the anchor elements and are executed twice. What I need following</p> <ul> <li>Click the browser action.</li> <li>Add the events to the anchor elements</li> <li>If possible give a visual cue in the browser action icon that the extension is active currently.</li> <li>Clicking again on the extension should remove the event handlers and again shows the extension icon as disabled.</li> </ul> <p>Is this possible?</p> <p>Following is what I have tried till now.</p> <p><strong>manifest.json</strong></p> <pre><code>{ "name":"NameExtension", "version":"1.0", "description":"Here goes the description", "manifest_version":2, "browser_action":{ "default_icon":"16x16.png" }, "background":{ "scripts":["background.js"] }, "permissions":[ "tabs","http://*/*","https://*/*" ] } </code></pre> <p><strong>background.js</strong></p> <pre><code>chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript(null, {file: "contentscript.js"}); }); </code></pre> <p><strong>contentscript.js</strong></p> <pre><code>var all = document.getElementsByTagName('a'); for(var i=0; i<all.length;i++){ all[i].addEventListener('click',myHandler, false); } myHandler = function(event){ alert(event.target.innerText); } </code></pre> <p>I would want the above handler to be toggled on anchors as the extension_browser_action is clicked and re-clicked. Also if the extension_browser-action_icon can give some visual feedback regarding the state.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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