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

Question

我知道有很多与此主题相关的问题，但 none 到目前为止，我已经在 V3 中解决了这个问题。当我运行以下background.js时，我只会得到undefined.

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

我的 background.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);
});

我的manifest.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"
        }
}

如有任何帮助，我们将不胜感激。谢谢！

Answer 1

问题 1

根据 documentation this API method returns a Promise 当没有回调参数时。

要获取 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

In JavaScript += 不适用于数组，但仅适用于 numbers/strings。请改用 htmlarr.push()。也不需要通过 Object.assign.

将数组转换为对象

实际上，让我们使用 Array.from:

重写 getDOM

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

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

Chrome Extension - Obtaining Active Tab's DOM information through background script

javascript

google-chrome-extension

chromium

问题 1

问题 2