使用 Chrome 扩展的 onclick 事件将按钮插入 DOM答案

【问题标题】：Inserting a button into the DOM with an onclick event for Chrome extension使用 Chrome 扩展的 onclick 事件将按钮插入 DOM
【发布时间】：2015-12-25 06:31:17
【问题描述】：

我正在编写一些平安夜编码，需要一些帮助。我正在尝试创建一个 Chrome 扩展程序，我可以在突出显示一些文本后将一个按钮插入到 DOM 中。逻辑的主要核心在这里：

var button = document.createElement('input');
button.type = 'button';
button.value = 'test';
button.setAttribute('id', 'bookmark-button');
button.setAttribute('style', 'position:fixed; top:' + top_coord + 'px; left: ' + mid_coord + 'px;');
document.body.appendChild(button);
button.addEventListener("click", function() {
  console.log('test');
  alert('hello');
});

我避免使用 setAttribute 方式，因为我知道您不能在 Chrome 扩展程序中执行内联 Javascript。此外，此代码存在于我的内容脚本文件中。

按钮出现，但是当我单击时，什么也没有发生。有没有人遇到过这个问题？

【问题讨论】：

标签： javascript google-chrome-extension

【解决方案1】：

检查了您的代码，它在我这边运行良好：

也许您的按钮存在 z-index 问题，或者某些脚本错误阻止了点击处理程序的执行。

【讨论】：