Welcome guest, is this your first visit? Create Account now to join.
Results 1 to 7 of 7

This is a discussion on Event when x element is loaded within the Plugins Development section, part of the Chrome Plugins category: Is there a way to catch an element when it is loaded? Say the target webpage's source is this Code: ...


  1. #1
    noctourne is offline Junior Member
    Join Date
    Aug 2009
    Posts
    1

    Default Event when x element is loaded

    Is there a way to catch an element when it is loaded?

    Say the target webpage's source is this

    Code:
    <html>
    <body>
    <div id='main'>
    water
    </div>
    <div id='secondary'>
    milk
    </div>
    <div id='last'>
    cheese
    </div>
    <script>
    {Some script that takes 5 seconds to load}
    </script>
    </body>
    </html>
    How would I replace 'milk' with 'soup'?
    There's a script that would need to finish loading before my user script even begins, and 'milk' would be displayed for 5 seconds.

    If I set my script to run-at start, I could hide the entire div with an injected css style, but I can't add 'soup' to it.

    Is there a way to catch the div when it loads?

    Or is there some other way to do this?

    Thanks in advance.
    Last edited by noctourne; 08-01-2009 at 02:48 AM.

  2. #2
    NicholasPufal is offline Senior Member
    Join Date
    Jun 2009
    Location
    Porto Alegre, Brazil
    Posts
    109

    Default

    The onload() event handler is used to run something right after the page is loaded.

    So you could attach a function - which makes use of setTimeout - to it, and I guess that would provide the desired effect.

    More info can be found here:

    http://www.w3schools.com/htmldom/met_win_settimeout.asp

  3. #3
    Waha's Avatar
    Waha is offline Senior Member
    Join Date
    Apr 2009
    Location
    Oregon
    Posts
    788

    Default

    You could run-at document-start and use setInterval to routinely check the DOM to see if that div exists.
    Best I can think of.
    ~ Projects ~
    Specialized: Carapass Auction Watcher, Kongregate Chat
    Libraries: bliplib
    Tools: manifest syntax highlighting & snippits
    ~ Happy to make extensions for pay too ;D ~
    Portfolio: Search and Share

  4. #4
    PAEz's Avatar
    PAEz is offline Moderator
    Join Date
    Aug 2009
    Location
    Australia
    Posts
    656

    Default

    For an example do you mean doing something like whats in AdSweep?.....

    Code:
    // ==UserScript==
    // @name AdSweep
    // @description AdSweep is an ad blocker for the web
    // @author Charles
    // @namespace http://www.adsweep.org
    // @version 1.6.17.1
    // @run-at document-start
    // ==/UserScript==
    
    adsweep();
    
    function adsweep(){
    		if(location.href){
    			window.adsweepVersion='1.6.17.1';
    			window.ua=navigator.userAgent;
    			window.URL = location.href;
    			if(ua.match(/Chrom(ium|e)|Iron/)){
    				var countTries=0;
    				function checkDOM(){
    					if(countTries<120){
    						if(document.getElementsByTagName("HEAD")[0] && document.getElementsByTagName("BODY")[0]){
    							adsweep_core();
    							window.addEventListener("load", adsweep_removeAdNodes, false);
    							window.addEventListener("load", adsweep_installCheck, false);
    						} else {
    							countTries++;
    							window.setTimeout(checkDOM,250);
    						}
    					}
    				}
    				checkDOM();
    Im new at all this and wanted to do something along those lines myself, but Im a pretty crap coder

  5. #5
    Waha's Avatar
    Waha is offline Senior Member
    Join Date
    Apr 2009
    Location
    Oregon
    Posts
    788

    Default

    Similar I suppose, but that's only setting the onLoad to the body, which will still probably make your extension wait a while after that text is first visible, as it has to load all the elements in body for that event to be fired.
    You can use document.getElementsByTagName("DIV") and iterate through each one to see if the ID is what you're looking for, though. That's more along the lines of what I was thinking.
    ~ Projects ~
    Specialized: Carapass Auction Watcher, Kongregate Chat
    Libraries: bliplib
    Tools: manifest syntax highlighting & snippits
    ~ Happy to make extensions for pay too ;D ~
    Portfolio: Search and Share

  6. #6
    NicholasPufal is offline Senior Member
    Join Date
    Jun 2009
    Location
    Porto Alegre, Brazil
    Posts
    109

    Default

    I don't really know the main reason for doing that, so if it's just "wait 5 seconds and after it's loaded execute the content change" I guess the easier way is like this:

    Code:
    <html>
    <head>
    <script>
    function myChanges(change_for_what)
    {
        var div = document.getElementById('secondary');
        div.innerHTML = change_for_what;
    }
        
    function myTest()
    {
        setTimeout("myChanges('soup')",5000);
    }
    </script>
    </head>
    <body onload="myTest()">
    <div id='main'>
    water
    </div>
    <div id='secondary'>
    milk
    </div>
    <div id='last'>
    cheese
    </div>
    </body>
    </html>
    The onLoad() handler is going to be activated as soon as the page is loaded and your function (myTest) is going to be executed. As the function has a setTimeout in it, it's going to execute the other function (myChanges) after 5 seconds (5000 milliseconds)

    Now if it needs to constantly check, then as Waha says is best.

    setTimeout runs one time (just adds a delay), while setInterval (as the name says) keeps running periodically.
    Last edited by NicholasPufal; 08-01-2009 at 02:08 PM.

  7. #7
    Waha's Avatar
    Waha is offline Senior Member
    Join Date
    Apr 2009
    Location
    Oregon
    Posts
    788

    Default

    I thought he was complaining about it displaying the original content for five seconds, not wanting it. :X
    ~ Projects ~
    Specialized: Carapass Auction Watcher, Kongregate Chat
    Libraries: bliplib
    Tools: manifest syntax highlighting & snippits
    ~ Happy to make extensions for pay too ;D ~
    Portfolio: Search and Share

Similar Threads

  1. Element Hider
    By solcroft in forum Chrome Plugins
    Replies: 31
    Last Post: 12-05-2009, 10:59 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •