Use Chrome extension to unlock click events?

Question

I am trying to make an extension that unbinds the click event added by the site itself.

The site uses jQuery, which would make it insanely simple:

jQuery('a[rel]').unbind('click'); 

The problem is that my extension (using "content_scripts") cannot access the jQuery object of the website and therefore does not have event functions to unleash. I can include jQuery in my extension, but that did not help, because jQuery stores the "data" in the jQuery object (and not in the DOM elements). My jQuery will not save these events.

Is there another way? It does not have to be beautiful. Maybe without "content_scripts"?

Answer 1

 var unbind_event_listeners = function (node) { var parent = node.parentNode; if (parent) { parent.replaceChild(node.cloneNode(true), node); } else { var ex = new Error("Cannot remove event listeners from detached or document nodes"); ex.code = DOMException[ex.name = "HIERARCHY_REQUEST_ERR"]; throw ex; } }; 

Just call unbind_event_listeners(a_node) to unlock any listeners from node. This will work on every node in the document except document . As for window , you're out of luck. unbind_event_listeners(document.documentElement) should remove most event listeners attached to nodes in the document.

In the case of a[rel] you should do this:

 var nodes = document.querySelectorAll("a[rel]"), i = nodes.length; while (i--) { unbind_event_listeners(nodes.item(i)); } 

Answer 2

If you don’t need to be beautiful, and you can do something slightly hacked, this should forcibly untie every click listener associated with this element:

 var el = document.querySelector('a[rel]'); el.onclick = function() {}; el.addEventListener = function() {}; 

or for each item:

 Array.prototype.slice.call(document.querySelectorAll('a[rel]')).forEach(function(el) { el.onclick = function() {}; el.addEventListener = function() {}; }); 

EDIT: Perhaps you can do something even uglier and have a script content for "document_start" and do:

 Element.prototype.addEventListener = (function() { var real = Element.prototype.addEventListener; return function(ev) { if (ev === 'click' && this.tagName === 'A' && this.hasAttribute('rel')) { console.log('try again, jquery!'); } else { return real.apply(this, arguments); } }; })();