CODEWITHSUNDEEP
javascriptjquerygreasemonkeytampermonkey
Daniel Bod
Daniel Bod

Reputation: 25

How to get some code to run on just `.html` webpages?

I have some code which I'd like to run on mywebsite.com/x.html (where x could be anything).

This code below (I'm hoping) will find the button on the webpage with the ID 'mybutton' and automatically click on it after a delay of 1 second:

<script>
  window.onload = function() {
      setTimeout('document.getElementById('mybutton').click()', 1000);
  }
</script>

I Googled and found the Tampermonkey Chrome extension but the only problem is that I have no idea how to run it only on the specific webpage(s) mentioned above.

I kinda just slapped my code onto the end of the example layout given by Tampermonkey and got this:

// ==UserScript==
// @name         My Fancy New Userscript
// @namespace    http://your.homepage/
// @version      0.1
// @description  enter something useful
// @author       You
// @match        http://website.com
// @grant        none
// ==/UserScript==

<script>
  window.onload = function() {
      setTimeout('document.getElementById('mybutton').click()', 1000);
  }
</script>

How can I make it run on the specific webpages mentioned at the beginning?

Upvotes: 0

Views: 212

Answers (3)

DominicValenciana
DominicValenciana

Reputation: 1731

You can define what web pages the Tampermonkey code will run on using an asterisk as a wild card.
So this makes it work on any subdirectory of your website:

// @match   http://www.mywebsite.com/*

To make it just work with html pages, change up the wild card:

// @match   http://www.mywebsite.com/*.html

Upvotes: 1

Brock Adams
Brock Adams

Reputation: 93473

Several things:

  1. To restrict operation to just .html pages, either check the location.pathname (see below)
    or use @include. EG:

    // @include http://website.com/*.html

    For precision and performance, I recommend using @match more than @include.

  2. You almost always need a wildcard at the end of the @match directive. EG:

    // @match http://website.com/*

    Note that wildcards are much more flexible in @includes, but they are "safer" and perform faster in @matchs.

  3. You can't put direct HTML tags, like that <script>, in a userscript. Anyway, it is not needed at all in this case.

  4. You rarely need window.onload in a userscript. Userscripts fire at an ideal time by default, for most cases.

  5. Do not use "eval" strings in setTimeout. This has performance, troubleshooting, and security problems -- if it works at all.
    The question's setTimeout use has most of those, and a syntax error as well.

  6. A straight .click() call will sometimes work, and many times not.
    If it doesn't work, send a click event.

  7. Avoid arbitrary timers. EG: setTimeout(..., 1000);
    This is a form of "Time bomb" code. It will work sometimes. Other times, the page will be delayed. When it works, it may slow your script down far more than is necessary.
    Use an AJAX aware utility. See the code below.

Putting it all together, using jQuery and a standard utility to both save work and increase robustness, your script would be something like this:

// ==UserScript==
// @name     _Auto click the X button on Y pages
// @match    http://website.com/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

//--- Does the *path* part of the URL end in `.html`?
if (/\.html$/i.test (location.pathname) ) {
    waitForKeyElements ("#mybuttonID", clicktargetButton);

    function clicktargetButton (jNode) {
        var clickEvent  = document.createEvent ('MouseEvents');
        clickEvent.initEvent ('click', true, true);
        jNode[0].dispatchEvent (clickEvent);
    }
}

Upvotes: 3

Dimi Mikadze
Dimi Mikadze

Reputation: 474

you can get current url segments via pure javascript with this code:

var url = window.location.pathname.split( '/' );

so if your link is mywebsite.com/about, about will be url[1]

you can define pages array where you want to execute your code and then check with current url

var url = window.location.pathname.split( '/' );
var pages = ['home', 'about', 'services'];

for(var i=0; i<pages.length; i++) {
    if(pages[i] === url[1]) {
        // execute your code
    }
}

Upvotes: 0

Related Questions