javascript - 将 HTML/CSS 注入(inject)网页的更好方法？

Question

我有一个 Chrome 扩展程序，它通过内容脚本将 HTML/CSS 注入(inject) 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 添加到页面，但对我来说这是一种非常不切实际的方法，因为我想大大扩展注入(inject)内容的 HTML 和 CSS，并在像这样的一大行是行不通的。

有没有更好的注入(inject)方法？

考虑链接到具有自己的 CSS 文件样式或类似内容的单独 HTML 文件。

谢谢。

Answer 1

查看 template strings .它们得到全面的支持 ( Can I use )，并且 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>` 
);

您仍然会将所有代码放在一个文件中，但它会更容易理解。希望对您有所帮助!