Search code examples
javascriptgoogle-chrome-extensiondom-eventsuserscriptsclonenode

Access/Copy/Clone an Element’s Event Listeners (or Edit the lineNumber and sourceName)

Scenario

I’m writing a Chrome extension / userscript to add a little usability to a third-party site. The page that the extension is made for has a few elements that have `click` event listeners attached (per-element, no bubbling) via `addEventListener` (the `onclick` and other properties are empty). My extension clones (`cloneNode`) one of the elements and appends it to the list.

For example with this,

<div id="list">
  <div id="d1">A</div>
  <div id="d2">B</div>
  <div id="d3">C</div>
</div>

my extension would add a D element.

Problem

Extending the list works fine, but when the original nodes are clicked, they perform the expected action, while clicking the new one does nothing.

Tests

Test 1

I examined the event listeners of the elements in Chrome’s Developer Tools and tried copying the anonymous function to my new elements with `addEventListener` (making sure to duplicate the parameters), but that did not work. It did perform some of the expected actions, but not all of them.

Test 2

I tried anfilat’s suggestion of using the trick from [this question][1]. I inserted a `script` block that then called `addEventHanlder` for the new node, and it did indeed have the new handler (with a `sourceName` referring to the site—the page, not the `.JS` file—instead of the extension), however it still threw a variable not found error.

Hypothesis

I suspect that it is a domain issue because the click-handler calls a function in an external `.JS` as referenced in the `sourceName` and `lineNumber` of the event listener as seen below. Note that the `listenerBody` is identical, but the sources differ.

Question

Is there a way to access, copy, or clone the handlers of an element and/or edit the `lineNumber` and `sourceName`?

Appendix A: Diagrams

Figure 1: Handlers of original elements referring to a .JS on the site (with slight filename edits):

Site

Figure 2: Handlers of new elements referring to the extension:

Extension

Solution

  • I wrote the small working test.

    Crome extension inject script:

    var myScriptElement = document.createElement('script'); 
myScriptElement.innerHTML =
  'b=document.getElementById("button");' +
  'c=b.cloneNode(true);' +
  'b.parentElement.appendChild(c);' +
  'c.addEventListener("click", function(e){foo("from new button")}, false);';
document.querySelector('head').appendChild(myScriptElement);

    test html:

    <html>
<script type='text/javascript' src='test.js'></script>
<body>
<button id='button'>test</button>
<script>
document.getElementById('button').addEventListener('click', function (event) {
  foo('from page');
}, false);
</script>
</body>
</html>

    and test.js:

    function foo(text) {
  console.log(text);
};