首次开发Chrome扩展：实现点击获取Google搜索结果链接并打印到控制台

我来帮你搞定这个问题！你的核心需求是点击扩展后抓取当前Google搜索页面的结果链接，现有代码的问题主要在于后台脚本（background script）无法访问网页DOM，而且触发逻辑不对（你现在是在扩展安装时执行，不是点击扩展时）。下面是完整的修正方案：

步骤1：修正manifest.json #

首先更新你的清单文件，添加内容脚本（content script）来访问网页DOM，同时调整结构：

{ 
  "name": "Search List", 
  "description": "Google Search List", 
  "version": "0.1", 
  "permissions": ["activeTab"], 
  "content_scripts": [
    {
      "matches": ["https://www.google.com/search*"],
      "js": ["searchListContent.js"]
    }
  ],
  "page_action": { 
    "default_popup": "searchListTemplate.html", 
    "default_icon": { 
      "16": "images/get_started16.png", 
      "32": "images/get_started32.png", 
      "48": "images/get_started48.png", 
      "128": "images/get_started128.png" 
    }, 
    "default_title": "Google Search List" 
  }, 
  "icons": { 
    "16": "images/get_started16.png", 
    "32": "images/get_started32.png", 
    "48": "images/get_started48.png", 
    "128": "images/get_started128.png" 
  }, 
  "manifest_version": 2 
}

• content_scripts字段：指定在Google搜索页面（https://www.google.com/search*）注入我们的内容脚本，这样脚本就能访问搜索结果的DOM了。
• 移除了declarativeContent和storage权限，因为我们不需要这些；保留activeTab确保能和当前页面通信。

步骤2：修改popup页面（searchListTemplate.html） #

给popup加一个按钮，点击它触发抓取操作：

<!DOCTYPE html>
<html>
  <body>
    <button id="printBtn">打印搜索结果链接</button>
    <script src="searchListPopup.js"></script>
  </body>
</html>

步骤3：添加popup脚本（searchListPopup.js） #

这个脚本负责监听按钮点击，向当前页面的内容脚本发送请求：

document.getElementById('printBtn').addEventListener('click', () => {
  // 获取当前活跃标签页
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    // 向内容脚本发送消息
    chrome.tabs.sendMessage(tabs[0].id, {action: "getSearchLinks"}, (response) => {
      if (response && response.links) {
        console.log("Google搜索结果链接：");
        response.links.forEach((link, index) => {
          console.log(`${index+1}. ${link.text} - ${link.url}`);
        });
      } else {
        console.log("未找到搜索结果，请确保当前页面是Google搜索页");
      }
    });
  });
});

步骤4：修改内容脚本（searchListContent.js） #

这个脚本在Google搜索页面运行，负责抓取结果链接并响应popup的消息：

// 监听来自popup的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "getSearchLinks") {
    // 抓取Google搜索结果的链接（Google的搜索结果选择器可能会变，当前是`.g a`）
    const resultLinks = Array.from(document.querySelectorAll('.g a'))
      .map(anchor => {
        return {
          text: anchor.textContent.trim(),
          url: anchor.href
        };
      })
      .filter(link => link.url.startsWith('http')); // 过滤掉非链接的内容

    sendResponse({links: resultLinks});
  }
});

关键说明 #

1. 内容脚本的作用：它直接注入到目标网页（Google搜索页），可以访问页面的DOM，这是后台脚本做不到的。
2. 消息通信：popup和内容脚本通过chrome.runtime.sendMessage和chrome.runtime.onMessage通信，实现点击按钮后触发抓取操作。
3. 选择器注意：Google的搜索结果DOM结构可能会更新，如果.g a失效，你可以打开Chrome开发者工具（F12），手动查看搜索结果元素的选择器，替换成最新的。

现在把这些文件放到你的扩展目录里，重新加载扩展（Chrome扩展页面点击"重新加载"），打开Google搜索页面，点击扩展图标，再点击按钮，就能在控制台看到搜索结果链接了！

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