【问题标题】:insert content script when page was changed by history.pushState and ajax call当页面被 history.pushState 和 ajax 调用更改时插入内容脚本
【发布时间】:2015-09-13 10:13:42
【问题描述】:

我遇到了将内容脚本插入到由 history.pushState 和 ajax 调用更改的页面的问题。我在 stackoverflow 找到了similar topic,但该解决方案对我不起作用(该解决方案是使用 chrome.webNavigation.onHistoryStateUpdated 和 "popstate" 事件)。

这是我清单的一个片段:

"content_scripts": [
    {
      "matches": ["https://vk.com/audios*", "https://vk.com/al_audio.php*"],
      "js": ["jquery-2.1.4.min.js", "getListOfSongs.js"]
    }
  ]

chrome.webNavigation.onHistoryStateUpdated 仅在我导航到另一个页面时有效,如果我按顺序多次导航到同一页面 什么都没发生。例如:当

1) 转到https://vk.com/audios* - 首次打开页面或重新加载

2) 转到https://vk.com/some_other_page - ajax 调用

3) 转到https://vk.com/audios* - ajax 调用

当它不起作用时

1) 转到https://vk.com/audios* - 首次打开页面或重新加载

2) 再次转到 https://vk.com/audios* - ajax 调用,此时内容脚本未注入
3) 再次转到https://vk.com/audios* - ajax 调用,此时内容脚本没有注入等等

每次我第二次点击同一页面时,都会生成以下请求:

https://vk.com/al_audio.php?__query=audios*********&_ref=left_nav&_smt=audio%3A2&al=-1&al_id=********&_rndVer=60742

(请求的参数可能会有所不同)

在这种情况下,JQuery .ajaxComplete 也不会捕获任何事件。

而且 pushState 不会触发“popstate”事件,所以我不能使用 window.onpopstate 事件

我可能会使用 chrome.webNavigation.onDOMContentLoadedchrome.webNavigation.onCompleted 但是当我重新加载页面时,这些事件会发生不止一次,所以脚本将被注入不止一次。

这种情况的最佳解决方案是什么?

【问题讨论】:

  • “我在 stackoverflow 上找到了类似的主题,但该解决方案对我不起作用”您必须更好地解释。
  • 我已经在整篇文章中解释过了。建议使用 chrome.webNavigation.onHistoryStateUpdated 和 popstate 事件作为该主题的解决方案,但正如我上面提到的那样,该解决方案对我不起作用。
  • 你能链接到你找到的解决方案吗?
  • stackoverflow.com/questions/13806307/… 也将此链接添加到我的帖子中
  • 另外,定义“多次导航到同一个页面”。

标签: javascript ajax dom google-chrome-extension vk


【解决方案1】:

我能想到两种可能的方法:

1 - 使用计时器检查您的脚本是否仍然存在,如果没有,请再次添加...
2 - 检查 ajax 调用,如果它们的 url 与删除脚本的 url 之一匹配,请再次添加脚本。

您的脚本(清单中定义的脚本)仍然存在,即使在 ajax 调用之后,它也不会再次运行(不确定历史推送器会发生什么)。所以,我假设您只需要读取一些元素或重新运行剥离。我假设您添加了附加 html 标记的脚本。

所以你需要的是读取元素或重新运行特定代码的东西。


1 - 计时器方法 - 我为希望添加到页面中某个 目标元素任何元素(不仅是脚本)创建了一个解决方案。

它使用计时器来检查目标元素是否存在。 当它找到目标元素时,它会添加我的元素。然后调整计时器以检查我的元素是否仍然存在。如果没有,请重新添加。

您只需拨打appendChildPersistent 一次,这将在您导航时一直保持活动状态。

var timers = {}; //stores the setInterval ids

//this is the only method you need to call
//give your script an `id` (1)
//the child is your script, it can be anything JQuery.append can take
//toElem is the Jquery "SELECTOR" of the element to add your script into.
//I'm not sure what would happen if toElem were not a string.
//callback is a function to call after insertion if desired, optional.
appendChildPersistent = function(id, child, toElem, callback)
{
    //wait for target element to appear
    withLateElement(toElem, function(target)
    {
        target.append(child); //appends the element - your script                                                                                                           
        if (typeof callback !== 'undefined') callback(); //execute callback if any

        //create a timer to constantly check if your script is still there
        timers[id] = setInterval(function()
        {                                       
            //if your script is not found, clear this timer and tries to add again          
            if (document.getElementById(id) === null)
            {
                clearInterval(timers[id]);
                delete timers[id];
                appendChildPersistent(id, child, toElem, callback);
            }
        },3000);

    });
}

//this function waits for an element to appear on the page
//since you can't foresee when an ajax call will finish
//selector is the jquery selector of the target element
//doAction is what to do when the element is found
function withLateElement(selector, doAction)
{   
    //checks to see if this element is already being waited for                             
    if (!(selector in timers))
    {
        //create a timer to check if the target element appeared                                                            
        timers[selector] = setInterval(function(){              
            var elem = $(selector);

            //checks if the element exists and is not undefined
            if (elem.length >= 0)
            {
                if (typeof elem[0] !== 'undefined')
                {
                    //stops searching for it and executes the action specified
                    clearInterval(timers[selector]);
                    delete timers[selector];
                    doAction(elem);
                }
            }
        }, 2000);
    }                                                           
}

(1) 给脚本标签加个Id好像没问题:Giving the script tag an ID


2 - 捕获 ajax 调用

一个选项是使用chrome.webRequest。但奇怪的是,这对我不起作用。另一个选项如下。

对于这种情况,请检查this answer,并别忘了阅读其中的Chrome扩展程序的相关答案。仅当您遵循整个过程时,它才会起作用。幸运的是,我今天测试了它,效果很好:p

在这里,您要做的是更改 XMLHttpRequest 方法 opensend 以检测(也可能获取参数)何时调用它们。

但是,在 Google 扩展程序中,绝对有必要在页面中注入条带(不是后台页面或注入内容脚本的脚本,而是注入一些代码的内容脚本进入 dom,如下所示)。

var script = document.createElement('script');
script.textContent = actualCode; //actual code is the code you want to inject, the one that replaces the ajax methods
document.head.appendChild(script); //make sure document.head is already loaded before doing it
script.parentNode.removeChild(script); //I'm not sure why the original answer linked removes the script after that, but I kept doing it in my solution

这是至关重要的,因为扩展试图创建一个隔离的环境,而您在此环境中对 XMLHttpRequest 所做的更改根本不会参与。 (这就是为什么 JQuery.ajaxComplete 似乎不起作用的原因,您需要在页面中注入一个脚本才能使其工作 - look here

this pure javascript solution 中,替换方法:

//enclosing the function in parentheses to avoid conflict with vars from the page scope
(function() {
    var XHR = XMLHttpRequest.prototype;

    // Store the orignal methods from the request
    var open = XHR.open;
    var send = XHR.send;

    // Create your own methods to replace those

    //this custom open stores the method requested (get or post) and the url of the request
    XHR.open = function(method, url) {
        this._method = method; //this field was invented here
        this._url = url; //this field was invented here
        return open.apply(this, arguments); //calls the original method without any change

        //what I did here was only to capture the method and the url information
    };


    //this custom send adds an event listener that fires whenever a request is complete/loaded
    XHR.send = function(postData) {
        //add event listener that fires when request loads
        this.addEventListener('load', function() {
            //what you want to do when a request is finished
            //check if your element is there and readd it if necessary
            //if you know the exact request url, you can put an if here, but it's not necessary

            addMyElementsToPage(); //your custom function to add elements
            console.log("The method called in this request was: " + this._method);
            console.log("The url of this request was: " + this._url);
            console.log("The data retrieved is: " + this.responseText);

        });

        //call the original send method without any change
        //so the page can continue it's execution
        return send.apply(this, arguments);

        //what we did here was to insert an interceptor of the success of a request and let the request continue normally
    };
})();

【讨论】:

  • 感谢您的出色回答。我在第一个解决方案上取得了成功。但在这种情况下,我只是检查我通过内容脚本添加的元素是否存在,如果该元素不存在则重新添加它。在第二种解决方案的情况下,由于我对 JavaScript 的纯经验,我没有取得成功。我只是没有参与重写 XMLHttpRequest 方法。我是否需要更改页面使用的原始 XMLHttpRequest(例如 vk.com/audio)?
  • 查看编辑。通过从XMLHttpReques.prototype 替换sendopen,您确实在更改原来的XMLHttpRequest。但是不要忘记 injection 部分,它在 Chrome 扩展中是绝对必要的。否则它将什么都不做。
猜你喜欢
  • 2012-11-28
  • 1970-01-01
  • 2017-12-29
  • 1970-01-01
  • 2015-11-23
  • 1970-01-01
  • 2012-12-06
  • 2010-12-05
  • 1970-01-01
相关资源
最近更新 更多