Chrome扩展爬取网站遇内容未加载完成及await语法报错问题

• 首先排查manifest.json内容脚本配置，确保run_at字段设置为document_idle，该配置会让浏览器在文档加载完成、空闲状态下才注入执行内容脚本，配置示例如下：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<目标网站匹配规则，如https://example.com/*>"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ]
}

• 如果目标网站是React/Vue开发的单页应用（SPA），window.onload仅会在页面首次加载时触发一次，路由跳转后的内容更新不会重新触发该事件，此时需要监听你要爬取的目标内容DOM节点是否渲染完成，封装监听方法示例如下：

const waitForTargetNode = (selector) => {
  return new Promise((resolve) => {
    const existNode = document.querySelector(selector);
    if (existNode) return resolve(existNode);
    const observer = new MutationObserver((mutations) => {
      const targetNode = document.querySelector(selector);
      if (targetNode) {
        observer.disconnect();
        resolve(targetNode);
      }
    });
    observer.observe(document.body, { childList: true, subtree: true });
  });
}

// 调用示例：等待目标节点加载完成后再执行爬取逻辑
window.onload = async function() {
  // 替换为你要爬取内容的CSS选择器，如文章容器、列表容器的类名/ID
  await waitForTargetNode('.content-wrap');
  await finsh_minting_shit(profile, user_id_now);
}

首先你的现有代码存在语法错误：finsh_minting_shit函数定义末尾多写了一个多余的右括号，需要先把末尾的});修改为}。
报错的根本原因是await关键字仅允许在async标记的函数内部，或者ES模块的顶层作用域中使用，对应两种修复方案：

• 方案1：在window.onload回调中使用await，将回调函数标记为async即可，修改后代码：

window.onload = async function() {
  await finsh_minting_shit(profile, user_id_now);
}

• 方案2：直接在脚本顶层调用的话，用async立即执行函数包裹调用逻辑即可：

(async () => {
  await finsh_minting_shit(profile, user_id_now);
})();

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