Firefox扩展无法注册onClick处理函数的解决方法咨询

问题场景 #

我用Firefox扩展的内容脚本编写代码，尝试向网页添加可点击段落并绑定自定义点击函数，但执行失败。

失败代码示例 #

console.log("step 0");

function i_clicked() {
    console.log("step 2");
}

console.log("step 1");

let p = document.createElement("p");
p.textContent = "Click here";
p.setAttribute("onClick", "i_clicked()");
document.body.appendChild(p);

现象 #

控制台能打印step 0和step 1，但点击段落时触发报错：Uncaught ReferenceError: i_clicked is not defined，页面无法访问内容脚本中定义的函数。

原因分析 #

内容脚本与网页的执行上下文完全隔离：内容脚本的变量、函数仅在自身上下文生效，而通过setAttribute("onClick")设置的内联事件代码，是在网页自身的上下文执行的，因此找不到内容脚本里定义的i_clicked函数。

正确实现方式 #

方式一：使用addEventListener绑定事件（推荐） #

直接在内容脚本中通过事件监听绑定函数，全程在内容脚本上下文操作，无跨上下文问题：

console.log("step 0");

function i_clicked() {
    console.log("step 2");
}

console.log("step 1");

let p = document.createElement("p");
p.textContent = "Click here";
// 替换内联onClick为事件监听
p.addEventListener("click", i_clicked);
document.body.appendChild(p);

方式二：将函数注入到页面上下文（不推荐，仅作参考） #

若必须使用内联事件（不建议，易引发环境冲突与安全风险），可将函数注入到网页全局上下文：

console.log("step 0");

console.log("step 1");

let p = document.createElement("p");
p.textContent = "Click here";
p.setAttribute("onClick", "i_clicked()");
document.body.appendChild(p);

// 通过script标签将函数注入页面上下文
const script = document.createElement('script');
script.textContent = `
function i_clicked() {
    console.log("step 2");
}
`;
document.head.appendChild(script);
script.remove(); // 插入后可移除标签，不影响函数生效

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