How to Develop an Extension that Allows You to Open URLs Returned by Your Queries

In this tutorial, we will show you how to develop an extension that allows you to open a URL returned in your query results.

Prerequisites

Before you begin, you must install:

  • TeamSQL. You must also have a TeamSQL account that you use to log into your TeamSQL account -- if you don't already have one, you'll be prompted to create an account the first time you launch TeamSQL
  • Node.js. Node.js comes with npm, but because the latter is updated more frequently, you'll want to make sure that you're using the most up-to-date version
  • TypeScript

Install the TeamSQL CLI

You can install the TeamSQL CLI by running the following command:

npm i -g @teamsqlio/teamsql-cli

Next, you'll need to log in with your TeamSQL credentials. Begin the login process by running

teamsql-cli login

You'll be prompted for your username and password. Be sure to use the same set of credentials you're using to log in to your local instance of TeamSQL.

Create Your Extension

The easiest way to begin creating an extension is to clone the Context Menu template provided as a starter for you.

Navigate to the disk location where you want to work on your extension. Run the following command to clone the Context Menu template:

teamsql-cli create

You'll be prompted to choose a template. If Context Menu appears, press Enter (or Return) to begin the process of cloning extension-context-menu-template.

Once you receive a message that the cloning process is complete, you can begin working on your extension.

The extension-context-menu-template Repository Contents

All extension project folders must contain, at a minimum, the four following files in the root:

  • README.MD: Markdown file containing well-written description of your extension, as well as pertinent images, usage instructions, and so on. If we approve your extension and it becomes available in the TeamSQL Extension Store, this file's content will be used as the description.
  • icon.png: An icon (512px x 512px) in PNG format to be used with your extension
  • index.js: The main file of your extension (we will conver the specifics required in this file later on in this tutorial)
  • package.json: File containing configuration information about your npm package

Writing Your Extension

The code for your extension goes into the index.js file, which you will later compile into TypeScript for installation.

There are several different classes that allow you to implement functionality where your extension interacts with or takes advantage of data available in the TeamSQL environment. For the most part, you do not have to utilize these classes if not necessary. The exception to this is your main class, which must extend the Extension class and implement one of the interfaces available via the TeamSQL Extension SDK.

export class TeamSQLExtension extends Extension implements IExtensionContextMenu {
    ...
    ...
}

All of the code implementing your extension's functionality should reside within this class. More specifically, here's one way of implementing this extension:

import { Extension } from "@teamsqlio/ts-extension-sdk/dist/source/Extension";
import { IExtensionContextMenu } from "@teamsqlio/ts-extension-sdk/dist/source/interfaces/groups/IExtensionContextMenu"
import { MenuItem } from "@teamsqlio/ts-extension-sdk/dist/source/menu/MenuItem"
import { DataGridCellContainer } from "@teamsqlio/ts-extension-sdk/dist/source/data/DataGridCellContainer"
import { DataGridCell } from "@teamsqlio/ts-extension-sdk/dist/source/data/DataGridCell"
import { IMenuItemAction } from "@teamsqlio/ts-extension-sdk/dist/source/interfaces/menu/IMenuItemAction"
import * as fs from "fs";
import * as path from "path";
import * as url from "url";
import * as urlValid from "valid-url";

/*
    Your extensions' main class must be named TeamSQLExtension and extend the Extension class. For a Context Menu extension, you must implement the IExtensionContextMenu interface.
*/

export class TeamSQLExtension extends Extension implements IExtensionContextMenu {

    /*
        The IExtensionContextMenu interface has the getMenu():Array<MenuItem> function, which returns a MenuItem array. You must implement the behavior of this function.
    */

    getMenu(): Array<MenuItem> {
        let me = this;

        // Initialize an empty MenuItem array
        let menu = new Array<MenuItem>();
        let showMenuFunction: IMenuItemAction;

        /*
            The first MenuItem is a sub-menu, which you can see in the demo. It'll get stored keys, sign the selected URL, and open a browser window to that URL.
        */

        let menuItem = new MenuItem("Open URL", null, (selectedData: DataGridCellContainer[], allData: DataGridCellContainer[]) => {
            if(selectedData !== null && selectedData !== undefined && Array.isArray(selectedData) && selectedData.length === 1 && selectedData[0].cells.length === 1) {

                // Get value from the selected cell
                var selectedCell = selectedData[0].cells[0];

                // Check if the returned value is a valid URI
                var result = urlValid.isUri(selectedCell.value);

                // If URI is valid, use openURL function to open the URI
                if(result) {
                    this.openURL(selectedCell.value);
                }
                else {
                    this.showAlert("Selected value is not a URI.");
                }
            }
            else {
                this.showAlert("Select only one cell to use this extension.");
            }
        });
        menu.push(menuItem);
        return menu;
    }
}

Prepare for Installation

Now that you've created the extension, you'll need to perform the following steps to prepare it for installation.

  1. In the extension's root, install the required npm packages for this tutorial by running npm install

  2. Build the extension project with TypeScript by running tsc -p .

  3. At this point, you're ready to install the extension. You can do so by running the following command: teamsql-cli submit --install. If the installation was successful, you're ready to use your extension!

Use the Extension

After launching TeamSQL and connecting to the database of your choice, you'll execute a query where the returned data includes at least one URL.

After you've run a query, you can right-click on a cell containing a URL. Using the Open URLs extension, you can have TeamSQL open a new browser window and navigate to the URL listed in the cell you've chosen.

results matching ""

    No results matching ""