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，但忽略所有内容，除非它只是从Background获得了这个确切的URL
4. 如果是这样，内容运行脚本，（或告诉背景运行executeScript，但这看起来很愚蠢），忘记URL，然后回到空闲状态

也许2-3中的通信必须采用另一种方式：内容询问每个页面加载的背景，如果它应该作用于此URL。

非常有趣的用例！ I made a Proof of concept because it's X-mas!

原版的：

未经测试！两种选择：

2.在脚本中添加load侦听器包装器：

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。 See docs

实际上看起来默认（document_idle）更适合：“浏览器选择”document_end“和window.onload之后的时间”（from here）

Answer 2

有三种方法可以做到这一点1.在Manifest.json中使用run_at =“document_end”（如果可能的话，理想的开发人员应该使用这个）2。使用java脚本或jquery使用document是ready事件3.使用executeScript