How to Develop an Artado Extension

This guide will help you create extensions for Artado Search. Extensions allow you to add custom functionality, enhance the user experience, or integrate third-party services directly into Artado Search.

Getting Started

To develop an extension for Artado Search, you’ll need to have a basic understanding of HTML, CSS, and JavaScript. JavaScript is a powerful language that runs in the browser, allowing you to manipulate the content of web pages, interact with APIs, and more. To learn about basics of Javascript you can check out this documentation.

Tools You'll Need

Text Editor or IDE (Optional): Use any code editor, such as Visual Studio Code, Sublime Text, or Atom.
Web Browser: For testing and debugging your extension.

Basics

Creating Your First Extension

Create a New JavaScript File:
- Start by creating a new .js file in your text editor.
- This file will contain the logic for your extension.

Basic Structure:

Here’s a simple template to get you started:


if (window.location.pathname === "/search") { 
    const urlParams = new URLSearchParams(window.location.search);
    const search = urlParams.get('i').replace("+", " ").trim()
        .replace(/[!"#$%&'()*+,-./:;<=>?@[\\\]^_`{|}~]/g, "").replace(/ +/g, " "); 

    const searches = [
        "whats my ip",
        "what is my ip",
        "what my ip",
        "my ip",
    ];

    if (searches.includes(search)) {
        fetch('https://api.ipify.org?format=json')
            .then(response => response.json())
            .then(data => {
                var element = document.createElement("div");
                element.className = "card";
                element.style = "border: 1px solid #bdbdbd; text-transform: none";
                element.innerHTML = `

Your IP address is: ${data.ip}

`; document.getElementById("web_results").insertBefore(element, document.getElementById("web_results").firstChild); }); } }

Load the Extension:
To test your extension, load it into Artado Search. You can do this manually by pasting your code into the browser’s console or by creating a browser extension that injects your script into Artado Search.
Testing:
Open Artado Search in your browser. Use the browser’s developer tools (F12 or Ctrl+Shift+I) to inspect the page, run your extension, and debug any issues.

Modifying the UI

You can also modify the Artado Search interface by injecting custom HTML or altering existing elements:


(function() {
    let button = document.createElement("button");
    button.innerText = "Custom Action";
    button.onclick = function() {
        alert("Button clicked!");
    };
    document.querySelector("#searchbar").appendChild(button);
})();

Example Extensions

SecimCountdown: A countdown for the local elections of Turkey in 2024.
Dictionary Widget: A dictionary widget extension for Artado Search.
What is my IP: "What is my IP" widget for searches like "whats my ip".

Learn More

Ready to upload your extensions? Visit Artado Devs to share your work!

📅January 4, 2025

Navigation