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

Chrome Extension - Obtaining Active Tab#39;s DOM information through background script(Chrome扩展-通过后台脚本获取Active Tab的DOM信息)

本文介绍了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
  );
}

这篇关于Chrome扩展-通过后台脚本获取Active Tab的DOM信息的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:Chrome扩展-通过后台脚本获取Active Tab的DOM信息

基础教程推荐