Addon Bootstrapper in Komodo

综合编程 ActiveBlog (源链)

As you may or may not know, Komodo is based on Mozilla, same as Firefox. You might even say Komodo is based on Firefox. As you may also know, Firefox has a very flexible addon system. In fact, there are very few areas of Firefox that you cannot customize with an Addon. People have written entire applications inside of Firefox, and entire applications have been written on top of Firefox’s foundation–Thunderbird, Selenium, Postbox and of course Komodo, to name a few.

No doubt you’ve all used Firefox at some point, or are currently using it to read this blog. And you’ve played around with its addons. No doubt you’ve also tried Chrome and have played around with its addons. And no doubt you’ve noticed how much more versatile and powerful Firefox’s addons can be. Now, I’m not trying to turn this into a Firefox vs Chrome blog, I’m simply trying to illustrate how powerful Firefox’s addon system is.

Which brings us back to Komodo; Komodo uses the exact same addon system Firefox does. Not only that, many of the addons written for Firefox can actually run inside of Komodo, although this can be very hit and miss and I would not recommend you try this unless the developer has tested his addon in Komodo. Point being though, it’s the same system.

This has always been the case with Komodo, and many developers have taken advantage of this by developing and contributing their addons . We would LOVE to see more contributors though, and with that in mind, we’ve started two projects over the past few years: the new Komodo SDK and the Addon Bootstrapper. I’m going to focus on the Addon Bootstrapper for the rest of this blog.

The Addon Bootstrapper

The Addon Bootstrapper was developed with one singular purpose in mind: to make it dead simple for someone to start a new Addon project for Komodo. Now before you race over and take the bootstrapper for a spin, I do want to point out that the project is still in beta and we intend to have it finalized by the time Komodo 11 is released. That said, it is fully functional and usable. It simply does not yet have all of the features we intend it to have.

The Addon Bootstrapper was built on top of gulpjs , which no doubt you are already familiar with. And if not, have no fear, it is dead simple to use.

So, let’s take it for a spin and create our very first Komodo addon. For this you’ll need Komodo IDE installed. (Note: while these general steps can apply to Komodo Edit too, we are focussing on Komodo IDE since running the terminal commands is not possible in Komodo Edit–you have to run them from your own terminal emulator.)

Bootstrapping Your First Addon

Start by downloading the latest version of the Addon Bootstrapper from GitHub, place the files in a new project folder that will contain your brand new addon.

Once done, fire up Komodo and point it at your newly created project directory. When you do this, Komodo should automatically detect that your project is using NPM and Gulp and show buttons for them in the dynamic toolbar.

TLDR Version

Before we jump into the nit and gritty, let’s give a quick summary of what we’re about to do. If you feel like you don’t want the detail, you could stick to this summary.

# Clone repo
$ git clone MyAddon && cd MyAddon

# Remove origin (we're not forking)
$ git remote rm origin

# Install dependencies
$ npm install && npm install -g gulp

# Install addon in dev-mode
$ gulp install-to-komodoide/10.2

Restart Komodo to use your newly created addon.

To Build and package our addon simply run

$ gulp build && gulp package

Too much to process? Read on for the full explanation.


Hit the NPM button and select Run Command , Go to Anything will pop up with possible NPM commands to run. Type in or select Install and hit run command inside of Go to Anything. Then do the same thing again, but this time after hitting Install type gulp -g to install Gulp on your PATH. Now if you’re like me, npm probably isn’t configured to install global modules from a user account, so you’ll want to use a terminal to execute the command with sudo (Komodo does not currently facilitate you to run sudo commands).

Essentially we just ran the following 2 commands inside of Komodo:

$ npm install
 $ npm install -g gulp

Writing our Addon

Now that we have all the requirements covered we should update the meta.JSON file in the root of our project directory.Open it up and modify it to suit your needs, or leave it as is if you just want to see the bootstrapper in action.

Once that’s done we can start writing our addon. In most cases, all of the files that you will want to modify are inside the src directory. Note: files inside the src directory may contain the string %AddonId% , this string will be replaced with the ID of your addon when it is built. In most cases you do not want to change this.

The addon bootstrapper comes with a functional “Hello World” example so it will place a toolbar button that, when clicked, will open a window with “Hello World” as the content. You can use that for the purpose of this step-by-step, or you can modify the src files as you see fit.

No doubt you’re probably at a loss at what SDK’s you can actually use, for this I would refer you to our SDK Documentation . If you run into any issues, post a question on our forums .

Building and Running our Addon

Now that we have all our code in place it’s time to run the addon–this is where gulp comes into play. Hit the Gulp button in Komodo’s dynamic toolbar and select Task: install-to-komodoide/10.2 (your entry may vary depending on your version of Komodo).

When that’s done, go ahead and restart Komodo.

When Komodo restarts you should have a new button on your dynamic toolbar that shows the “Hello World” window when clicked. You can modify your src files as needed, then hit the Task: build entry from the Gulp button to build your addon and click the button again in Komodo to see the changes. However, any modifications that modify the main Komodo window will require you to restart Komodo. That is one area we hope to improve before the Addon Bootstrapper is finished.

Packaging our Addon

Once done writing the addon you may want to share it with the community. To do this, hit the Gulp button and select Task: package . This will package the addon into a shareable .xpi file. To then share it with the community refer to our Submit a Package documentation .

And that’s all there is to it. I look forward to seeing your contributions!


Gulp. HPE’s InfoSight self-repairs and makes... HPE is updating its acquired Nimble Storage InfoSight array management system with a machine learning-driven recommendation engine, and adding InfoSig...
关于新版本 webpack gulp 兼容 IE8- 的正确姿势... 最近在使用 webpack 和 gulp 的时候发现压缩后的 js 在 IE8- 下各种报错,蛋蛋的忧桑。 于是花了几个小时整理了下问题及解决方案。 PS: webpack 的 es3ify-loader 插件因为所在层面不同 (解析层之后才是优化层,如压缩等),所以问题依旧。 ...
Starter Project This article is the very first article in a series about Starter Project , a set of latest best practices packed in Gulp tasks. In this article, I am...
Google Web starter kit Download Web Starter Kit (beta) What is Web Starter Kit? Web Starter Kit is an opinionated boilerplate for web development. Tools ...
FEZ前端模块化工程开发框架 FEZ 是面向前端模块化工程的开发框架。主要目的是统一前端开发模式和项目开发结构,自动化前端工作流,提高开发效率和开发质量。使用持续集成等软件工程的架构模式,集成众多业界先进的解决方案,让研发人员更专注于业务逻辑的实现。核心包括功能模块化、结构规范化、及开发自动化。 FEZ倡导的前端开发理...
ActiveBlog责编内容来自:ActiveBlog (源链) | 更多关于

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » Addon Bootstrapper in Komodo

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录