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，并在像这样的一大句行不通。

是否有更好的注射方法？

想到了类似链接到具有自己CSS文件样式的单独HTML文件之类的东西。

谢谢。

Answer 1

签出template strings。它们在各个方面都得到了很好的支持（Can I use），并且在Chrome中100％受支持。

它使用反引号字符而不是引号或单引号来创建字符串，并易于插值。

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

您仍将所有代码保存在一个文件中，但是使用它会更容易。希望有帮助！

将HTML / CSS注入网页的更好方法？

1 个答案: