0

设想

我正在编写一个 Chrome 扩展程序/用户脚本来为第三方网站添加一点可用性。扩展的页面有一些元素通过 `addEventListener` 附加了`click` 事件监听器（每个元素，没有冒泡）（`onclick` 和其他属性为空）。我的扩展克隆（`cloneNode`）其中一个元素并将其附加到列表中。

例如有了这个，

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

我的扩展会添加一个 D 元素。

问题

扩展列表可以正常工作，但是当单击原始节点时，它们会执行预期的操作，而单击新节点则不会执行任何操作。

测试

测试 1

我检查了 Chrome 开发者工具中元素的事件侦听器，并尝试使用 `addEventListener` 将匿名函数复制到我的新元素中（确保复制参数），但这不起作用。它确实执行了一些预期的操作，但不是全部。

测试 2

我尝试了 anfilat 的建议，即使用 [this question][1] 中的技巧。我插入了一个 `script` 块，然后为新节点调用了 `addEventHanlder`，它确实有新的处理程序（使用 `sourceName` 指的是站点 - 页面，而不是 `.JS` 文件 - 而不是扩展名），但是它仍然抛出了一个未找到变量的错误。

假设

我怀疑这是一个域问题，因为点击处理程序调用了外部“.JS”中的函数，如下所示，事件侦听器的“sourceName”和“lineNumber”中引用了该函数。请注意，`listenerBody` 是相同的，但来源不同。

问题

有没有办法访问、复制或克隆元素的处理程序和/或编辑“lineNumber”和“sourceName”？

附录 A：图表

图 1：网站上引用 a 的原始元素的处理程序.JS（文件名稍作修改）：

地点

图 2：引用扩展的新元素的处理程序：

延期

4

1 回答 1

1

我写了一个小的工作测试。

Crome 扩展注入脚本：

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);

测试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>

和 test.js：

function foo(text) {
  console.log(text);
};
于 2012-02-12T08:36:37.067 回答