Chrome扩展开发：如何获取右键菜单链接的页面内容并解析

我从未做过JS开发，但需要一款Chrome商店没有的扩展，自己动手开发了一部分：右键点击链接时的上下文菜单已经实现，现在需要完成的是：点击菜单选项后，加载该链接指向的页面，解析出页面里的特定链接，再用这个链接下载内容（下载和自定义文件名功能已经搞定）。

已完成的代码如下：

Manifest.json #

{
  "name": "Save Original Image",
  "description": "Uses the chrome.contextMenus API to find the link to Original Image and save it.",
  "version": "0.1",
  "permissions": ["contextMenus", "downloads", "<all_urls>"],
  "background": {
    "service_worker": "worker.js"
  },
  "manifest_version": 3
}

worker.js #

chrome.contextMenus.onClicked.addListener(searchOriginalImage);

function searchOriginalImage(info){
    console.log("===Start work===");
    console.log(info.linkUrl);
    // 这里需要加载info.linkUrl对应的页面并解析内容
    //chrome.downloads.download({url: "found url", filename: "part of that found url name.jpg", saveAs: true});
    console.log("===End work===");
};

chrome.contextMenus.removeAll(function() {
    chrome.contextMenus.create({
     id: "1",
     title: "save Original Image",
     contexts:["link"],  
    }); })

作为JS和Chrome扩展开发新手，我不知道怎么加载该链接对应的页面并解析出所需的第二个链接，请问具体需要学习哪些内容，或者该搜索哪些关键词？

一、直接搜这些关键词就能找到核心解法 #

• JavaScript fetch API：用来远程获取目标页面的HTML内容，适配Manifest V3的service worker环境。
• DOMParser API：把fetch到的HTML字符串转成可操作的DOM结构，方便定位特定链接。
• Chrome Manifest V3 fetch 跨域：确认扩展请求外部页面的权限规则（你已添加<all_urls>权限，但需了解基础限制）。
• JavaScript DOM选择器：比如querySelector、getAttribute，用来从解析后的DOM里提取目标链接。

二、代码实现的大致步骤 #

1. 改造searchOriginalImage为异步函数，用fetch获取页面HTML：

   async function searchOriginalImage(info){
       console.log("===Start work===");
       const response = await fetch(info.linkUrl);
       const html = await response.text();
       // 后续解析逻辑
   }
   

2. 用DOMParser解析HTML生成DOM对象：

   const parser = new DOMParser();
   const doc = parser.parseFromString(html, 'text/html');
   

3. 用DOM选择器定位目标链接（示例：假设目标链接有class="original-img-link"）：

   const targetLink = doc.querySelector('.original-img-link').href;
   

4. 将拿到的链接传入已实现的下载方法即可。

三、新手必补的基础内容 #

• 异步JS语法：async/await或Promise，因为fetch是异步操作，必须掌握才能正确处理返回结果。
• DOM基础操作：掌握从HTML中查找元素、提取属性值的方法。
• Manifest V3 service worker限制：它不能直接访问页面DOM，但可以处理网络请求和解析HTML，这是核心规则。

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