Question

我想创建chrome扩展到dev工具，我希望在浏览器编译或执行之前拦截当前网页的JS代码，实际上我想在它之前使用JS代码来在浏览器中运行。

任何人都可以帮助我们，怎么可能？

非常感谢提前。

Answer 1

没有办法挂钩加载过程本身，但是具有未知类型的脚本不会被处理为脚本，这与自定义类型的脚本不执行的事实相结合是以下hack所依赖的。

调用window.stop将阻止文档加载，如果我们在文档的最顶部调用它，我们可以假设文档没有加载。

然后，我们可以发出XHR请求来获取文档的内容，并进行一些搜索和替换，以便在将此修改后的文本写入文档之前为文档中的所有脚本提供自定义脚本类型

window.stop();
var request = new XMLHttpRequest();

request.open('GET', location.href);
request.onload = function(event) {
  var html = request.responseText
    .replace(/type=\"text\/javascript\"/g, '')
    .replace(/<script/g, '<script type="x-instrument/javascript"');

  document.open();
  document.write(html);
  document.close();
};

request.send(null);

此时，所有脚本都呈现为惰性，基本的顺序加载器可能如下所示：

setTimeout(function next(index) {
  var script = document.scripts[index];
  if (script == null) {
    return setTimeout(callback, 0);
  }

  if (script.hasAttribute('src')) {
    var request = new XMLHttpRequest();
    request.open('GET', script.getAttribute('src'));
    request.onload = function() {
      var code = instrument(request.responseText);
      eval(code);

      setTimeout(next, 0, ++index);
    };

    request.send(null);
  } else {
    var code = instrument(script.textContent);
    eval(code);

    setTimeout(next, 0, ++index);
  }
}, 0, 0);

通过这个，可以通过将此脚本插入文档的开头来检测任何页面。

您也可以在Chrome扩展程序中将其作为内容脚本加载，但请确保将run_at设置为document_start。

{
  "manifest_version": 2,
  "name": "instrument",
  "version": "0.0.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["instrument.js"],
      "run_at": "document_start"
    }
  ],
  "web_accessible_resources": [
    "instrument.js"
  ],
  "permissions": [
    "tabs", "<all_urls>"
  ]
}

Example

如何在chrome中执行exectution之前拦截JS代码

1 个答案: