javascript - chrome扩展在ajax之后运行脚本

Question

我是 Javascript 新手，我正在创建一个 chrome 扩展，试图将一些 HTML 注入(inject)现有的公共(public)网站，

我当前的代码是这样的，

if (document.readyState ==='complete'){
  inject_html();
}

但是，在当前网站上，当按下按钮时，将处理 ajax 并为同一 URL 加载新的 HTML DOM，因此脚本不会运行。

有没有办法在ajax处理完成时监听？在这种情况下最好的方法是什么，专家可以帮助我吗？

Answer 1

这相当 hacky，但您可以覆盖 XMLHttpRequest 原型(prototype)以及函数/构造函数本身的任何属性(从而插入任何方法调用)。
在您的情况下，最方便的做法可能是 Hook XMLHttpRequest 函数本身，然后简单地在其中添加一个事件监听器:

var originalXHR = XMLHttpRequest;
XMLHttpRequest = function()
{
    var ret = new originalXHR();
    ret.addEventListener('load', function()
    {
        console.log('Ajax request finished!');
    });
    return ret;
};

这里的控制流程是这样的:

• 调用原函数
• 修改返回值
• 返回修改后的值

这利用了这样一个事实:如果在 JavaScript 中构造函数返回一个值，则该值将替换使用 new 创建的对象。

实际操作:

// Interface code
var field = document.querySelector('input');
document.querySelector('button').addEventListener('click', function()
{
    var xhr = new XMLHttpRequest();
    // crossorigin.me because we need a CORS proxy for most external URLs
    xhr.open("GET", 'https://crossorigin.me/' + field.value);
    xhr.send(null);
});

// Hooking code
var originalXHR = XMLHttpRequest;
XMLHttpRequest = function()
{
    var ret = new originalXHR();
    ret.addEventListener('load', function(ev)
    {
        // var xhr = ev.target;
        console.log('Ajax request finished!');
    });
    return ret;
};

<!-- Demo page: -->
URL: <input type="text" value="https://google.com"><br>
<button>Load via XHR</button>

请注意，这仅为您提供了一种检测 XHR 何时完成加载的方法，而不是控制其返回值。不过，在执行 console.log 的函数中，您可以通过 ev.target 访问 XHR 本身。

您还可以创建 Hook 点来在加载的内容到达页面上的代码之前对其进行修改，但这需要更多的 Hook ，因为可以通过多种方式添加监听器(.onload、.onreadystatechange、.addEventListener 等)，但如果需要的话也是可行的。