Skip to main content

JavaScript Code

Please read the Material Usage Rules on this site.

🔗 Original Page — Source of this material

Description​

This action allows you to execute custom JavaScript code on website pages. You can also use this action to perform arithmetic operations with project variables:

image-20201228-140625

How do I add the action to a project?​

Use the context menu: Add Action → Your Code → JavaScript

image-20210309-170124

Or use the ❗→ smart search.

What is this used for?​

  • Arithmetic operations with variables
  • Interacting with page elements using JavaScript

How do I work with the action?​

The action has several operating modes:

Attention

Regardless of the selected mode, you must specify a variable in the action settings to save the result (even if your code logic doesn’t imply returning a value)

Locally​

The code will be executed in an isolated environment (independently from the browser, outside of it). You can use this method to work with variables, numbers, and strings, and perform any JS-supported data operations.

Tip

You can test this code using the JavaScript Tester.

Attention

When working in this mode, you don't need to specify the return keyword if you want to return a value. The result of this action will be the value calculated on the last line of the action. For example, in the case below, the variable { -Variable.result- } will get the value “6”, which is the result of 2+2*2.

image-20201228-143058

On the current page​

The code will be executed in the browser (in the current instance). This mode is intended for working with the page’s DOM tree and interacting with page elements.

In this mode, you have access to all objects of the current page, and you can use libraries and frameworks loaded on the site (for example, jQuery).

In the extension page​

The code will be executed in the context of the activated extension.

When creating the page window​

The script will run during the DOMWindowCreated event. With this mode, you can override any JavaScript objects before the site accesses them for the first time. There are several execution options in this mode:

  • one time — the code will execute once;
  • on domain — the code will execute every time a window is created for the specified domain (if the In all tabs setting is enabled, the code executes in all instance tabs)
  • always — the code executes every time a window is created, regardless of domain (if the In all tabs setting is enabled, the code executes in all instance tabs)

When loading the page​

In this mode, the script executes during the DOMContentLoaded event. One use case: hiding unnecessary or interfering elements on the page.

image-20201228-145906

Just like the previous mode, there are several execution options:

  • one time — the code will execute once;
  • on domain — the code will execute every time a window is created for the specified domain (if the In all tabs setting is enabled, the code executes in all instance tabs)
  • always — the code executes every time a window is created, regardless of domain (if the In all tabs setting is enabled, the code executes in all instance tabs)

Usage Example​

Arithmetic operations​

As a result of this action, the project variable result will store the result of dividing the project variable height by 2
As a result of this action, the project variable result will store the result of dividing the project variable height by 2

Including JavaScript libraries​

With this action, you can embed a library on a page that didn’t have it initially. For example, you can use code like this to add jQuery:

var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'https://code.jquery.com/jquery-1.10.2.min.js';
document.body.appendChild(s);

image-20210309-164945

Sample project:

❗→ add_jquery.zp