# 5 Minute Quick Start

# Hello World Plugin

Let's create a simple "Hello World" plugin that responds with a JavaScript alert "Hello, Developer!" when a user says hello world on a tab with a *.lipsurf.com domain.

  1. Clone the community plugins repository and change into the directory.
git clone https://github.com/LipSurf/plugins.git lipsurf-plugins
cd lipsurf-plugins
  1. Install the dependencies.
yarn
  1. Create a folder named HelloWorld in src with a HelloWorld.ts file in it with the following contents:

WARNING

It's important to keep the folder name and plugin name the same. Please use PascalCasing.

PROTIP

Rather than copying and pasting, it's better to type out the code to better grasp its intuitive structure and contents.

// lipsurf-plugins/src/HelloWorld/HelloWorld.ts
/// <reference types="lipsurf-types/extension"/>
declare const PluginBase: IPluginBase;

export default <IPluginBase & IPlugin> {...PluginBase, ...{
    niceName: 'Hello World',
    description: 'A "hello world" plugin that works on the lipsurf.com domain.',
    // a RegEx that must match against the current tab's url for the plugin to be active (all of it's commands minus global commands)
    match: /.*\.lipsurf.com/,
    version: '1.0.0',

    commands: [{
        name: 'Respond',
        description: 'Respond with something incredibly insightful to the user.',
        // what the user actually has to say to run this command
        match: 'hello world',
        // the js that's run on the page
        pageFn: function() {
            alert('Hello, Developer!');
        }
    }]
}};

The meat of the plugin lives in the array of commands. Each Command object has a match property for what the user needs to say to run it, a pageFn property for the code that's actually run and a bunch of meta properties like name, description etc.

  1. Since we're doing the example in TypeScript, we need to compile down to JavaScript.
yarn watch

NOTE

This will watch our *.ts files for changes and compile them to JavaScript whenever a change is detected 😃

  1. Time to load 'er up. Open up Google Chrome and right click the LipSurf icon then "Options".

  2. Turn on "Developer mode" by checking its box.

Screenshot of developer mode setting

  1. Click "Add a Local Plugin" under "Plugins" and navigate to the compiled .ls file (eg. plugins/dist/HelloWorld.1-0-0.0.ls).

NOTE

The ls extension is special for LipSurf extensions. It's basically 3 JavaScript files rolled into one.

Screenshot of the "Add a local plugin" button.


🏁    That's it!    🏁



# Verifying

After a few seconds your plugin should appear in the plugins list if there were no installation problems.

TIP

Check the developer console (<F12>) for hints if there are installation issues.

Screenshot of the HelloWorld plugin in the list of plugins

Now try saying hello world on this tab (since this tab has a lipsurf.com domain it will match our url pattern).

If everything went smoothly, you should see a JavaScript alert like this one:

Screenshot of "Hello, Developer!" alert box


You can also say help to see your new command listed in the auto-generated help overlay.

Screenshot of help cheat-sheet that now includes new "hello world" command


# What's Next

If you think that's nifty, we've just scratched the surface! LipSurf can handle homophones, dynamic match commands, multiple languages and more!

Check out the "Advanced" topics after you take a deep breath and regain your composure from all this excitement!