Chrome扩展开发：如何将content script提取的页面内容导出为文本文件下载

1. 调整content script逻辑，添加消息监听 #

在你现有的content script末尾添加消息监听代码，收到popup的获取数据请求后，将整理好的词汇释义对象返回：

let wordsList = [];
let meaningList = [];
let words = document.querySelectorAll(".status-m > div.word, .status-n > div.word");
let meaning = document.querySelectorAll(".status-m > div.meaning, .status-n > div.meaning");

wordsList = [...words];
wordsList = wordsList.map(word => word.innerHTML)

meaningList = [...meaning];
meaningList = meaningList.map(word => word.innerHTML)

let obj = {}
for(let i = 0; i< wordsList.length; i++){
    obj[wordsList[i]] = meaningList[i]
}

// 新增：监听来自popup的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  // 判断消息类型为获取词汇数据
  if (request.type === 'getWordsData') {
    sendResponse(obj);
  }
})

2. 修改popup script，点击按钮时拉取数据并下载 #

点击按钮时先向当前激活标签页的content script发送数据请求，拿到返回的词汇数据后转成文本格式再生成文件下载：

$(function(){      
    $('.btn').click(function(){
        // 获取当前活动标签页
        chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
            // 向对应标签页的content script发送消息请求数据
            chrome.tabs.sendMessage(tabs[0].id, {type: 'getWordsData'}, (wordsObj) => {
                // 将词汇对象转成每行一个 词: 释义 的文本格式，可根据需求调整
                const content = Object.entries(wordsObj).map(([word, meaning]) => `${word}: ${meaning}`).join('\n');
                const blob = new Blob([content],
                    { type: "text/plain; charset=utf-8" });
                saveAs(blob, "词汇列表.txt");
            })
        })
    })
})

3. 确认manifest.json权限配置（以Manifest V3为例） #

确保配置了activeTab权限，支持popup访问当前标签页信息：

{
  "manifest_version": 3,
  // 其他基础配置...
  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "matches": ["你要注入的网站匹配规则，比如https://xxx.com/*"],
      "js": ["content.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

如果使用Manifest V2，权限配置改为：

"permissions": ["activeTab", "tabs"]

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