Advertisement
  1. Computer Skills

How to Customize the Menu Bar With BitBar

Scroll to top
8 min read
Final product imageFinal product imageFinal product image
What You'll Be Creating

Computers are all about information. They keep us up to date with news, products we like, technology advances, and so much more. They are also great for calculations, predictions, and many such things. It isn’t always easy, however, to customize the presentation of the information.

BitBar is a tool for customizing your menubar with information that you want to know. In this tutorial, I'll show you how to install this free application, find and use the pre-built plugins, and how to write your own.

Installing BitBar

The easiest way to install BitBar is by using Homebrew. If you don’t have Homebrew already, you can read this tutorial about using Homebrew. With Homebrew installed, type the following in a terminal:

1
brew cask install bitbar

You can also download BitBar directly from it’s GitHub download page.

BitBar Requesting Plugins DirectoryBitBar Requesting Plugins DirectoryBitBar Requesting Plugins Directory
BitBar Requesting Plugins Directory

Once you launch BitBar, it will ask the directory with the plugins. Just create a directory in the Documents directory called BitBar.

BitBar Running Without PluginsBitBar Running Without PluginsBitBar Running Without Plugins
BitBar Running Without Plugins

Bitbar will load and place the text BitBar in the menu bar area. This is only shown if there are no plugins installed.

BitBar MenuBitBar MenuBitBar Menu
BitBar Menu

When you click on BitBar, you'll see the default menu. You can click the Get Plugins… menu entry to download some plugins.

BitBar Tools Plugin DirectoryBitBar Tools Plugin DirectoryBitBar Tools Plugin Directory
BitBar Tools Plugin Directory

Navigate to the Tools category on the left and the first plugin should be the BitBar Plugins Installer. This plugin installs a BitBar menu of all available plugins that will update once a day. 

You can then install the plugins from BitBar itself and not have to go to the website. Click the button +Add to BitBar on the website and it will get installed directly.

BitBar Confirming Plugin InstallationBitBar Confirming Plugin InstallationBitBar Confirming Plugin Installation
BitBar Confirming Plugin Installation

Every time you install a new plugin, BitBar will ask if you want to install the plugin. Since plugins are just scripts, they could have code designed to compromise the system. BitBar, therefore, is simply ensuring you know the plugin is safe. Since I know this one is safe, click install.

BitBar Installer MenuBitBar Installer MenuBitBar Installer Menu
BitBar Installer Menu

You now have one plugin installed that shows all possible plugins from the BitBar repository.

Selecting the Vagrant PluginSelecting the Vagrant PluginSelecting the Vagrant Plugin
Selecting the Vagrant Plugin

Since I use Vagrant, I'll install the Vagrant plugin. Click on BitBar Plugins and select the Dev/Vagrant/vagrant.30s.pl script as shown.

Vagrant Plugin InstalledVagrant Plugin InstalledVagrant Plugin Installed
Vagrant Plugin Installed

With the new plugin installed, you can see how many Vagrant machines you have in the menu bar. As you can see, I have two Vagrant machines defined. 

Clicking on the menu bar icon shows the status of the two boxes. The first box is for VirtualHostX Vagrant machine and the second is a specialize WordPress machine that I use to develop plugins and themes for WordPress.

Modifying and Creating Your Own Plugins

If you're like me, I prefer little to no text in the menu bar. To change the BitBar Plugins, open the bitbar-plugin-installer.1d.php file in the BitBar directory with an editor. On line 32, you will see this text:

1
echo "BitBar Plugins";

Change it to this emoji instead:

1
echo "🔌";

This is the electric-plug emoji. The Rocket program is the easiest way to add emoji icons to the script.

New Electric Plug Emoji for the BitBar PluginsNew Electric Plug Emoji for the BitBar PluginsNew Electric Plug Emoji for the BitBar Plugins
New Electric Plug Emoji for the Bit

Once refreshed, the menu bar should look something like the above. Since all plugins are script files, you can edit them to be exactly what you want it to be.

One plugin that I could not find is an easy file editing plugin that will allow me to select from a list of files and select which editor to use to edit them. I decided that Ruby would be an easy language to write the script. 

When creating a plugin, give it a unique name, the refresh rate, and then the extension that represents the script type. The refresh rate is a number followed by a letter. The letter can be s for seconds, m for minutes, h for hours, and d for days.

In the BitBar directory, create a file named currentFiles.1h.rb. The script’s name is currentFiles, it will refresh once an hour, and it is a Ruby script. In that file, place this code:

1
#!/usr/bin/ruby

2
# coding: utf-8

3
#

4
# <bitbar.title>Current Working Files</bitbar.title>

5
# <bitbar.version>v0.1</bitbar.version>

6
# <bitbar.author>Richard Guay</bitbar.author>

7
# <bitbar.desc>List of files that I'm currently working on. It allows me to select which editor to user.</bitbar.desc>

8
9
if ARGV.empty?
10
    puts '🗃';
11
    puts "---";
12
    puts "Files To Edit:"
13
    cfn = File.expand_path(__FILE__)
14
    IO.readlines(Dir.home + "/.myCurrentFiles").each { |i|
15
        fn = File.basename(i.chomp!)
16
        puts "#{fn} | bash=\"#{cfn}\" param1=\"#{i}\" terminal=false"
17
    }
18
    puts "---"
19
    puts "Editor to Use:"
20
    editor = IO.read(Dir.home + "/.myeditorchoice")
21
    if editor == "emacs"
22
        print "✔️"
23
    end
24
    puts "Emacs Editor | bash=\"#{cfn}\" param1=\"emacs\" terminal=false refresh=true\n"
25
    if editor == "sublime"
26
        print "✔️"
27
    end
28
    puts "Sublime Text Editor | bash=\"#{cfn}\" param1=\"sublime\" terminal=false refresh=true\n"
29
    if editor == "vim"
30
        print "✔️"
31
    end
32
    puts "Vim Editor | bash=\"#{cfn}\" param1=\"vim\" terminal=false refresh=true\n"
33
else
34
    case ARGV[0]
35
    when "emacs" then
36
        IO.write(Dir.home + "/.myeditorchoice","emacs")
37
    when "vim" then
38
        IO.write(Dir.home + "/.myeditorchoice","vim")
39
    when "sublime" then
40
        IO.write(Dir.home + "/.myeditorchoice","sublime")
41
    else
42
    fn = ARGV[0]
43
    if fn[0] == '~'
44
      fn = Dir.home + fn.slice(1,fn.length)
45
    end
46
        editor = IO.read(Dir.home + "/.myeditorchoice")
47
        case editor
48
        when "emacs" then
49
            `/usr/local/bin/emacsclient -n "#{fn}"`
50
        when "vim" then
51
            `'/usr/local/Cellar/macvim/7.4-101/MacVim.app/Contents/MacOS/MacVim' '#{fn}'`
52
        when "sublime" then
53
            `'/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl' '#{fn}'`
54
        end
55
    end
56
end

The conditional in line 8 tells the script if this is a building menu time or actioning a menu option. When building a menu item, the first line sent to the terminal is placed in the menu bar. 

Line 10 displays the 🗃, card-file-box, emoji for this script. 

Line 11 prints --- to tell BitBar that everything else is to be in the dropdown menu. This will also double as a menu separator. 

Lines 11–16 reads in the file ~/.myCurrentFiles and creates a menu entry for each line in the file. That menu entry has the name of the file with a list of parameters separated by | symbol. The bash="#{cfn}" tells BitBar to run the script referenced in the variable cfn; which will be this same script file. The param1="#{i}" will give the file path or the editor to use, the terminal=false tells BitBar not to run the command in a terminal, and the refresh=true tells BitBar to refresh just this plugin after executing. 

You can repeat the param keyword with increasing ending number for as many parameters as the script or program in the bash command needs. Therefore, a second parameter would be param2=.

Lines 18–31 creates a menu separator, ---, and lists the three editors that I use the most: Sublime Text, Emacs, and Vim. This will place a ✔, heavy-check-mark, emoji in front of the currently selected editor. The file ~/.myeditorchoice keeps the choice between executions. When you select an editor, the menu will refresh to promptly show the change.

Lines 34–51 will process the parameters when given. The parameter passed will be either emac, sublime, vim, or a file path. If it is an editor choice, then the script will store the selected editor in the file ~/.myeditorchoice. If it is a file path, then the editor designated in ~/.myeditorchoice will open the file.

Now, create the file ~/.myeditorchoice with emacs on the first line. Then create the file ~/.myCurrentFiles and place these lines of text:

1
~/.zshrc
2
~/.bashrc
3
~/.zshenv
4
~/.zlogin
5
~/.profile

You can place any file you want to edit in this list. You have to specify the complete path to the file, but you can use shortcuts like ~ to specify the home directory.

File Edit PluginFile Edit PluginFile Edit Plugin
File Edit Plugin

When you refresh BitBar with this new script, you will see the files you have in the ~/.myCurrentFiles file with the editor of choice marked. 

I have Emacs as the editor to use. I can change it to one of the other editors by selecting it. When I select one of the files, the selected editor will open it. That gives me a quick and convent way to edit a file.

In the download is an Alfred workflow to work with BitBar: BitBar Workflow.alfredworkflow. When you load this workflow into Alfred, you have to set the bitbar variable to the directory that you made for the BitBar plugins.

BitBar Workflow Setting Plugin DirectoryBitBar Workflow Setting Plugin DirectoryBitBar Workflow Setting Plugin Directory
BitBar Workflow: Setting Plugin Director

With the bitbar variable configured, you can use the other commands described in the left side of that panel to interact with BitBar and this plugin. 

You can add files to the file list with the Add to Edit List in BitBarAlfred Browser command. The bb:plugins command will show the plugins you have for BitBar. By selecting a plugin, it becomes disabled by moving it to the disabled directory. 

You can also edit the BitBar plugin by pressing ctrl key and selecting a plugin. You can use the bb:unused to see a list of the disabled plugins and re-enable them. You can use the bb:files command to see the files you can edit and remove one or open it with the editor you have selected.

As an example of how you can integrate this into a workflow, I have another Alfred workflow for managing my different projects. When I switch projects, the new project files are placed in to the edit list and the old project files removed. This helps me to quickly bring up files that I need in my chosen editor.

There are more options and computer languages you can use to write your scripts. You can even create a compiled program, but you have to give it an extension. For example, if you create a golang plugin, give the final executable file the extension .cgo. You can find more information about writing BitBar plugins on their GitHub page.

Conclusion

Now that you understand how to use BitBar and how to write your own plugins, go create something useful. This little program packs a lot of usefulness into one small package. 

I use a plugin for weather, todo list, Vagrant machines, earthquakes, and the file editing plugin in this tutorial. The only limit is your imagination. Tell me about your creations in the comments.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Computer Skills tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.