Build an N1 plugin
Extend your mail client in five minutes
Plugins lie at the heart of N1. The thread list, composer and other core parts of the app are packages bundled with the app, and you can create your own in a matter of minutes.
1. Install N1
Download and install Nylas for Mac OS X (or Linux). Open it and sign in to your email account.
2. Create a plugin
First, switch over to development mode: go to the Developer menu
and select Run with debug flags.... Dev mode turns on better exception
logging and enables hot-reloading, but runs a bit slower.
Next, choose Create a Package... from the the Developer menu,
and name your new plugin. This will create a directory in ~/.nylas/dev/packages
containing your new plugin.
3. Start hacking!
Open the file <your-package-name>/lib/my-message-sidebar.cjsx in your
favorite text editor. Your new plugin is pre-filled with a simple example component
for the message sidebar (on the right when you're viewing an email), which is defined in this file. It
just shows the name of the selected contact, but with a few quick changes we can build something interesting.
Scroll down to line 34, the render method. We can replace the code here
to change what shows up in the sidebar, and see it happen live when we save.
| <your-package>/lib/my-message-sidebar.cjsx | |
| 30 | |
| 31 | componentWillUnmount: => |
| 32 | @unsubscribe() |
| 33 | |
| 34 | render: => |
| 35 | if @state.contact |
| 36 | content = @_renderContent() |
| 37 | else |
| 38 | content = @_renderPlaceholder() |
| 39 | |
| 40 | <div className="my-message-sidebar"> |
| 41 | {content} |
| 42 | </div> |
Try opening a message in N1 - you'll see the new package's example text show up on the
sidebar. Now delete the content of the render method and save - the text
should disappear.
Now let's add something - a bar that changes color based on the active contact in the sidebar. Drop in the code below, then save the file.
| <your-package>/lib/my-message-sidebar.cjsx | |
| 34 | render: => |
| 35 | <div className="email-color" style={@_getStyles()}></div> |
| 36 | |
| 37 | _getStyles: => |
| 38 | domain = @state.contact.email.split("@")[1] |
| 39 | hue = (domain.split('').reduce(((sum, char) -> sum + char.charCodeAt(0)), 0) % 36)*10 |
| 40 | color = "hsl(#{hue}, 62%, 57%)" |
| 41 | return {background: color, height: 2, 'margin-top': 5} |
You should see a horizontal bar that changes color based on the domain of the contact's email address!