Chrome 扩展程序，如何延迟脚本直到页面完全加载

Question

我正在尝试在选项卡中打开新网站地址后按类名获取 DOM 元素。问题是我不知道如何让它等到页面完全加载。我尝试了闹钟、setTimeOut、setTimeDelay，但没有任何效果。

chrome.runtime.onMessage.addListener(message);

function message(msg) {
  chrome.tabs.update({url: 'https://www.website.com/'});
  chrome.tabs.executeScript({code:"var theBtn = document.getElementsByClassName('btn1');theBtn[0].click();"});
}

我在弹出窗口中使用 chrome.runtime.sendMessage 因为我想从输入发送网址，然后我按下一个按钮并触发上面的代码。我简化了这一点，因为其他一切都有效。(msg) 只是一个网站地址

Answer 1

更新：

那是行不通的，因为executeScript没有一个选项卡可以执行，因为你刚刚杀死（更新）了它。您必须将其分为背景脚本和内容脚本：

1. 后台运行chrome.tabs.update
2. 后台向内容发送准确的目标 URL
3. 内容侦听每个 URL，但忽略所有 URL，除非它刚刚从后台获取了这个确切的 URL
4. 如果是这样，Content 运行脚本（或者告诉后台运行executeScript，但这看起来很愚蠢），忘记 URL，然后返回到空闲状态

也许 2-3 中的通信必须采用另一种方式：内容在每次页面加载时都会询问后台是否应对该 URL 执行操作。

非常有趣的用例！我做了一个概念验证，因为今天是圣诞节！

原来的：

未经测试！两种选择：

load2.在脚本中添加监听器包装器：

chrome.tabs.executeScript({
  code:"window.addEventListener('load', function() { var theBtn = document.getElementsByClassName('btn1');theBtn[0].click(); });"
});

这是你的代码，包裹在window.addEventListener('load', function() { ... });. 添加事件监听器会立即执行，但里面的代码只有在页面加载时才会执行。

1. 使用executeScript的runAt选项。我想你想要document_end。查看文档

实际上，看起来默认的 ( document_idle) 更适合：“浏览器选择“document_end”和紧接在 window.onload 之后之间的时间”（来自此处）