JavaScript注入器优化：实现VS Code代码高亮提升可编辑性

以下是针对你代码的优化措施，解决语法高亮缺失和可编辑性差的问题：

核心优化思路 #

原代码因嵌套模板字符串、HTML实体转义（</>）的存在，导致VS Code无法正确识别内部的JavaScript语法。优化重点在于拆解嵌套结构、减少不必要的转义，让编辑器能正确解析代码层级。

优化后的代码 #

function inject(content) {
  // 单独定义注入的脚本内容，VS Code会识别这里的JS语法
  const scriptContent = `
    function getClosestForm(inputElement) {
      let parent = inputElement.parentElement;
      while (parent != null) {
        if (parent.nodeName === 'FORM') {
          return parent;
        }
        parent = parent.parentElement;
      }
      return null;
    }
    const elements = getClosestForm(document.getElementById('injectionPoint')).querySelectorAll('div.field-group');
    let lastElement = document.getElementById("injectionPoint");
    let node = document.createRange().createContextualFragment(decodeURIComponent(\`${content}\`));
    lastElement.parentElement.insertBefore(node, lastElement.nextSibling)
  `;

  // 返回完整的HTML脚本标签，无需转义<>
  return `<script id='injectionPoint'>${scriptContent}</script>`;
}

具体优化点 #

• 拆分嵌套结构：将注入的JavaScript逻辑单独提取到scriptContent变量中，VS Code会自动对这个变量内的代码启用语法高亮，编辑时也能获得代码提示。
• 移除不必要的HTML实体转义：原代码中用<script>转义标签，现在直接使用<script>，因为外层是模板字符串，不会与HTML结构冲突，同时让代码更直观。
• 简化模板字符串拼接：通过变量插值将脚本内容插入到返回的HTML中，结构更清晰，避免多层嵌套的模板字符串导致的解析混乱。

如果需要进一步提升可维护性，还可以：

• 给getClosestForm函数添加注释，说明其功能
• 将DOM选择器（如'injectionPoint'、'div.field-group'）提取为常量，方便后续修改

内容的提问来源于stack exchange，提问作者Sao