Блог

У меня есть расширение Chrome, которое внедряет HTML / CSS на страницы поиска Google из скрипта содержимого.

В настоящее время я делаю это с помощью insertAdjacentHTML() и длинной одиночной строки HTML.

Соответствующие фрагменты кода:

 const chosenElements = document.getElementsByClassName('r');

for (var i = 0; i < chosenElements.length; i  ) {
    chosenElements[i].insertAdjacentHTML('afterbegin', createHTML(name));
}

  

 function createHTML(name) {
  return (
    '<a style="display: flex; justify-content: center; .... font-weight: 500;" href="https://www.mywebsite.com/">Click here to go to '  
    name  
    ' website</a>'
  );
  

Это делает правильную вещь и добавляет HTML / CSS на страницу, но для меня это довольно непрактичный способ сделать это, поскольку я хочу значительно расширить HTML и CSS вводимого контента, а делать это в одной большой строке, как это, на самом деле не сработает.

Есть ли лучший способ выполнить это внедрение?

Подумываю о чем-то вроде ссылки на отдельный HTML-файл, который имеет свой собственный стиль CSS-файла, или о чем-то подобном.

Спасибо.

Проверьте строки шаблона. Они довольно хорошо поддерживаются по всем направлениям (могу ли я использовать) и на 100% поддерживаются в Chrome.

Для создания строки используются обратные символы вместо кавычек или одиночных кавычек, а также простая интерполяция.

 function createHTML(name) {
  return (
    '<a style="display: flex; justify-content: center; .... font-weight: 500;" href="https://www.mywebsite.com/">Click here to go to '  
    name  
    ' website</a>'
);
  

становится

 function createHTML(name) {
  return (
    `<a style="display: flex; justify-content: center; font-weight: 500;"
        href="https://www.mywebsite.com/">
       Click here to go to ${name} website
     </a>` 
);
  

У вас по-прежнему будет весь ваш код в одном файле, но его будет намного проще использовать. Надеюсь, это поможет!