# 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.

<div data-full-width="true"><figure><img src="/files/B5Xq61em0OxE6HNYRdYh" alt="" width="563"><figcaption></figcaption></figure></div>

<mark style="color:red;">Step 1:</mark> 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".

<mark style="color:red;">Step 2</mark>: 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).

<mark style="color:red;">Step 3:</mark> 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:

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

<mark style="color:red;">Step 4:</mark> 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();
}
```

<mark style="color:red;">Step 5:</mark> Main Function Now let's combine everything together in the main function:

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

<mark style="color:red;">Step 6</mark>: 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.

<mark style="color:red;">Step 7:</mark> 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);
    });
})();
```

{% hint style="success" %}
If you have multiple files, GitBook makes it easy to import full repositories too — allowing you to keep your GitBook content in sync.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://rproxylab.gitbook.io/evilginx-lab-by-cfs0x/basics/markdown.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.