Chrome 扩展内联脚本解决方法

【问题标题】：Chrome extension inline script workaroundChrome 扩展内联脚本解决方法
【发布时间】：2020-07-25 11:35:02
【问题描述】：

所以我创建了一个 chrome 扩展，其中一个功能是将链接列表循环到 .div 元素中。代码在这里：

function updateIcd() {

modalIcdLinks.innerHTML = '';
let icdLinks = '';

for (let i = 0; i < icdCodes.length; i++) {

    icdLinks += '<a href="#" onclick="removeIcd('+i+')">'+ icdCodes[i] +' [x]</a><br />'

}

modalIcdLinks.innerHTML = icdLinks;
}

当然，单击它会将参数传递给函数 removeIcd，该函数会将其从数组中取出。

Chrome 扩展程序不允许这种类型的内联脚本，但是让我面临在单击链接时找到一种将值（例如数组索引）传递给我的 javascript 的方法的挑战，但我不能这样做内联脚本...有什么想法吗？

【问题讨论】：

标签： javascript google-chrome-extension

【解决方案1】：

使用直接DOM操作并为onclick提供一个JS函数：

function updateIcd() {
  const bag = document.createDocumentFragment();
  icdCodes.forEach((code, i) => {
    bag.appendChild(
      create('a', {
        href: '#',
        onclick: () => removeIcd(i),
        textContent: code + ' [x]',
      }));
    bag.appendChild(create('br'));
  });
  modalIcdLinks.textContent = '';
  modalIcdLinks.appendChild(bag);
}

function create(tag, props) {
  return Object.assign(document.createElement(tag), props);
}

textContent 或 onclick 等 DOM 属性的名称区分大小写。它们类似于 HTML 属性，但可能有一些大写字母。要验证准确的拼写，您可以在 devtools 控制台中输入类似 document.body. 的内容（注意末尾的点），按自动完成热键 (Ctrl-Space)，输入几个字母以查看与输入匹配的属性。

【讨论】：