how to auto trigger my greasemonkey script every time i open a page

Auto-Triggering Greasemonkey Scripts on Every Page Load

Learn how to configure your Greasemonkey or Tampermonkey scripts to automatically execute on every page you visit, ensuring your custom functionalities are always active.

Greasemonkey (and its popular alternative, Tampermonkey) empowers users to customize web pages by injecting custom JavaScript. A common requirement is to have these scripts run automatically every time a page loads, without manual intervention. This article will guide you through the essential metadata commands to achieve this, ensuring your userscripts are always active where you need them.

Understanding Greasemonkey Metadata

Greasemonkey scripts begin with a metadata block, enclosed by // ==UserScript== and // ==/UserScript==. This block contains directives that tell the browser extension when and how to run your script. The key to auto-triggering on every page load lies in correctly configuring the @match and @include directives.

// ==UserScript==
// @name         My Auto-Triggering Script
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Automatically runs on every page!
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here will run on every page that matches the @match directive
    console.log('Greasemonkey script executed on:', window.location.href);

    // Example: Add a simple element to the body
    const div = document.createElement('div');
    div.textContent = 'Hello from Greasemonkey!';
    div.style.cssText = 'position: fixed; top: 10px; right: 10px; background: lightgreen; padding: 5px; z-index: 9999;';
    document.body.appendChild(div);
})();

Basic Greasemonkey script with *://*/* to match all pages.

The @match Directive: The Preferred Method

The @match directive is the modern and recommended way to specify which URLs your script should run on. It uses a pattern-matching syntax that is flexible and powerful. To make your script run on every page, you use a wildcard pattern.

flowchart TD
    A[Browser Navigates to URL] --> B{Does URL match @match pattern?}
    B -- Yes --> C[Greasemonkey Injects Script]
    B -- No --> D[Script Not Injected]
    C --> E[Script Executes]
    E --> F[Page Modified/Functionality Added]
    D --> G[Page Loads Normally]

Flowchart illustrating how @match determines script execution.

Using @include for Broader or Legacy Compatibility

The @include directive serves a similar purpose to @match but uses a more traditional wildcard syntax. While @match is generally preferred, @include can be useful for broader patterns or for compatibility with older scripts or specific Greasemonkey versions. To match all pages, you would use *.

// ==UserScript==
// @name         My Auto-Triggering Script (using @include)
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Automatically runs on every page using @include!
// @author       You
// @include      *
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    console.log('Greasemonkey script (via @include) executed on:', window.location.href);
})();

Greasemonkey script using @include * to match all pages.

Practical Steps to Implement

Implementing these changes is straightforward within your Greasemonkey or Tampermonkey extension.

1. Open your Userscript Editor

Click on the Greasemonkey/Tampermonkey icon in your browser's toolbar and select 'Dashboard' or 'Create a new script'.

2. Locate or Create Your Script

Either open an existing script you wish to modify or create a new one.

3. Edit the Metadata Block

Find the // ==UserScript== block at the top of your script. Add or modify the @match or @include directive.

4. Save Your Changes

Save the script. The extension will automatically apply the new matching rules.

5. Test Your Script

Navigate to various websites to confirm that your script is executing as expected on every page load.