Question

我有content_scripts的Chrome扩展程序。页面加载时，我使用jquery：

将新元素附加到DOM

urlTarget.parent().prepend("<div class='scout status' onClick='test()' data-domain='" + domainKey + "'></div>");

这很好用。我还在inject.js内容脚本中定义了一个函数：

function test() {
    alert("this is test");
    return false;
}

点击附加元素后，我收到以下错误：

Uncaught ReferenceError: test is not defined

我一直在阅读Chrome扩展框架中的安全限制（请参阅docs），但我不确定它们是否也适用于内容脚本（文档显示弹出示例），或者我错过了什么吗？

Answer 1

当您将新元素附加到DOM并通过onClick=XXX注册事件侦听器时，实际上浏览器期望XXX来自页面脚本。但是，您知道content scripts are isolated，他们无法直接访问页面创建的变量/函数，反之亦然。

所以这里有两个解决方法：

为inserted元素添加id，并通过以下方式在内容脚本中绑定事件侦听器

// Assuming the id is ID
document.getElementById('ID').addEventListener('click', test);

在页面中添加script标记（Insert code into the page context using a content script）

var actualCode = `
  function test() {
    alert("this is test");
    return false;
  }
`;

 var script = document.createElement('script');
 script.textContent = actualCode;
 (document.head||document.documentElement).appendChild(script);
 script.remove();

在chrome扩展中使用onClick

1 个答案: