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
};
Related
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.
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';
}
I'm trying to set up event, which should fire when iframe is loaded. It is important to acknowledge, that I want this event to fire INSIDE iframe, not in parent page. Actually, parent doesn't have to know that iframe was loaded.
On the beggining I've tried $(function() {....} (document.ready) event, but it doesn't seem to work as expected. It seems that it fires when parent page was loaded (the same event on parent page works as expexted).
Then, I've tried window.onLoad = function() {...} but it doesn't seem to work at all (event not fired).
So, how to do that? Again, I'd like the page inside iframe to know that loading was complete. Basically, I'd like to have event, that will work in iframe page as $(function() {}) in parent page.
I am afraid you can't do this in a right way.
See this link : How to add onload event to a div element?
May be somebody should post the ticket to github.
If you own the page being loaded into the iframe, put the code in the page being shown in the iframe, not the parent page. If you do not own the page being loaded into the iframe, you cannot do what you're attempting due to cross-domain security sandbox restrictions. You would need a CORs solution http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
I hope someone can help me with the following problem. I am currently using jQuery.bPopup.js script for a popup I am using. After a few days I finally managed to get it working, however I am experiencing a small problem. Since my jQuery / PHP knowledge is almost to non-existent I cannot seem get it working properly.
The problem is every link, inside the popup, opens inside the popup, while it should open on the mainpage, or better said; the background page. I tried contacting the author of the script, however he doesn't seem to respond, so I am guessing he is on vacation.
I rather not ditch this popup script, because I already spend a lot of time to get it working properly. Also the script itself is working fine, however for some reason it opens links within the popup instead of opening them on the main page.
Anybody got an idea on how to solve this?
The code I am using is show below.
in the section:
// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#colorButton').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup({
content:'iframe', //'ajax', 'iframe' or 'image'
contentContainer:'.customcontent',
loadUrl: 'popup-page.php' //Uses jQuery.load()
});
jQuery('iframe').attr("width", 920);
jQuery('iframe').attr("height", 400);
jQuery('iframe').attr("scrolling","no", "frameborder","0");
});
});
})(jQuery);
And in the section I am using:
<button id="colorButton" style="width:100%;">testbutton</span></button>
<div id="element_to_pop_up"><div class="customcontent"></div><span class="button b-close">X</span></div>
Though the popup works fine and it displays the contents also fine, it opens links within the popup, instead of opening them on the main / background page.
I hope I posted all the necessary information. I am kinda clueless (yeah, that happens a lot in general).