Chrome 扩展 - 在浏览器上加载 js 之前获取 Html DOM答案

【问题标题】：Chrome extension - get Html DOM before load js on browserChrome 扩展 - 在浏览器上加载 js 之前获取 Html DOM
【发布时间】：2015-08-27 20:23:45
【问题描述】：

我正在开发一个 chrome 扩展，它需要阻止 html 页面的加载，对页面中的 javascript 进行一些验证，在我的内容脚本中，并继续（或不）加载页面。

在带有“run_at”：“document_start”的清单中，内容脚本得到一个空的 html 并且无法进行验证。在 document_end 使用 run_at，它已经执行了页面中的 js，然后我的扩展程序对其进行了验证...

有没有办法像我的内容脚本中的 DOMContentBeforeLoad 一样设置？我真的没办法了..

谢谢

【问题讨论】：

这可能会有所帮助，但我不太确定：stackoverflow.com/questions/8943219/…
在这种情况下确实如此，但谢谢
这个对另一个问题的回答可能会帮助您入门：stackoverflow.com/a/13270422/2488877
已经试过了，在运行内容脚本的js之前还是会加载页面
没有像我没有尝试过的那样给出答案，但是您可以从后台页面安装一个可以修改响应的网络请求挂钩。它监视传入的页面请求并修改返回的数据，以便 chrome 加载您修改后的版本，就好像它是原始版本一样。 developer.chrome.com/extensions/…

标签： javascript html dom google-chrome-extension onbeforeload

【解决方案1】：

我认为要执行您正在执行的操作，您必须执行您对 document_start 执行的操作，然后通过 ajax 调用加载 html 页面并自行解析。

浏览器通常不会加载所有脚本然后执行它们，这是按页面顺序异步发生的，所以没有一点你可以在 javascript 将加载但什么都没有的地方捕捉到它执行（除非您也控制页面的内容）。

【讨论】：

为什么会这样？他自己的页面 ajax 不太可能在 chrome 之前完成，后者在您之前开始相同的请求。
是的，这不是一个令人愉快（或高效）的提议，但预加载/解析页面是我知道的唯一方法，它实际上会让他在加载任何内容之前看到内容。然后他必须允许页面加载。您的建议也可能有效，但我不确定他是否可以在加载之前处理所有内容，或者一次只能处理 1 个。
我将如何进行 ajax 调用？我已经收到回复的页面。感谢您的帮助
您必须停止页面响应，直到您准备好为止，并且可以通过 GET 请求轻松地拉入 html（这就是浏览器所做的一切）。解析它将是一个巨大的痛苦，尽管可能有一个图书馆可以做到这一点。如果您不喜欢此解决方案，您显然可以采取另一种方法，但我不确定您是否会找到可以在您通过终端流式传输 javascript 时暂停 dom 加载的东西。如果您不需要阻止加载，您可能可以处理 javascript，但同时执行这两项操作不会有简单的几行代码答案。
没有。这个答案是行不通的。也不清楚你为什么建议解析 html。看看我的问题和你上面的答案

【解决方案2】：

看看 TopLevel.js 是如何工作的：https://github.com/kristopolous/TopLevel（有趣的来源https://github.com/kristopolous/TopLevel/blob/master/toplevel.js）

这是您在页面中明确包含的库。当它到达页面并立即运行它时 document.write()'sa

element with style='display: none'，它立即停止浏览器解析页面的其余部分，并隐藏纯文本结果（plaintext 是一个已弃用的元素，它停止解释页面内容，并将所有 HTML 视为 vanilla 未解析的纯文本：<a href="/default/index/tourl?u=aHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZG9jcy9XZWIvSFRNTC9FbGVtZW50L3BsYWludGV4dA%3D%3D" rel="nofollow" target="_blank">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/plaintext</a>）。</plaintext></p> <p>Toplevel 然后解析 <plaintext> 元素本身的文本内容（并做一些模板，这是库的重点），document.write() 将生成的新内容手动写入页面。 <p>你应该能够做类似的事情：注入一个 <plaintext> 元素来阻止浏览器解析页面，自己解析它（或者用它做任何你想做的事情），然后可能写出你喜欢的任何东西（包括原始内容）到页面上。</plaintext></p> </plaintext></p> </div> </div> <div class="pr1-rt1"> <p>【讨论】：</p><div class="cmets"> <ul class="comlist"></ul> </div> </div> </div> </section> </article> </div> <div class="rigthbox contentcard mt10"> <div style="height: auto;background-color: #ddd;text-align: center;margin-top: 7px;" class="carditem litem"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5446233687289962" data-ad-slot="2607637140" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <div style="height: auto;" class="carditem litem"> <div class="cardtit">猜你喜欢 </div> <ul class="cardcont"> <li> <a title="Chrome 扩展：在加载之前修改 DOM" href="/ask-1644564.html" target="_blank"></a> <span>2023-03-11</span> </li> <li> <a title="chrome扩展在加载dom之前注入动态css" href="/ask-7975454.html" target="_blank"></a> <span>1970-01-01</span> </li> <li> <a title="Chrome 在 DOM 加载之前加载 js 事件" href="/ask-1941968.html" target="_blank"></a> <span>2019-06-19</span> </li> <li> <a title="Chrome 扩展：在页面加载之前注入 JS" href="/ask-7922620.html" target="_blank"></a> <span>1970-01-01</span> </li> <li> <a title="puppeteer 无法在浏览器中加载 chrome 扩展" href="/ask-8243184.html" target="_blank"></a> <span>1970-01-01</span> </li> <li> <a title="Chrome 扩展：在加载页面之前替换 HTML" href="/ask-1941836.html" target="_blank"></a> <span>2012-01-21</span> </li> <li> <a title="Chrome扩展，在浏览器显示之前替换响应代码中的HTML" href="/ask-529682.html" target="_blank"></a> <span>2011-09-09</span> </li> <li> <a title="Firefox 扩展：在加载之前访问 DOM" href="/ask-1942433.html" target="_blank"></a> <span>2012-04-30</span> </li> <li> <a title="Chrome 扩展在浏览器关闭之前做一些事情" href="/ask-4996725.html" target="_blank"></a> <span>1970-01-01</span> </li> </ul> </div> <div style="height: auto;" class="carditem litem"> <div class="cardtit">相关资源 </div> <ul class="cardcont"> <li> <a title="JS主流浏览器万年历 v20110906下载" href="/down-8821.html" target="_blank">下载</a> <span>2021-06-05</span> </li> <li> <a title="Sea.js 适用于 Web 浏览器端的模块加载器下载" href="/down-9085.html" target="_blank">下载</a> <span>2022-12-26</span> </li> <li> <a title="openWYSIWYG 浏览编辑器v1.4.7下载" href="/down-48945.html" target="_blank">下载</a> <span>2023-01-23</span> </li> <li> <a title="php 玖玩浏览器 20110901下载" href="/down-60621.html" target="_blank">下载</a> <span>2023-02-13</span> </li> <li> <a title="WYMeditor 基于Web浏览器的可视化HTML编辑器 v1.0.0b3下载" href="/down-56637.html" target="_blank">下载</a> <span>2021-06-25</span> </li> </ul> </div> <div style="height: auto;" class="carditem litem"> <div class="cardtit">最近更新 <a class="cardmore" title="最近更新" href="/default/index/morelist">更多</a></div> <ul class="cardcont"> </ul> </div> <div style="height: auto;background-color: #ddd;text-align: center;" class="carditem litem"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5446233687289962" data-ad-slot="2607637140" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <div style="height: auto;" class="carditem litem mt20"> <div class="cardtit">热门标签 </div> <div class="tagbox"> <a target="_blank" title="Java" href="/default/index/tags?cid=164&cname=Java" >Java</a> <a target="_blank" title="Python" href="/default/index/tags?cid=367&cname=Python" >Python</a> <a target="_blank" title="linux" href="/default/index/tags?cid=274&cname=linux" >linux</a> <a target="_blank" title="javascript" href="/default/index/tags?cid=169&cname=javascript" >javascript</a> <a target="_blank" title="Mysql" href="/default/index/tags?cid=237&cname=Mysql" >Mysql</a> <a target="_blank" title="C#" href="/default/index/tags?cid=187&cname=C%23" >C#</a> <a target="_blank" title="Docker" href="/default/index/tags?cid=243&cname=Docker" >Docker</a> <a target="_blank" title="算法" href="/default/index/tags?cid=344&cname=%E7%AE%97%E6%B3%95" >算法</a> <a target="_blank" title="前端" href="/default/index/tags?cid=160&cname=%E5%89%8D%E7%AB%AF" >前端</a> <a target="_blank" title="SpringBoot" href="/default/index/tags?cid=168&cname=SpringBoot" >SpringBoot</a> <a target="_blank" title="Redis" href="/default/index/tags?cid=227&cname=Redis" >Redis</a> <a target="_blank" title="Vue" href="/default/index/tags?cid=236&cname=Vue" >Vue</a> <a target="_blank" title="spring" href="/default/index/tags?cid=696&cname=spring" >spring</a> <a target="_blank" title="设计模式" href="/default/index/tags?cid=632&cname=%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F" >设计模式</a> <a target="_blank" title=".net core" href="/default/index/tags?cid=381&cname=.net+core" >.net core</a> <a target="_blank" title=".net" href="/default/index/tags?cid=300&cname=.net" >.net</a> <a target="_blank" title="kubernetes" href="/default/index/tags?cid=2179&cname=kubernetes" >kubernetes</a> <a target="_blank" title="c++" href="/default/index/tags?cid=312&cname=c%2B%2B" >c++</a> <a target="_blank" title="数据库" href="/default/index/tags?cid=284&cname=%E6%95%B0%E6%8D%AE%E5%BA%93" >数据库</a> <a target="_blank" title="数据结构" href="/default/index/tags?cid=247&cname=%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84" >数据结构</a> <a target="_blank" title="大数据" href="/default/index/tags?cid=888&cname=%E5%A4%A7%E6%95%B0%E6%8D%AE" >大数据</a> <a target="_blank" title="js" href="/default/index/tags?cid=159&cname=js" >js</a> <a target="_blank" title="机器学习" href="/default/index/tags?cid=171&cname=%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0" >机器学习</a> <a target="_blank" title="微服务" href="/default/index/tags?cid=832&cname=%E5%BE%AE%E6%9C%8D%E5%8A%A1" >微服务</a> <a target="_blank" title="Android" href="/default/index/tags?cid=282&cname=Android" >Android</a> <a target="_blank" title="Go" href="/default/index/tags?cid=839&cname=Go" >Go</a> <a target="_blank" title="程序员" href="/default/index/tags?cid=327&cname=%E7%A8%8B%E5%BA%8F%E5%91%98" >程序员</a> <a target="_blank" title="面试" href="/default/index/tags?cid=637&cname=%E9%9D%A2%E8%AF%95" >面试</a> <a target="_blank" title="JVM" href="/default/index/tags?cid=727&cname=JVM" >JVM</a> <a target="_blank" title="ASP.net core" href="/default/index/tags?cid=179&cname=ASP.net+core" >ASP.net core</a> <a target="_blank" title="云原生" href="/default/index/tags?cid=22056&cname=%E4%BA%91%E5%8E%9F%E7%94%9F" >云原生</a> <a target="_blank" title="人工智能" href="/default/index/tags?cid=270&cname=%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD" >人工智能</a> <a target="_blank" title="后端" href="/default/index/tags?cid=1089&cname=%E5%90%8E%E7%AB%AF" >后端</a> <a target="_blank" title="PHP" href="/default/index/tags?cid=281&cname=PHP" >PHP</a> <a target="_blank" title="git" href="/default/index/tags?cid=226&cname=git" >git</a> <a target="_blank" title="CSS" href="/default/index/tags?cid=817&cname=CSS" >CSS</a> <a target="_blank" title="golang" href="/default/index/tags?cid=409&cname=golang" >golang</a> <a target="_blank" title="k8s" href="/default/index/tags?cid=5067&cname=k8s" >k8s</a> <a target="_blank" title="Nginx" href="/default/index/tags?cid=373&cname=Nginx" >Nginx</a> <a target="_blank" title="Django" href="/default/index/tags?cid=634&cname=Django" >Django</a> <a target="_blank" title="mybatis" href="/default/index/tags?cid=720&cname=mybatis" >mybatis</a> <a target="_blank" title="深度学习" href="/default/index/tags?cid=345&cname=%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0" >深度学习</a> <a target="_blank" title="多线程" href="/default/index/tags?cid=986&cname=%E5%A4%9A%E7%BA%BF%E7%A8%8B" >多线程</a> <a target="_blank" title="React" href="/default/index/tags?cid=560&cname=React" >React</a> <a target="_blank" title="架构" href="/default/index/tags?cid=2070&cname=%E6%9E%B6%E6%9E%84" >架构</a> <a target="_blank" title="devops" href="/default/index/tags?cid=2662&cname=devops" >devops</a> <a target="_blank" title="爬虫" href="/default/index/tags?cid=905&cname=%E7%88%AC%E8%99%AB" >爬虫</a> <a target="_blank" title="云计算" href="/default/index/tags?cid=361&cname=%E4%BA%91%E8%AE%A1%E7%AE%97" >云计算</a> <a target="_blank" title="Spring Boot" href="/default/index/tags?cid=201&cname=Spring+Boot" >Spring Boot</a> <a target="_blank" title="LeetCode" href="/default/index/tags?cid=342&cname=LeetCode" >LeetCode</a> </div> </div> </div> <div class="clearfix"></div> </main> <div class="yllinks alink"></div> <footer class="site-footer clearfix"> <section class="copyright">By © 2026 <a href="/" title="www.likecs.com">likecs</a> 版权所有,<br/>本站所有数据收集于网络如有侵犯到您的权益请联系进行下架处理1。 </section> <section class="poweredby"> <a target="_blank" href="https://beian.miit.gov.cn/">粤ICP备22038628号</a>Powered By WordPress </section> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({id: "Je3PjbvUssp6BbvY",ck: "Je3PjbvUssp6BbvY"})</script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?2eb031e42d29b7c1a1f16948d2ae2a9f"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> </div> </body> </html>