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

我有一个Chrome扩展，它将HTML/CSS从内容脚本注入谷歌搜索页面

目前，我正在使用insertAdjacentHTML（）和一个很长的HTML字符串来完成这项工作

相关代码片段：

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

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

const chosenElements=document.getElementsByClassName（'r'）；
对于（var i=0；i

函数createHTML（名称）{
返回(
''
);

这样做是正确的，并将HTML/CSS添加到页面中，但对我来说，这是一种非常不切实际的方法，因为我想极大地扩展注入内容的HTML和CSS，而这样做在一个大行中是行不通的

有没有更好的注射方法

想一想链接到一个单独的HTML文件，它有自己的CSS文件样式，或者类似的东西

谢谢。

请查看。它们得到了全面的支持（），并且在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>'
);

函数createHTML（名称）{
返回(
''
);

变成

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

函数createHTML（名称）{
返回(
`` 
);

---

你仍然可以将所有代码放在一个文件中，但这样做会更容易。希望这会有帮助！

啊，是的，我一直忘记使用模板字符串，已经改为使用它们而不是使用单引号，谢谢。这是唯一的方法吗？你认为呢？没有办法使用单独的HTML文件吗？@chivs688我想不出一个好方法使用单独HTML文件的方法。您可以尝试将JS文件拆分为“模板”文件，包括多个

标记，或者如果您使用像Webpack这样的东西，则使用导入。@我刚刚玩过使用iframe加载本地html文件的游戏，它似乎已经工作了！@chivs688我的意思是肯定的，您也可以执行

获取
或XHR请求来进行代码拆分（我认为，应该可以在Chrome扩展中工作），但我不一定推荐它。没有什么真正的错误，只是额外的请求。Iframe的工作原理是一样的
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>` 
);