ajax后的chrome扩展运行脚本

Question

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

我当前的代码是这样的，

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

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

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

Answer 1

这很老套，但您可以覆盖 XMLHttpRequest 原型的任何属性（并因此插入任何方法调用），以及函数/构造函数本身。
在您的情况下，最方便的做法可能是挂钩 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 本身。

您还可以创建挂钩点以在加载的内容到达页面上的代码之前对其进行修改，但这需要更多挂钩，因为可以通过多种方式添加侦听器（.onload、.onreadystatechange 、.addEventListener 等），但如有必要也可以。