gpt4 book ai didi

javascript - 如何等待脚本加载

转载 作者:行者123 更新时间:2023-11-30 19:47:32 26 4
gpt4 key购买 nike

我正在构建一个 Chrome 扩展,在我的 contentScript 中,我有一个循环所有 <link> 的函数元素并检查它是否有rel="preconnect"属性。如果为 true,扩展程序的图标将会改变。

contentScript 在文档开始和函数处运行。函数运行onDomLoaded .当预渲染直接在 HTML 代码中时,扩展可以完美运行。但是当 prerender 由 JS 生成时,图标不会改变。可能是因为在onDomLoaded 发生时脚本没有完全加载。

但是当我改用 window.onload 时,它真的很慢并且图标会延迟更改,因为它等待脚本完全加载。如何处理这种情况并仅在需要时等待?

list

content_scripts":
[{
"matches": ["https://*/*"],
"run_at": "document_start",
"js": ["js/contentScript.js"]
}]

ContentScript

document.addEventListener("DOMContentLoaded", function(event) {
//here I loop the page and if preconnect found, change the icon

)};

最佳答案

完成此任务的合适工具是监视 DOM 修改的 MutationObserver。

由于 document_start 的 MutationObserver 可以减慢页面速度(即使只是一点点),我们将只观察 <head>元素,由于那里的元素数量很少,所以速度超快。

// there's no HEAD yet at document-start, let's wait until we have it
new MutationObserver((mutations, observer) => {
if (document.head) {
observer.disconnect();
monitorLinks();
}
}).observe(document.documentElement, {childList: true});

function monitorLinks() {
const onMutation = mutations => {
for (const {addedNodes} of mutations) {
for (const n of addedNodes) {
if (n.nodeName === 'LINK' && n.rel === 'preconnect') {
processLink(n);
}
}
}
};
// the HEAD may have some children already
onMutation([{
addedNodes: document.getElementsByTagName('link'),
}]);
// watch for the newly added children of HEAD
new MutationObserver(onMutation).observe(document.head, {childList: true});
}

function processLink(link) {
console.log(link);
}

关于javascript - 如何等待脚本加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54812274/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com