Лучший способ внедрить HTML / CSS на веб-страницу?

Question

У меня есть расширение 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-файла или что-то подобное.

Спасибо.

Answer 1

Проверить шаблон строки .Они довольно хорошо поддерживаются по всем направлениям ( Могу ли я использовать ) и на 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>` 
);

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