Tampermonkey标签页内按钮点击事件无响应问题求助

你的按钮点击事件失效，核心问题是Tampermonkey的沙箱作用域隔离：你定义的myFunction存在于脚本的沙箱环境中，但通过HTML字符串插入的按钮，其onclick属性会在页面全局作用域查找函数，自然找不到；另外你代码里的onclick="myFunction"还少了调用括号，即使补上也解决不了作用域问题。

下面是三种可行的解决方法：

方法1：事件委托（推荐） #

给tabContent容器添加点击监听，通过判断点击目标来执行对应逻辑，无需在HTML里写inline事件：

// Create the tab content
const tabContent = document.createElement('div');

// 插入按钮的HTML内容
tabContent.innerHTML = '<button class="CodeButton">Button1</button><br/><button class="CodeButton">Button2</button>';

// 给容器绑定事件委托
tabContent.addEventListener('click', function(e) {
  // 判断点击的是目标按钮
  if (e.target.classList.contains('CodeButton')) {
    if (e.target.textContent === 'Button1') {
      alert("test");
      // 这里添加修改页面元素尺寸的逻辑，比如：
      // document.querySelector('.target-element').style.width = '600px';
    } else if (e.target.textContent === 'Button2') {
      // Button2的触发逻辑
      alert("Button2 clicked");
    }
  }
});

// 记得将tabContent添加到页面中
// document.body.appendChild(tabContent);

方法2：手动创建元素并绑定事件 #

完全不使用HTML字符串，逐个创建按钮并直接绑定事件，彻底规避作用域问题：

// Create the tab content
const tabContent = document.createElement('div');

// 创建Button1
const btn1 = document.createElement('button');
btn1.className = 'CodeButton';
btn1.textContent = 'Button1';
btn1.addEventListener('click', function() {
  alert("test");
  // 执行修改元素尺寸等操作
  // document.getElementById('target').style.height = '400px';
});
tabContent.appendChild(btn1);

// 添加换行
tabContent.appendChild(document.createElement('br'));

// 创建Button2
const btn2 = document.createElement('button');
btn2.className = 'CodeButton';
btn2.textContent = 'Button2';
btn2.addEventListener('click', function() {
  // Button2的触发逻辑
  alert("Button2 triggered");
});
tabContent.appendChild(btn2);

// 添加到页面
// document.body.appendChild(tabContent);

方法3：暴露函数到全局（不推荐，存在安全风险） #

如果一定要用inline onclick，需要把函数挂载到全局window对象上，同时修正onclick的写法：

// 将函数暴露到页面全局作用域
window.myFunction = function() {  
  alert("test"); 
}

// Create the tab content
const tabContent = document.createElement('div');

const tabContents = [
      '<button class="CodeButton" onclick="myFunction()">Button1</button><br/><button class="CodeButton">Button2</button>'
];

// 插入HTML内容
tabContent.innerHTML = tabContents[0];

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