Menubar WebKit

menubar-webkit helps you create Mac menubar app using HTML and JavaScript without writing any Objective-C code. menubar-webkit exposes an JavaScript object called mw to provide system functions.

API

APIs may change rapidly before 1.0.

// App info (in Xcode)
mw.appVersion
mw.appBundleVersion

// Open/close the popup window
mw.openPopup()
mw.closePopup()

// Quit application
mw.quit()

// Open URL in default browser
mw.openURL("http://pomotodo.com")

// Set menubar icon
mw.setMenubarIcon("data:image/png;base64,iVBORw...SuQmCC")
mw.setMenubarHighlightedIcon("data:image/png;base64,iVBORw...SuQmCC")
mw.resetMenubarIcon()

// Auto start with system
mw.setAutoStart(true) // not implemented yet

// Send system notification
mw.notify({
  title: "Pomotodo",
  content: "Break is over!",
  popupOnClick: true // popup when clicking notification
})

// Set global keyboard shortcut
mw.addKeyboardShortcut({
  keycode: 0x7A, // F1 key
  modifierFlags: 0, // no modifier key
  callback: function suchCallback() {
    console.log("wow")
  }
})

// Clear global keyboard shortcut
mw.clearKeyboardShortcut()

// Open new window
// "url" is relative to "public" folder
// Notice: You can only open one window at the same time,
// or the later window will replace the former window.
mw.newWindow({
  url: "about.html",
  width: 600,
  height: 400
}

// Close new window
mw.closeWindow()

// Pin/unpin pop-up window (won’t close when click outside the window)
mw.pin()
mw.unpin()

Preferences

mw.setupPreferences([
  {"label": "General",  "identifier": "general",  "icon": "NSPreferencesGeneral", "height": 192},
  {"label": "Account",  "identifier": "account",  "icon": "NSUserAccounts",       "height": 102},
  {"label": "Shortcut", "identifier": "shortcut", "icon": "NSAdvanced",           "height": 120}
])

// Must be called after mw.setupPreferences()
mw.openPreferences()

Menubar WebKit also provides some native components for preferences.

More detail: Preferences.md

Auto Update

// Check for update
mw.checkUpdate("https://rawgit.com/HackPlan/menubar-webkit/master/updater/SampleAppcast.xml")
mw.checkUpdateInBackground("https://rawgit.com/HackPlan/menubar-webkit/master/updater/SampleAppcast.xml")

More detail: AutoUpdate.md

Integrating Web App

public/index.html is the portal of your menubar app. public/preferences/[identifier].html are the preference pages (for example, public/preferences/general.html).

To build your app:

0. Delete the current public folder
1. Put your files into the public folder
2. Install CocoaPods
3. cd into the project folder and run pod install
4. Open menubar-webkit.xcworkspace in Xcode
5. Build and have fun!

Remember that Menubar WebKit is still a WIP. When the project is stable enough, I will definitely simplify the build process.

FAQ

• Can I use local storage? Yes.
• Can I use WebSQL? Yes.
• Is Menubar WebKit compatible with Mac App Store? Absolutely yes.

Credits

Menubar WebKit was created by LIU Dongyuan (@xhacker) in the development of Pomotodo for Mac.

Some of the code are taken from:

• MacGap by @maccman
• Bang by @jesseXu
• Cordova OS X by Apache

Used third-party libraries:

• MASShortcut by @shpakovski
• RHPreferences by @heardrwt
• Sparkle by contributors

Contribution

Pull requests are welcome! If you want to do something big, please open an issue first.

License

MIT