So, to give a basic description of my issue.
I have a extension that is working right now (finally) that wraps phonenumbers in an type of tag.
It is working right now, but I am having an issue with anything that is dynamically loaded via JS based on user action, or based on ajax requests
For example, if I click a hotmail email, and open it, the script works, but only when I refresh the page so that the email loads and calls my contentscript.
I thought about getting around this by making the user click the icon for the extension, but that is not really the functionality that was requested.
If there is a way in Chrome to listen to ajax requests (which there seems to be) http://code.google.com/chrome/extensions/webRequest.html That is what I want to do, but I am not sure how to implement this. Do I treat it as a listener?
I figured out another way to do this based on when the DOM changes, but that made loads take a long time, there is just too much going on in the DOM to do it that way. I need to listen for AJAX requests and run my code again when they finish.
Anyhelp or even a pointer in the right direction would be great =)
Please be nice if this is a dumb question, I promise I have been Google'ing and searching forms for an answer and I can't seem to find anything. It is possible that I don't know enough to even ask the right question. I have been using javascript for about two weeks now... so my learning curve has been rough climb.
New! Save questions or answers and organize your favorite content. Learn more.
When you make an AJAX request, your browser sends an HTTP request to a given address. The server on the other end of the request responds, and returns the data to your browser. This is the same thing that happens when you navigate to a new web page.
When building a Chrome extension, you can make cross-site XMLHttpRequests via Content Scripts or the Background Page. Content Scripts is JavaScript that can get injected into a webpage and can manipulate the page's DOM.
When you say...
I figured out another way to do this based on when the DOM changes, but that made loads take a long time, there is just too much going on in the DOM to do it that way. I need to listen for AJAX requests and run my code again when they finish.
...where you using Mutation Events or Mutation Observers? Because I thought Observers where ment to fix that. Ive never done anything with Observers before and used Mutation Summary. It seemed able to do what you want except it didnt start observing until the document was ready/idle (not sure which) so you might have to do a scan on document ready and then fire the observer.
Here's what my test code looked like (in a content script)...
handleChanges = function(summaries) {
// There may be more things to ignore
var ignore = {
SCRIPT: true,
NOSCRIPT: true,
CDATA: true,
'#comment': true
}
summaries.forEach(function(summary) {
summary.added.forEach(function(node) {
if (!ignore[node.nodeName] || (node.parentNode && !ignore[node.parentNode.nodeName]) && node.nodeValue.trim()) {
node.nodeValue='PAEz woz ere - '+node.nodeValue;
}
})
})
}
var observer = new MutationSummary({
callback: handleChanges,
// required
rootNode: document,
// optional, defaults to window.document
observeOwnChanges: false,
// optional, defaults to false
queries: [{
characterData: true
}]
});
And another way of checking for a XMLHttpRequest is to hijack it, simply it can look like (in a content script at document start).....
function injectScript(source) {
var elem = document.createElement("script"); //Create a new script element
elem.type = "text/javascript"; //It's javascript
elem.innerHTML = source; //Assign the source
document.documentElement.appendChild(elem); //Inject it into the DOM
}
injectScript("("+(function() {
function bindResponse(request, response) {
request.__defineGetter__("responseText", function() {
console.warn('Something tried to get the responseText');
console.debug(response);
return response;
})
}
function processResponse(request,caller,method,path) {
bindResponse(request, request.responseText);
}
var proxied = window.XMLHttpRequest.prototype.open;
window.XMLHttpRequest.prototype.open = function(method, path, async) {
var caller = arguments.callee.caller;
this.addEventListener('readystatechange', function() {
if (this.readyState === 4)
processResponse(this,caller,method,path);
}, true);
return proxied.apply(this, [].slice.call(arguments));
};
}).toString()+")()");
...which I learn't at the mega awesome Supper Happy Fun Blog.
But as you probably know now, thats not enough for ajax driven sites. Normally you have to write something specific for the site or maybe the Mutation Observer will meet your needs.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With