Google chrome 扩展：如何在页面重新加载后立即注入脚本？答案

【问题标题】：Google chrome extension: how to inject script immediately after page reload?Google chrome 扩展：如何在页面重新加载后立即注入脚本？
【发布时间】：2017-02-10 04:06:45
【问题描述】：

我有一个定期重新加载当前标签的后台脚本。

var code = 'window.location.reload();';
chrome.tabs.executeScript(my_active_tab, {code: code});

每次页面重新加载后，我想立即注入另一个脚本。

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab){
    if (changeInfo.status == 'complete') {
        chrome.tabs.executeScript(tabId, { file: "my_script.js" });
    }
});

以上是我目前拥有的代码。问题是，它可以工作，但速度太慢，因为它实际上是在每张图片加载完毕后等待。

我的目标是在 DOM 加载后立即执行脚本。有什么想法吗？

【问题讨论】：

标签： javascript google-chrome google-chrome-extension background-process

【解决方案1】：

使用 manifest.json `content_scripts` 条目和 `"run_at": "document_start"`

使用 manifest.json content_scripts 条目和 "run_at": "document_start" 是您保证在页面存在之前注入内容脚本的唯一方法。此时注入的代码会发现document.body 和document.head 都将是null。

使用`tabs.executeScript()` 尽早注入

调用tabs.executeScript() 的最早时间是在您感兴趣的页面导航的webNavigation.onBeforeNavigate 事件之后触发的webRequest.onHeadersReceived 事件中。在此事件之前使用tabs.executeScript() 可能会导致您的脚本在没有任何报告错误的情况下不会被注入新页面。鉴于后台脚本和加载页面过程之间的时间固有的异步性质，此类故障可能是间歇性的，并且会受到操作系统/系统配置和正在加载的确切页面的影响。事实上，我关于webRequest.onHeadersReceived 将起作用的声明是基于测试，而不是在 Chrome 源代码中进行验证。因此，可能存在我没有测试的极端情况。

此时注入始终有效，但相对于页面加载而言，注入发生的时间有些不一致。有时，document.head 和 document.body 将是 null（manifest.json content_scripts 注入 "run_at":"document_start" 总是如此）。其他时候，document.head 和 document.body 将包含一个有效的 DOM。由于后台脚本和内容处于不同的进程中，因此似乎无法将这个时间安排得更紧（即始终将document.head 和document.body 设为null）：因此，本质上是异步的。

使用webNavigation.onBeforeNavigate 并且不至少等待关联的webRequest.onHeadersReceived 事件太早且不起作用（内容脚本未注入）。换句话说，即使是关联的webRequest.onSendHeaders 事件也太早了。

显然，要尽早注入内容脚本，您必须在调用 tabs.executeScript() 时指定 runAt:'document_start'。

在 DOM 存在后注入：`webNavigation.onCommitted`

如果您想要一些更简单的东西，并且会导致在页面中除主 HTML 文档之外的任何内容之前注入内容脚本，那么您只需使用所需 URL 的 webNavigation.onCommitted 事件来触发您的tabs.executeScript()。这将导致在主 HTML 文档之后立即加载注入的内容脚本。使用webNavigation.onCommitted 变得更容易，因为它能够为您的事件指定过滤器。因此，您可以只为您感兴趣的 URL 调用事件侦听器。

webNavigation.onCommitted 事件在主 HTML 页面的 webRequest.ResponseStarted 事件之后触发，但在获取任何资源之前（即在任何页面资源的 webRequest.BeforeRequest 事件之前）。有趣的是，它确实在声明status:'loading' 的tabs.onUpdated 事件之后触发。带有status:'loading' 的tabs.onUpdated 事件本身并不是一个很好的触发事件，因为它可能会因其他具有相同属性的原因而触发，但这并不表示页面加载/重新加载。

如果你只想在页面上`tabs.executeScript()`重新加载

webNavigation.onCommitted 事件监听器接收到一个属性：transitionType，根据导航的原因，该属性将是different values。其中一个值是'reload'，您可以使用它来过滤仅页面重新加载。

鉴于您对页面重新加载感兴趣，而不是加载帧，您需要确保 webNavigation 事件是针对 frameId:0 的。

这些是当您通过单击“重新加载此页面”按钮重新加载选项卡时发生的事件：

webNavigation.onBeforeNavigate    ->  arg[0]= {"frameId":0,"parentFrameId":-1,"processId":-1,"tabId":411,"timeStamp":1500401223978.314,"url":"http://www.example.com/"}        
webRequest.onBeforeRequest        ->  arg[0]= {"frameId":0,"method":"GET","parentFrameId":-1,"requestId":"260870","tabId":411,"timeStamp":1500401223979.044,"type":"main_frame","url":"http://www.example.com/"}        
webRequest.onBeforeSendHeaders    ->  arg[0]= {"frameId":0,"method":"GET","parentFrameId":-1,"requestHeaders":[{"name":"Upgrade-Insecure-Requests","value":"1"},{"name":"User-Agent","value":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36"},{"name":"Accept","value":"text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8"},{"name":"Accept-Encoding","value":"gzip, deflate"},{"name":"Accept-Language","value":"en-US,en;q=0.8"}],"requestId":"260870","tabId":411,"timeStamp":1500401223979.3242,"type":"main_frame","url":"http://www.example.com/"}        
webRequest.onSendHeaders          ->  arg[0]= {"frameId":0,"method":"GET","parentFrameId":-1,"requestHeaders":[{"name":"Upgrade-Insecure-Requests","value":"1"},{"name":"User-Agent","value":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36"},{"name":"Accept","value":"text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8"},{"name":"Accept-Encoding","value":"gzip, deflate"},{"name":"Accept-Language","value":"en-US,en;q=0.8"}],"requestId":"260870","tabId":411,"timeStamp":1500401223979.538,"type":"main_frame","url":"http://www.example.com/"}        
webRequest.onHeadersReceived      ->  arg[0]= {"frameId":0,"method":"GET","parentFrameId":-1,"requestId":"260870","responseHeaders":[{"name":"Content-Encoding","value":"gzip"},{"name":"Accept-Ranges","value":"bytes"},{"name":"Cache-Control","value":"max-age=604800"},{"name":"Content-Type","value":"text/html"},{"name":"Date","value":"Tue, 18 Jul 2017 18:07:03 GMT"},{"name":"Etag","value":"\"359670651\""},{"name":"Expires","value":"Tue, 25 Jul 2017 18:07:03 GMT"},{"name":"Last-Modified","value":"Fri, 09 Aug 2013 23:54:35 GMT"},{"name":"Server","value":"ECS (rhv/818F)"},{"name":"Vary","value":"Accept-Encoding"},{"name":"X-Cache","value":"HIT"},{"name":"Content-Length","value":"606"}],"statusCode":200,"statusLine":"HTTP/1.1 200 OK","tabId":411,"timeStamp":1500401224072.296,"type":"main_frame","url":"http://www.example.com/"}        
---^^^^^^^^^^^^^^^^^^^^^^^^^-Earliest tabs.executeScript() injection is in the handler for the webRequest.onHeadersReceived event.
webRequest.onResponseStarted      ->  arg[0]= {"frameId":0,"fromCache":false,"ip":"93.184.216.34","method":"GET","parentFrameId":-1,"requestId":"260870","responseHeaders":[{"name":"Content-Encoding","value":"gzip"},{"name":"Accept-Ranges","value":"bytes"},{"name":"Cache-Control","value":"max-age=604800"},{"name":"Content-Type","value":"text/html"},{"name":"Date","value":"Tue, 18 Jul 2017 18:07:03 GMT"},{"name":"Etag","value":"\"359670651\""},{"name":"Expires","value":"Tue, 25 Jul 2017 18:07:03 GMT"},{"name":"Last-Modified","value":"Fri, 09 Aug 2013 23:54:35 GMT"},{"name":"Server","value":"ECS (rhv/818F)"},{"name":"Vary","value":"Accept-Encoding"},{"name":"X-Cache","value":"HIT"},{"name":"Content-Length","value":"606"}],"statusCode":200,"statusLine":"HTTP/1.1 200 OK","tabId":411,"timeStamp":1500401224072.5032,"type":"main_frame","url":"http://www.example.com/"}        
webRequest.onCompleted            ->  arg[0]= {"frameId":0,"fromCache":false,"ip":"93.184.216.34","method":"GET","parentFrameId":-1,"requestId":"260870","responseHeaders":[{"name":"Content-Encoding","value":"gzip"},{"name":"Accept-Ranges","value":"bytes"},{"name":"Cache-Control","value":"max-age=604800"},{"name":"Content-Type","value":"text/html"},{"name":"Date","value":"Tue, 18 Jul 2017 18:07:03 GMT"},{"name":"Etag","value":"\"359670651\""},{"name":"Expires","value":"Tue, 25 Jul 2017 18:07:03 GMT"},{"name":"Last-Modified","value":"Fri, 09 Aug 2013 23:54:35 GMT"},{"name":"Server","value":"ECS (rhv/818F)"},{"name":"Vary","value":"Accept-Encoding"},{"name":"X-Cache","value":"HIT"},{"name":"Content-Length","value":"606"}],"statusCode":200,"statusLine":"HTTP/1.1 200 OK","tabId":411,"timeStamp":1500401224074.0261,"type":"main_frame","url":"http://www.example.com/"}        
tabs.onUpdated                    ->  arg[0]= 411 :: arg[1]= {"status":"loading","url":"http://www.example.com/"} :: arg[2]= {"active":true,"audible":false,"autoDiscardable":true,"discarded":false,"height":902,"highlighted":true,"id":411,"incognito":false,"index":1,"mutedInfo":{"muted":false},"pinned":false,"selected":true,"status":"loading","title":"www.example.com","url":"http://www.example.com/","width":1282,"windowId":10}    
tabs.onZoomChange                 ->  arg[0]= {"newZoomFactor":1,"oldZoomFactor":1,"tabId":411,"zoomSettings":{"mode":"automatic","scope":"per-origin"}}        
webNavigation.onCommitted         ->  arg[0]= {"frameId":0,"processId":107,"tabId":411,"timeStamp":1500401224079.4019,"transitionQualifiers":[],"transitionType":"reload","url":"http://www.example.com/"}
--->>Here is where you can tell it's a reload --------------------------------------------------------------------------------------------------^^^^^^^^^^^^^^^^^^^^^^^^^
history.onVisited                 ->  arg[0]= {"id":"42","lastVisitTime":1500401224077.579,"title":"Example Domain","typedCount":1,"url":"http://www.example.com/","visitCount":12}        
tabs.onUpdated                    ->  arg[0]= 411 :: arg[1]= {"title":"Example Domain"} :: arg[2]= {"active":true,"audible":false,"autoDiscardable":true,"discarded":false,"height":902,"highlighted":true,"id":411,"incognito":false,"index":1,"mutedInfo":{"muted":false},"pinned":false,"selected":true,"status":"loading","title":"Example Domain","url":"http://www.example.com/","width":1282,"windowId":10}    
webNavigation.onDOMContentLoaded  ->  arg[0]= {"frameId":0,"processId":107,"tabId":411,"timeStamp":1500401224093.404,"url":"http://www.example.com/"}        
webNavigation.onCompleted         ->  arg[0]= {"frameId":0,"processId":107,"tabId":411,"timeStamp":1500401224094.768,"url":"http://www.example.com/"}        
tabs.onUpdated                    ->  arg[0]= 411 :: arg[1]= {"status":"complete"} :: arg[2]= {"active":true,"audible":false,"autoDiscardable":true,"discarded":false,"height":902,"highlighted":true,"id":411,"incognito":false,"index":1,"mutedInfo":{"muted":false},"pinned":false,"selected":true,"status":"complete","title":"Example Domain","url":"http://www.example.com/","width":1282,"windowId":10}

注意：此信息基于我自己的测试。我没有从谷歌找到具有这种特殊性的文档。实际工作的确切时间可能会在未来的 Chrome 版本中发生变化。

【讨论】：

@Anonymous，听起来您没有在 manifest.json 中将 webNavigation 添加到 permissions，或者您正在尝试从内容脚本中执行此操作，这是行不通的。
是的，如果没有得到许可，它确实是行不通的，但我刚刚想通了。感谢您的回答，webNavigation.onCommitted 做了这件事，我的脚本现在加载速度更快了。

使用 manifest.json content_scripts 条目和 "run_at": "document_start"

使用tabs.executeScript() 尽早注入

在 DOM 存在后注入：webNavigation.onCommitted

如果你只想在页面上tabs.executeScript()重新加载

使用 manifest.json `content_scripts` 条目和 `"run_at": "document_start"`

使用`tabs.executeScript()` 尽早注入

在 DOM 存在后注入：`webNavigation.onCommitted`

如果你只想在页面上`tabs.executeScript()`重新加载