I have a content script from a chrome extension injected in a youtube page.
Something like:
$(document).ready(function () {
console.log("[INFO] Changes detected");
myFunc();
}
When I refresh the script executes as expected. When I navigate in between pages,
ready() does not fire. Does this mean that the document does not change? Inspecting the
elements it obviously does.
Why isn't .ready() firing while navigating on a page?
When navigating between /watch?v=VideoID videos on YouTube, you are essentially staying on the same page. Elements of the page get replaced with the help of XHR requests, but the document itself does not change.
You can see this if you open the Network tab and watch what happens when you navigate to a new video:
Notice how document is not any one of the request types there.
New documents are only loaded when you see document get requested, like in the following, where I press Enter from the address bar:
$(document).ready( only fires when a new page is loaded, not when parts of the current page get replaced with .innerHTML etc.
If you want to detect when parts of the page get replaced, use a MutationObserver.
Related
I'm trying to catch each page load on https://forum.vivaldi.net
//==UserScript==
//#include https://forum.vivaldi.net/*
//==/UserScript==
(function () {
window.addEventListener('DOMContentLoaded', function () {
alert('A new page is loaded');
});
})();
This will fire each time I hit enter in the address bar.
But nothing happens when I navigate from one page to another in the forum.
Why isn't DOMContentLoaded firing at each page load?
That site uses Ajaxify to automatically convert all intra-site links to XHR requests. DOMContentLoaded isn’t firing between pages because there is no new page loading - just content downloading in the background and being inserted into the current page.
You can see this in action by following the activity in the Network tab of your browser’s developer tools.
As for how to catch each page load in this instance, check out the events exposed by Ajaxify.
I have a Chrome extension with a content script that must be injected when the url matches the rule. the thing is, if I refresh the page, it's working, but if I navigate to the url (it does match the pattern) then the event is not triggered.
Any idea why?
Edit: Take into account that it's based on a web app and I've tried using the webNavigation event and still doesn't work.
Edit: Ok, so a working solution (in Chrome at least) is to use the onHistoryStateUpdated event handler.
Possibly due to the cache saved in your Browser. If you hard refresh it, then it will run the whole script again.
You can use the following code:
$(window).bind("load", function() {
// code here
});
You can also try this function:
window.onpageshow()
I have a main page that contains several iframes and those iframes also have multiple iframes. iframes load with dynamic data.now the requirement is that when i click on the back button of browser then that give an alert(this functionality is not allowed). so that the previous iframe can't load. so how can i do this??
Based on iFrame purpose which is an HTML document embedded inside another HTML document. So an IFrame behaves like a window with its own independent content. In jQuery I did this and works for me. hope that would be useful.
$(window.parent.window).on('popstate', function () {
//Some codes
});
But should know that "popstate" event of the window is fired when the active history entry changes. So it works for both backward and forward navigation.
assuming you have no prior condition to check iframe content
window.onbeforeunload = function() {
return 'this functionality is not allowed';
}
While creating a Safari extension, I tried adding an End Script on Youtube pages. The script runs when the first Youtube page loads. The problem is that if I click any of the Youtube links in the page, nothing happens. However, if I open the link in a new tab, it works like a charm. Any idea why this happens?
The code is just a simple alert:
if (window.top === window) {
alert("Hello World");
}
and the pattern I used for the Allowed Domains is:
*.youtube.com
Youtube is a single page application. It loads required parts via XHR without reloading the page.
You can use dom mutation events to detect changes.
I am trying to make a simple Google Chrome extension - like finding a specific element on the page and display an alert.
My problem is that the specific page loads relatively slow (having also some AJAX behind).
How can I make my check only when all the page is loaded?
I tried "run_at" : "document_idle" in my manifest file, but with no success. It shows me the message, before the whole page loads.
I was thinking to check every second (or something) the whole DOM elements, but is this a feasible solution? I think it will slow down the page...
Thanks.
If that element does not exist on the page when you click "view source", then one way of catching it would be listening to DOMSubtreeModified event, which fires each time DOM is modified:
document.addEventListener("DOMSubtreeModified", function(event){
if(document.getElementById("my_element")) {
//element is added
}
});
Have you tried to put your code in window.onload event in "content_script.js"?
window.onload = function() {
// your code
};