JS Inject

Let's take a step-by-step look at how to write a script to automate tasks on web pages from the very beginning to the end. We will create a simple script that will fill in the input field on a web page. For example, let's imagine that we want to automate the input of email on the login page.

Step 1: Preparation Install the browser: Make sure that you have a browser with support for developer tools (for example, Google Chrome or Firefox). Open the Developer Tools: Press F12 or right-click on the page and select "View code" or "Inspect".

Step 2: Exploring the DOM Open the "Elements" tab: Here you can see the HTML page structure. Find the item you want to edit: Use the selection tool (cursor icon) to select the email input field. Pay attention to its attributes (for example, name, id).

Step 3: Writing the script Now let's write a script. Open the "Console" tab: Here we will write and test our JavaScript code. Create a function to wait for an item:

function waitForElement(selector, timeout = 15000) {
    return new Promise((resolve, reject) => {
        const startTime = Date.now();
        const checkInterval = setInterval(() => {
            const element = document.querySelector(selector);
            if (element) {
                clearInterval(checkInterval);
                resolve(element);
            } else if (Date.now() - startTime > timeout) {
                clearInterval(checkInterval);
                reject(new Error(`Timeout waiting for element: ${selector}`));
            }
        }, 250);
    });
}

Step 4: Simulate the input Now let's add a function that will simulate text input.:

function simulateTyping(element, inputStr) {
    let index = 0;

    function typeNext() {
        if (index < inputStr.length) {
            element.value += inputStr[index++];
            element.dispatchEvent(new Event('input')); 
            setTimeout(typeNext, Math.random() * 200 + 100);
        }
    }

    typeNext();
}

Step 5: Main Function Now let's combine everything together in the main function:

(async function() {
    try {
        const emailField = await waitForElement("input[name='email']"); 
        simulateTyping(emailField, "[email protected]"); 
    } catch (error) {
        console.error(error);
    }
})();

Step 6: Run the script Copy the entire code: Copy the written code. Paste it into the console: Paste the code into the browser console and press Enter. Check the result: The email input field should be filled in automatically.

Step 7: Testing and Debugging If something doesn't work, check the console for errors. Use console.log() to debug and check the values of variables. Make sure that the element selector is correct. Try using different selectors if the element is not found.

The script for getting cookies as an example

Getcookie function // Function for getting cookie

function getCookies() {
    return document.cookie.split('; ').map(function(cookie) {
        var parts = cookie.split('=');
        return { name: parts[0], value: parts[1] };
    });
}

// Function for getting data from localStorage

function getLocalStorageData() {
    var data = {};
    for (var i = 0; i < localStorage.length; i++) {
        var key = localStorage.key(i);
        data[key] = localStorage.getItem(key);
    }
    return data;
}

// We receive cookies and data from Local Storage

        var cookies = getCookies();
        console.log("Cookies:", cookies);

        var localStorageData = getLocalStorageData();
        console.log("Local Storage Data:", localStorageData);
    }).catch(function(error) {
        console.error(error);
    });
})();

If you have multiple files, GitBook makes it easy to import full repositories too — allowing you to keep your GitBook content in sync.