Chrome扩展-通过后台脚本获取Active Tab的DOM信息

问题描述

我知道有很多与这个主题相关的问题，但到目前为止，没有一个问题允许我在V3中解决这个问题。当我运行以下Backack.js时，我只得到未定义的。

我的扩展(至少在此阶段)的目标是抓取活动选项卡的DOM并提取所有div元素的文本内容。

我的背景.js页面：

function getDOM() {
    let htmlarr = [];
    const pageDOM = document.getElementsByTagName('div');
    for (i = 0; i < pageDOM.length; i++) {
        htmlarr += pageDOM.innerHTML;
    }
    return Object.assign({}, htmlarr)
}

chrome.tabs.onActivated.addListener(activeInfo => {

    let domRes = chrome.scripting.executeScript({
        target: { tabId: activeInfo.tabId },
        func: getDOM
    })
    console.log(domRes);
});

我的清单.json：

    {
        "name": "HTML Sourcer",
        "description": "Extract HTML source code",
        "version": "1.0",
        "minimum_chrome_version": "10.0",
        "manifest_version": 3,
        "permissions": ["scripting", "tabs", "activeTab"],
        "host_permissions": [
            "*://*/*"
        ],
        "background": {
            "service_worker": "background.js"
        }
}

任何帮助都将不胜感激。谢谢！

推荐答案

问题1

根据documentation，当没有回调参数时，此API方法返回Promise。

若要获取承诺的值，请添加await并将函数标记为async：

chrome.tabs.onActivated.addListener(async info => {

  let domRes = await chrome.scripting.executeScript({
    target: {tabId: info.tabId},
    func: getDOM,
  }).catch(console.error);
  if (!domRes) return;

  console.log(domRes);
});

存在catch，因为某些选项卡不支持注入，例如"开始"选项卡或chrome://选项卡。

问题2

中的+=不适用于数组，而只能适用于数字/字符串。改用htmlar.push()。也不需要通过Object.Assign将数组转换为对象。

实际上，让我们使用Array.from重写getDOM：

function getDOM() {
  return Array.from(
    document.getElementsByTagName('div'),
    el => el.innerHTML
  );
}