在Chrome扩展中使用onClick

Question

我有一个与content_scripts的扩展。当页面加载我使用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

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

所以在这里谈到两种解决方法：

1. 通过以下方式在内容脚本添加id插入的元素，并绑定事件侦听器

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

2. 附加一个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();