javascript - 如何等待规避的 html 元素加载到内容脚本中

Question

我正在尝试制作一个 chrome 扩展程序，它会自动为 Zoom 录音提供下载链接。这是一个两步过程：

1. 从 ID 已知的特定 html 元素中获取链接。
2. 在网页中插入一些 html 以制作可点击的下载链接。

该扩展目前由清单和内容脚本组成。清单：

{
    "name": "Zoom Downloader",
    "description": "creates a link for downloading view-only lectures",
    "version": "1.0",
    "manifest_version": 3,
    "content_scripts":[
        {
            "matches": ["*://*.zoom.us/rec/play/*"],
            "js": ["contentScript.js"],
            "run_at": "document_end"
        }
    ]
}

内容脚本：

window.onload = process

function process(){
    var id = "vjs_video_3_html5_api";
    var element = document.getElementById(id);
    if (element==null){
        console.log("element does not exist");
    }
    else{
        if (element.hasAttribute("src")){
            var node = document.getElementsByTagName('body')[0];
            var extra_element = "<a href= \'" + element.src + "\'<download> Download Video <a/>";
            node.innerHTML = extra_element + node.innerHTML;
        }
        else{
            console.log("element lacks a source attribute");
        }
    }
}

通常，这会将“元素缺少源属性”打印到控制台，但有时如果我事先清除所有浏览数据（我不确定为什么），它会完美运行。我可以通过在控制台中手动运行 javascript 创建链接，但我的目标是每次访问页面时自动生成链接。感谢您的帮助和建议。

另外，如果您能想到一个比我拥有的更好的标题，请发表评论。我是 stackoverflow 和制作 chrome 扩展的菜鸟。

标签： javascripthtmlcookiesgoogle-chrome-extension