新手开发Chrome扩展抓取页面HTML数据的实现方向咨询

你的场景完全不需要使用Fetch、XMLHttpRequest这类网络请求技术，所有操作都能在本地客户端侧完成，不需要和服务端做任何额外交互。

你不需要参考重型爬虫扩展的复杂逻辑，只用三类基础能力就能满足需求：

• 页面注入逻辑
  在扩展的manifest文件中配置content_scripts匹配规则，指定脚本只在你的内部工具页面生效，页面加载完成后自动注入提取代码即可，不需要做动态脚本注入、跨域权限申请这类额外配置。
• DOM数据提取逻辑
  直接用浏览器原生DOM API就能完成参数提取，不需要引入第三方HTML解析库：
  • 用document.querySelector()定位到你要提取的5个参数对应的DOM节点
  • 文本内容类参数直接读element.textContent属性，存在标签属性里的参数直接用element.getAttribute('目标属性名')取值即可
  • 取值后做简单的去空格、固定值匹配校验，就能得到你要的标准化结果，毕竟你提到每个参数只有3种可能的取值，逻辑非常简单
• 弹窗展示与通信逻辑
  点击扩展图标唤起的popup页面，通过Chrome扩展原生的消息APIchrome.tabs.sendMessage、chrome.runtime.onMessage.addListener，和当前标签页的内容脚本通信，拿到已经提取好的参数值，直接渲染到弹窗页面里就行。

小提示：如果你的内部工具是单页应用，页面内跳转不会触发整页刷新，只需要在内容脚本里加一个MutationObserver监听目标参数所在DOM区域的变动，参数更新时同步更新缓存的提取结果即可，不需要写定时轮询，也不需要发起任何网络请求。

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