时间戳

首页 > 解决方案 > Chrome 扩展内联脚本解决方法

javascript - Chrome 扩展内联脚本解决方法

问题描述

所以我创建了一个 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 的方法的挑战，但我不能使用内联脚本来做到这一点。 .. 有任何想法吗？

标签： javascriptgoogle-chrome-extension

解决方案

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

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);
}

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

推荐阅读