ajax之后的chrome扩展程序运行脚本

时间:2016-08-18 17:24:08

标签: javascript jquery ajax google-chrome google-chrome-extension

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

我目前的代码是这样的,

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

但是,在当前网站上,当按下某个按钮时,会处理ajax并为同一个网址加载新的HTML DOM,因此脚本无法运行。

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

1 个答案:

答案 0 :(得分:1)

这是相当hacky,但你可以覆盖DECLARE @Student tinyint SELECT @Student = type_id FROM type WHERE type_code = 'student' SELECT TOP 10 a, b , @Student student FROM something 原型的任何属性(因此插入任何方法调用),以及函数/构造函数本身。
在你的情况下,最方便的做法可能是挂钩XMLHttpRequest函数本身,只需在那里添加一个事件监听器:

XMLHttpRequest

这里的控制流程如下:

  • 调用原始功能
  • 修改返回值
  • 返回修改后的值

这利用了以下事实:如果在JavaScript中构造函数返回一个值,该值将替换使用var originalXHR = XMLHttpRequest; XMLHttpRequest = function() { var ret = new originalXHR(); ret.addEventListener('load', function() { console.log('Ajax request finished!'); }); return ret; }; 创建的对象。

行动中:



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;
};




请注意,这只为您提供了一种方法,可以在 XHR加载完成时检测,而不是控制其返回值。但是,在<!-- Demo page: --> URL: <input type="text" value="https://google.com"><br> <button>Load via XHR</button>的函数中,您可以通过console.log访问XHR。

您还可以创建挂钩点以在加载的内容到达页面上的代码之前对其进行修改,但这需要更多的挂钩,因为可以以多种方式添加侦听器(ev.target,{ {1}},.onload等),但如果有必要,它将是可行的。