Chrome扩展：如何为通过内容脚本注入的按钮绑定点击触发的内容脚本函数？

完全不用折腾注入新的JS文件，你的内容脚本本身就有能力直接给按钮绑定点击事件，这里有两种简单的实现方式：

方法一：直接创建按钮元素并绑定事件（推荐） #

这种方式不用拼接HTML字符串，直接操作DOM元素，代码更清晰，还能避免innerHTML可能带来的安全风险：

// 创建按钮元素
const btn1 = document.createElement('button');
btn1.id = 'btn1';
btn1.style.cssText = 'background-color: #2c3f82; height: 25px; width: 50px; text-align: center; cursor: pointer; border-radius: 4px; color: white; border: 1px solid rgba(0, 0, 0, 0.8); font-size: 15px; margin: 2px;';
btn1.textContent = 'someText';

// 直接绑定点击事件
btn1.addEventListener('click', () => {
  // 在这里写你需要的点击逻辑，比如：
  alert('按钮被点击啦！');
  // 也可以做修改页面元素、发送请求等操作
});

// 创建外层网格容器
const gridDiv = document.createElement('div');
gridDiv.style.cssText = 'display: inline-grid; grid-template-columns: auto auto auto auto; background-color: #1d76ce; border-radius: 8px; padding: 10px;';
gridDiv.appendChild(btn1);

// 创建你的自定义容器
const div = document.createElement('div');
div.className = 'ownSizes';
div.appendChild(gridDiv);

// 添加到页面指定位置
document.getElementsByClassName('_4NtqZU')[0].appendChild(div);

方法二：用innerHTML拼接后再绑定事件 #

如果你更习惯用HTML字符串拼接的方式，记得要先把元素添加到页面DOM树中，再获取按钮绑定事件：

let btnHtml = '<button id="btn1" style="background-color: #2c3f82; height: 25px; width: 50px; text-align: center; cursor: pointer; border-radius: 4px; color: white; border: 1px solid rgba(0, 0, 0, 0.8); font-size: 15px; margin: 2px;">someText</button>';
const div = document.createElement('div');
div.className = 'ownSizes';
div.innerHTML = '<div style="display: inline-grid; grid-template-columns: auto auto auto auto; background-color: #1d76ce; border-radius: 8px; padding: 10px;">'+btnHtml+'</div>';

// 先把容器添加到页面
document.getElementsByClassName('_4NtqZU')[0].appendChild(div);

// 再获取按钮并绑定事件
document.getElementById('btn1').addEventListener('click', () => {
  // 点击触发的逻辑
  console.log('按钮被点击了！');
});

注意事项 #

• 第二种方法必须先将元素插入DOM，否则getElementById会返回null，无法绑定事件。
• 推荐第一种方式，代码可读性更强，也能避免潜在的XSS风险（如果你的HTML字符串包含用户输入的话）。

内容的提问来源于stack exchange，提问作者user509OZ