Chrome扩展开发中content script无法获取外部HTML文件元素如何解决

1. 配置字段拼写错误 #

manifest.json中正确的可访问资源配置字段是web_accessible_resources，而非你写的web_accessories，请先修正配置，示例如下：

• Manifest V3 配置示例

{
  "web_accessible_resources": [
    {
      "resources": ["findfont.html", "content.css", "findfont.js"],
      "matches": ["<all_urls>"]
    }
  ]
}

• Manifest V2 配置示例

{
  "web_accessible_resources": ["findfont.html", "content.css", "findfont.js"]
}

2. DOM查询范围错误 #

你当前使用document.querySelector('.font-name')查询的是宿主页面（用户正在浏览的网页）的DOM树，而.font-name元素存在于你嵌入的iframe内部，不属于宿主页面DOM，因此无法查询到对应元素。
同时你代码中fetch请求拿到了findfont.html的文本内容但完全没有使用，属于冗余逻辑，可以直接删除。

3. 缺少iframe加载等待逻辑 #

iframe加载外部资源是异步行为，必须等待iframe的load事件触发后，才能操作其内部DOM元素。

你可以直接修改showModal函数，添加iframe加载完成监听，操作iframe内部DOM即可：

function registerEventHandlers() {
  const allText = document.querySelectorAll('h1, h2, h3, h4, h5, p, li, td, caption, span');

    for (let i = 0; i < allText.length; i++) {
        const element = allText[i];
        if (!element.hasAttribute(elementIsReady)) {
            element.addEventListener('mouseover', async () => {
              if (!toggleIsOn){
                element.style.cursor = null;
                return;
              } 
                
              const colors = ['#ffadad', '#ffd6a5', '#fdffb6', '#caffbf', '#bdb2ff', '#9fdfff'];

              element.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
              element.style.cursor = "pointer";
            });

            element.addEventListener('mouseout', async () => {
              if (!toggleIsOn) return;
              element.style.backgroundColor = null;
            });

            element.addEventListener('click', async (e) => {
              if (!toggleIsOn) return;

              const showModal = async () => {
                const modal = document.createElement('dialog');
              
                modal.setAttribute(
                  "style",`
                  border: none;
                  border-radius:20px;
                  background-color:#fafafa;
                  opacity:1;
                  animation:fadeMe 0.4s;
                  position:absolute;
                  z-index:10000000000000;
                  box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
                  `);
              
                  modal.innerHTML = 
                  `
                  <iframe id="popup-content" scrolling="no" style="height:155px; width:347px; z-index:10000000000000; animation:fadeMe 0.4s;" frameBorder="0">
                    
                  </iframe>
                  `;
            
                  modal.style.top = e.pageY+"px";
                  modal.style.left = e.pageX+"px";
              
                  document.body.appendChild(modal);
                  const dialog = document.querySelector("dialog");
                  dialog.show();
            
                  document.body.addEventListener('click', () => {
                    document.body.removeChild(modal);
                    dialog.close();
                  });
              
                  const iframe = document.getElementById("popup-content");
                  // 替换已废弃的chrome.extension.getURL
                  iframe.src = chrome.runtime.getURL("findfont.html")
                  // 等待iframe加载完成后操作内部DOM
                  iframe.onload = () => {
                    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                    const fontName = iframeDoc.querySelector('.font-name');
                    fontName.innerText = "自定义字体名称";
                  }
              }
            
              // 直接调用showModal，删除冗余的fetch逻辑
              showModal();
            });

            element.setAttribute(elementIsReady, true);
        }
    }
}

如果你不需要隔离弹窗的JS/CSS环境，可以不用iframe，直接将fetch到的HTML内容插入到弹窗中，无需处理iframe跨域问题：

// 点击事件内的逻辑替换为以下代码
fetch(chrome.runtime.getURL("findfont.html"))
  .then(r => r.text())
  .then(html => {
    const modal = document.createElement('dialog');
    modal.setAttribute(
      "style",`
      border: none;
      border-radius:20px;
      background-color:#fafafa;
      opacity:1;
      animation:fadeMe 0.4s;
      position:absolute;
      z-index:10000000000000;
      box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
      top: ${e.pageY}px;
      left: ${e.pageX}px;
      `);
    // 直接插入html内容
    modal.innerHTML = html;
    document.body.appendChild(modal);
    modal.show();
    // 直接查询元素即可
    const fontName = document.querySelector('.font-name');
    fontName.innerText = "自定义字体名称";

    document.body.addEventListener('click', () => {
      document.body.removeChild(modal);
      modal.close();
    });
});

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