javascript - 如何将红色边框应用于其 href 出现在数组中的页面上的所有 元素？ (javascript)

Question

我正在制作一个 Google Chrome 扩展程序，它可以在页面上创建满足特定条件的链接数组。我想编写一个函数，然后循环遍历页面上的所有元素(链接)，如果它们的任何 href 出现在我之前的函数生成的 href 数组中，我想用红色边框包围该链接。这是我到目前为止所写的，但它不起作用。在当前实现之前，我尝试执行此操作的方法是为数组中出现的每个元素分配一个类，然后将 css 脚本注入(inject)到页面中，将红色边框应用于具有该类的所有元素。

function highlight(linkArray)
{
  var allLinks = chrome.tabs.executeScript(null,{code:"document.getElementsByTagName('a')"});
  for (var i = 0; i < allLinks.length; i++)
  {
    chrome.tabs.executeScript(null,{code:"document.getElementsByTagName('A')[i].style.border='2px solid red'"});
  }
}
// Below is a rough idea of another way I've tried to got about it but it also doesnt work
// var allLinks = chrome.tabs.executeScript(null,{code:"document.getElementsByTagName('A')"});
// for (var i = 0; i < allLinks.length; i++) {
//   for (var j = 0; j < linkArray.length; j++) {
//       if (allLinks[i] == linkArray[j].href) {
//         chrome.tabs.executeScript(null,{code:"document.querySelectorAll('a[href=`${linkArray[i]}`]')[i].className += 'badLink'"});
//       }
//   }
// }

Answer 1

我建议您将 linkArray 组合到 CSS 选择器中，如下所示:

a[href^="link1"], a[href^="link2"], ...

然后在 document.querySelectorAll 中使用此选择器来获取列出的链接并对其进行样式。

所以你的函数看起来像这样:

function highlight() {
  var linkArray = ['bad', 'awful', 'horrible', 'dead'];

  // preparing the code as a string
  var code = `
    document.querySelectorAll(
      '${linkArray.map(l => `a[href^="${l}"]`).join(',')}'
    ).forEach(a => a.style.border = 'solid 2px red')
  `;

  // executing the code
  chrome.tabs.executeScript(null, {code: code});
}

以下代码片段是一个工作示例:

// Faking 'chrome.tabs.executeScript' to make it work in the snippet.
// You don't need it in your extension.
var chrome = {tabs: {executeScript: (_, {code}) => eval(code)}};

highlight();

function highlight() {
  var linkArray = ['bad', 'awful', 'horrible', 'dead'];

  // preparing the code as a string
  var code = `
    document.querySelectorAll(
      '${linkArray.map(l => `a[href^="${l}"]`).join(',')}'
    ).forEach(a => a.style.border = 'solid 2px red')
  `;
  
  // executing the code
  chrome.tabs.executeScript(null, {code: code});
}

<a href="bad">Bad link</a>
<a href="ok">OK link</a>
<a href="awful">Awful link</a>
<a href="horrible">Horrible link</a>
<a href="good">Good link</a>
<a href="nice">Nice link</a>
<a href="dead">Dead link</a>
<a href="bad#2">Bad#2 link</a>