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

Posted 2023-02-22

【中文标题】Chrome扩展，如何延迟脚本直到页面完全加载

【英文标题】：Chrome extension, how to delay script until page is fully loaded

【发布时间】：2018-06-06 23:16:39

【问题描述】：

我试图在选项卡中打开新网站地址后按类名获取 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) 只是一个网站地址

【问题讨论】：

非常有趣的问题！我的 Chrome 扩展已经有一段时间了。 (It's Firefox' Extension too these days.) 谢谢！

【参考方案1】：

更新：

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

后台运行chrome.tabs.update 后台向内容发送准确的目标 URL 内容会监听每个 URL，但会忽略所有 URL，除非它只是从后台获取了这个确切的 URL 如果是这样，Content 会运行脚本（或告诉后台运行 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）

【讨论】：

window.addEventLisnter 中包裹的函数代码从不运行，executeScript 中的 runAt 也不起作用，我也在清单文件中尝试了 runAt，但没有成功。嗯，我的 js 文件设置为在后台运行的事实会是问题吗？

chrome.tabs.executeScript 必须由后台脚本运行。没有代码运行，或者只是没有加载？必须在执行之前添加监听器（duh），所以你必须告诉executeScript 更快（document_end 应该这样做）。

我认为 executeScript 运行速度太快，甚至在选项卡开始加载之前。您必须拆分操作：后台脚本中的chrome.tabs.update，以及用于侦听每个页面加载的内容脚本，以及它们之间的消息以了解哪个页面加载是来自后台脚本的页面。 - gist.github.com/rudiedirkx/1e739b4ed65c5a879710461c92e674bf 有效，因为没有页面加载。

请注意，如果没有 tabId 则默认为焦点标签

我明白了。我在您的最小代码中没有看到任何选项卡上下文。 browserAction.onClicked?我做了一个 POC，看答案。

【参考方案2】：

有三种方法可以做到这一点 1.在Manifest.json中使用run_at="document_end"（理想的开发者应该尽可能使用这个） 2. using document is ready 事件使用 java-script 或 jquery 3.使用executeScript