Chrome 扩展 - 在浏览器上加载 js 之前获取 Html DOM
Posted
技术标签:
【中文标题】Chrome 扩展 - 在浏览器上加载 js 之前获取 Html DOM【英文标题】：Chrome extension - get Html DOM before load js on browser
【发布时间】：2015-08-27 20:23:45
【问题描述】：
我正在开发一个 chrome 扩展，它需要阻止 html 页面的加载，对页面中的 javascript 进行一些验证，在我的内容脚本中，并继续（或不）加载页面。
在带有“run_at”：“document_start”的清单中，内容脚本得到一个空的 html 并且无法进行验证。在 document_end 使用 run_at，它已经执行了页面中的 js，然后我的扩展程序对其进行了验证...
有没有办法像我的内容脚本中的 DOMContentBeforeLoad 一样设置？我真的没办法了..
谢谢
【问题讨论】：
这可能会有所帮助，但我不太确定：***.com/questions/8943219/…
在这种情况下确实如此，但谢谢
这个对另一个问题的回答可能会帮助您入门：***.com/a/13270422/2488877
已经试过了，在运行内容脚本的js之前还是会加载页面
没有像我没有尝试过的那样给出答案，但是您可以从后台页面安装一个可以修改响应的网络请求挂钩。它监视传入的页面请求并修改返回的数据，以便 chrome 加载您修改后的版本，就好像它是原始版本一样。 developer.chrome.com/extensions/…
【参考方案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 <![CDATA[ element with style='display: none'，它立即停止浏览器解析页面的其余部分，并隐藏纯文本结果（plaintext 是一个已弃用的元素，它停止解释页面内容，并将所有 HTML 视为 vanilla 未解析的纯文本：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/plaintext）。</plaintext></p>
<p>Toplevel 然后解析 <plaintext> 元素本身的文本内容（并做一些模板，这是库的重点），document.write() 将生成的新内容手动写入页面。
<p>你应该能够做类似的事情：注入一个 <plaintext> 元素来阻止浏览器解析页面，自己解析它（或者用它做任何你想做的事情），然后可能写出你喜欢的任何东西（包括原始内容）到页面上。</plaintext></p>
</plaintext></p>
<p>【讨论】：</p><p>以上是关于Chrome 扩展 - 在浏览器上加载 js 之前获取 Html DOM的主要内容，如果未能解决你的问题，请参考以下文章</p>
<p > <a style="color:blue;" href="https://it.cha138.com/zd/show-10100615.html">Chrome 扩展内容脚本在页面刷新之前未加载</a></p>
<p > <a style="color:blue;" href="https://it.cha138.com/wen4/show-8632466.html">如何在 Chrome 中强制加载动态、不安全的内容？</a></p>
<p > <a style="color:blue;" href="https://it.cha138.com/biancheng/show-2613383.html">命令行 chrome 扩展加载和测试</a></p>
<p > <a style="color:blue;" href="https://it.cha138.com/wen4/show-4998674.html">在 Chrome 和 Firefox 上重新加载 js 和 CSS</a></p>
<p > <a style="color:blue;" href="https://it.cha138.com/php/show-4468723.html">Vuejs的VueTool工具开启失败解决方案</a></p>
<p > <a style="color:blue;" href="https://it.cha138.com/shida/show-59586.html">解决Chrome启动和加载网页变慢的问题</a></p>
</article> </div> </div> </div> </section>
</div>
</div>
<script type="text/javascript" src="https://it.cha138.com/skin/m03sred/style/js/fixit.js"></script>
<script type="text/javascript" src="https://it.cha138.com/file/script/content.js"></script><script>
$(function () {
$('#manual').addClass('current');
$('#manual').parent('ul').addClass('in');
})
</script>
<footer class="footer"> <div class="container content"> <div class="has-text-centered">
<p class="has-text-grey is-size-7">(c)2006-2024 SYSTEM All Rights Reserved <a href="https://it.cha138.com">IT常识</a> </p>
</div> </div> </footer>
<script src="https://it.cha138.com/skin/m03sred/style/js/effect.js"></script>
</body>
</html>]]></plaintext></p></article></div>