Question

我正在开发chrome扩展程序，以保存和管理当前打开的标签页。 “选项”页面的左侧栏包含可单击项的列表。右侧显示了当前所选项目的内容，以及一个浮动的“添加”按钮，该按钮应将动态可点击的li项目添加到列表中。这个新的li元素还应该包含一个带有侦听器的删除按钮，用于删除该项目。

Chrome扩展程序不支持嵌入式javascript和嵌入式单击监听器。作为解决方案，我们可以在其页面加载器的选择器的帮助下将侦听器添加到已存在/静态的按钮上。如图here和here

但是我们如何添加带有监听器的动态按钮。

<div class="session-list">
   <ul id="session-list-content">

   </ul> 
</div>


// add button should perfom this 
var txt = `<li class="${cls}" onclick="showSession()">
            <div class="session-title">${session.name}</div>
            <div class="session-date">${date}</div>
            <button onclick="removeSession(${session.id})">Delete</button>
            </li>`;
$('#session-list-content').append($(txt));

引发错误：拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令：“ script-src'self'blob：文件系统：chrome-extension-resource：”。要启用内联执行，需要使用'unsafe-inline'关键字，哈希（'sha256 -...'）或随机数（'nonce -...'）。

如何在Chrome扩展程序开发中使用点击侦听器添加动态按钮？

0 个答案: