我遇到了将内容脚本插入页面的问题,该脚本已被history.pushState和ajax调用更改。我找到了类似的主题,但是该解决方案对我不起作用(该解决方案是使用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调用
什么时候不起作用
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.onDOMContentLoaded 和 chrome.webNavigation.onCompleted, 但是当我重新加载页面时,这些事件发生的时间 不止一次 ,因此脚本将被多次注入。
这种情况下最好的解决方案是什么?
我可以想到两种方法:
1-使用计时器检查脚本是否仍然存在,否则,请再次添加… 2-检查ajax调用,如果它们的URL与删除脚本的URL之一匹配,请再次添加脚本。
即使在ajax调用之后,您的脚本(清单中定义的脚本)仍然存在,只是不再运行(不确定历史记录推送器会发生什么)。因此,我假设您只需要阅读一些元素或重新运行Stript。我以为您添加了附加html标记的脚本。
因此,您需要读取某些元素或重新运行某些代码。
1-计时器方法-我为希望添加到页面中某个 目标元素的* 任何元素 (不仅是脚本)创建了解决方案。 *
它使用计时器检查目标元素是否存在。当找到目标元素时,就添加我的元素。然后调整计时器以检查我的元素是否仍然存在。如果没有,请再次添加。
您只需appendChildPersistent要打一次电话,这将在您浏览时始终保持活动状态。
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似乎不是问题:为脚本标签提供ID
2-捕获ajax调用
一种选择是使用chrome.webRequest。但是奇怪的是,这对我没有用。下面是另一个选择。
对于这种情况,请检查此答案, 不要忘 了在那里阅读与 Chrome扩展程序 相关的答案。只有遵循整个过程,它才起作用。幸运的是,我今天进行了测试,它效果很好:p
在这里,您要做的是更改XMLHttpRequest方法open并send在调用它们时进行检测(并可能也获取参数)。
XMLHttpRequest
open
send
但是,在Google扩展程序中,绝对有必要 在页面中注入Stript (不是后台页面或脚本注入内容脚本,而是内容脚本向 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似乎不起作用的原因,您需要在页面中注入脚本才能使其工作- 请在此处查看)
在此纯JavaScript解决方案中,您将替换方法:
//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 }; })();