Как применить красную рамку ко всем элементам <a>на странице, чьи ссылки появляются в массиве?(JavaScript) - PullRequest
Новая
       10

Как применить красную рамку ко всем элементам <a>на странице, чьи ссылки появляются в массиве?(JavaScript)

0 голосов
/ 05 декабря 2018

Я создаю расширение Google Chrome, которое создает массив ссылок на странице, которые удовлетворяют определенному условию.Я хочу написать функцию, которая затем перебирает все элементы (ссылки) на странице, и если какой-либо из их href появится в массиве hrefs, созданных моей предыдущей функцией, я хочу окружить эту ссылку красной рамкой.Это то, что я написал до сих пор, но это не работает.Я пытался сделать это до текущей реализации, назначив класс каждому из элементов, которые появляются в массиве, а затем внедрив скрипт css на страницу, который применяет красную рамку ко всем элементам этого класса.

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'"});
//       }
//   }
// }

1 Ответ

0 голосов
/ 05 декабря 2018

Я бы посоветовал вам объединить ваш linkArray в селектор CSS, например:

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

Затем используйте этот селектор в document.querySelectorAll, чтобы получить перечисленные ссылки и style им.

Итак, ваша функция будет выглядеть следующим образом: 

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>
...