📘 Interpreter Language Documentation (v5.0)

🧠 What is Interpreter Language?

Interpreter Language is a lightweight plugin language for creating widgets such as counters, buttons, inputs, and draggable items or even changing styles and outlook of the target page without writing JavaScript directly. Manifest V3 safe processing of user modification.

Everything is written using easy-to-read commands (all described in this documentation)

This Documentation will guide you step-by-step, if you're new to this!

Basic Structure

Start with plugin's name author etc in commented code inside //===addon=== block.

//=============addon===============
//name : "NewPlugin"
//version : "1.0"
//Author : "You"
//uuid : "random-uuid-here"
//min-environment : "required.engine.version.in.numbers"
//=================================

// then the code starts

🧮 Variables, Constants, and Strings

You can define memory variables and constants that act just like JavaScript variables. You can combine strings and variables using the + sign.

Create a variable:

variable myvar = "Hello! you can change me";
constant myconst = "wow , I won't change";
variable emptyvar;
emptyvar = 100;

Combine strings:

variable greeting = myVar + " World! " + emptyVar;
variable customMessage = pastvariable + "th time " + aconstant;

Interpolation Everywhere:

The loadtextfrom() wrapper works like javascript's ${}. You can embed it inside quotes, inside math blocks, and even in CSS.

myVar = "Today is loadtextfrom(date.format="dayname")";
myConst = loadtextfrom(localstorage.score);

Show them in your HTML:

create div with id(#app)^^
  <p>loadtextfrom(myVar)</p>
^^;

🔢 Math Engine (maybe unstable)

Language supports math calculation logics. You can calculate dynamically using standard math syntax inside a math(...) command block.

Basic Operations:

variable day = 25;
variable total = math((day*100) + (day/5));
variable squared = math(day^2);

Advanced Math Functions:

Functions like rounding, generating random numbers, and formatting string decimals:

variable rounded = math(round(12.6));          // Returns 13
variable floored = math(floor(12.6));          // Returns 12
variable ceiled  = math(ceil(12.1));           // Returns 13
variable randNum = math(random * 100);         // Random number between 0 and 100
variable fixed   = math((12.3456).tofixed(2)); // Returns "12.35"

Interpolation inside/with Math

Because loadtextfrom() works everywhere, you can seamlessly bring in storage inside math blocks.

variable dynTotal = math(loadtextfrom(localstorage.count) * 2 + 5);

Using inside HTML Elements:

create div with id(#app)^^
  <p>Calculated value: loadtextfrom(math(total + 10))</p>
^^;

🎣 Grab from DOM directly

You can retrieve live data from elements on the page. Directly capture innerText, innerHTML, values, and styles from any element using the element(#id).property syntax wrapped in loadtextfrom().

Usage Examples:

variable liveText = loadtextfrom(element(#titleText).innerText);
variable rawHTML = loadtextfrom(element(.my-container).innerHTML);
variable typedInput = loadtextfrom(element(#usernameInput).value);
variable boxStyle = loadtextfrom(element(#app).style);

🔀 Logic (If / ElseIf / Else)

Conditional logic if, elseif, and else statements nearly similar to javascript.

Basic If/Else:

variable myvar = "11";

if(myvar == "11").exec{
  update.element("#status").innerHTML("It is 11!");
}
else.exec{update.element("#status").innerHTML("It is NOT 11!");}

Using Else If (elseif):

variable power = 9001;

if(power < 5000).exec{
  update.element("#scouter").innerHTML("Weak");
}
elseif(power > 9000).exec{
  update.element("#scouter").innerHTML("Strong");
}
else.exec{
  update.element("#scouter").innerHTML("Meh");
}

Standard comparison operators like ==, !=, >, <, >=, <=, and === are supported.
Run any interpreter code inside the exec{....} block.

📦 Creating Elements (Line sensitive)

Write the command in multiple lines. For example:

Step 1 : create div with id(#hello)^^

Step 2: On a new line, add the HTML content you want inside that element.
Don't write content in the same line with this command.(line gap must)

Step 3: Close the command block with ^^; on its own line.

create div with id(#hello)^^
  <p>Welcome!</p>
^^;

🎛️ DOM Update (Dynamic)

Use update.element(...) to modify text, style, HTML and other properties dynamically.

Update innerHTML and innerText Dynamically:

update.element("#hello").innerHTML("New title!");
update.element(".classname").innerText(loadtextfrom(myVar)); //updates all element with this class
update.element("#msg").innerHTML("Status: loadtextfrom(localstorage.status)");

Set Attributes and Styles:

update.element("#hitext").setattribute("placeholder", "Type here...");
update.element(".box").style("color", "red"); //updates all element with this class
update.element("#box").style("color: loadtextfrom(myColor);");

⏱️ Timer Function

Use the timer function to execute commands after a delay or at regular intervals.It allows execution of code blocks after a delay or repeatedly.

Run once after a delay (once):

Specify the time in ms (milliseconds), s (seconds) or just numbers (milliseconds by default).

timer.once(1000).exec{ update.element("#box").style("color", "red"); };
timer.once(1s).exec{ update.element("#box").style("color", "blue"); };

Run repeatedly on an interval (loop):

timer.loop(2s).exec{
  inc localstorage.counter;
  update.element("#display").innerHTML(loadtextfrom(localstorage.counter));
};

💾 Using Storage

Language supports persistent storage through localstorage.

Set a value:

set localstorage.score = "100";

Change values easily:

inc localstorage.count;
dec localstorage.count;
reset localstorage.count;

🚩 State Management (Enable/Disable)

Set hidden "flags" or states using the enable and disable commands.

This command doesn't look usefull , but added for Cool New Tab's support.

Example: Set a state called 'featureX' to "on":

enable featureX;

🎯 Event Listeners (Click Actions)

React to clicks, using create eventlistener-on(#id)-doing^^ ... ^^; code block.

Only click listener for now , will add more listener compatibility in future.

Example: Increase a counter when a button is clicked and dynamically update it with DOM Update:

create eventlistener-on(#plus)-doing^^
  inc localstorage.count;
  update.element("#thenumber").innerHTML(loadtextfrom(localstorage.count));
^^;

🧍 Getting Input Values

Get the text typed inside an input field and save it to storage using the element(#id).value syntax.

Example: Save the text typed inside input #myinput when a button is clicked:

create eventlistener-on(#savebtn)-doing^^
  set localstorage.text = loadtextfrom(element(#myinput).value);
^^;

📅 Date Format

To show formatted dates, use:

loadtextfrom(date.format="dd/mm/yyyy dayname")

To get the current timestamp in milliseconds (like JavaScript's Date.now()), use:

loadtextfrom(date.now)

List:

dd = day number (01–31)
mm = month number (01–12)
mtext = full month name (June)
mtxt = short month name (Jun)
yyyy = full year (2025)
yy = short year (25)
dayname = full weekday name (Friday)
day = short weekday name (Fri)
date.now = number of milliseconds since January 1, 1970

⏰ Time Format

Show the current time using time.format. Supports 12-hour and 24-hour formats.

12-Hour Format:

loadtextfrom(time.format.12h="hh:mm:ss Period")

Result: 04:12:43 PM

24-Hour Format (Default):

If .12h or .24h not specified , it uses 24-hour time by default. Also ignores the Period keyword if added.

loadtextfrom(time.format.24h="hh:mm:ss Period")
loadtextfrom(time.format.24h="hh:mm:ss")
loadtextfrom(time.format="hh:mm:ss")

All Results same : 16:12:43

List:

hh = 2-digit hour 04, 16
h = 1-digit hour preferred 4, 16
mm = 2-digit minute 05 , 45
m = 1-digit minute preferred 5 , 45
ss = 2-digit second 09 , 43
s = 1-digit second preferred 9 , 43
Period = AM / PM (uppercase)
period = am / pm (lowercase)

🔍 Search Widget

Attach a search input box to a link search with a button:

create searcher for-(https://google.com/search?q=!!gettextfrominputid!!)-inputid(#input)-buttonid(#btn)

🎨 Applying CSS (Line sensitive)

To add CSS styles, start with set override css = ^^
and go to next line and write css styles
and final line close with ^^;

Example: Change body background with variable interpolation:

variable themeColor = "#121212";

set override css = ^^
  body {
    background: loadtextfrom(themeColor);
    color: white;
  }
^^;

📦 Making Elements Draggable

To make an element draggable, add dragmovable attribute to the element's div:

<div dragmovable>Drag me!</div>

You can also add offsets or save position:

<div dragmovable="-5,-5">Offset drag</div>
<div dragmovable="-5,-5,stored">Saved position</div>

🧪 Full Example

set override css = ^^
  #app { background: black; color: white; padding: 20px; }
^^;

default localstorage.count = 0;

create div with id(#app)^^
  <h1>Counter</h1>
  <p>Count: <span id="countDisplay">loadtextfrom(localstorage.count)</span></p>
  <button id="plus">+</button>
  <button id="minus">-</button>
^^;

create eventlistener-on(#plus)-doing^^
  inc localstorage.count;
  update.element("#countDisplay").innerHTML(loadtextfrom(localstorage.count));
^^;

create eventlistener-on(#minus)-doing^^
  dec localstorage.count;
  update.element("#countDisplay").innerHTML(loadtextfrom(localstorage.count));
^^;

📏 Rules You Must Follow

In the editor //uuid can't be deleted , you can click it to generate a new one
Never write content inline like create div ^^ <p>Hi</p> ^^; on line sensitive commands. Must use new lines.

💡 Tips

Just make the New tab Cooler ✨