Skip to content

Hacking on TabFern

Jump to bottom
Chris White edited this page Dec 19, 2018 · 7 revisions

At the moment, TabFern has a split personality: the master branch and the switchover branch are different.

If you have never used git before, there are lots of tutorials online. I found Think Like a Git very helpful. Remember that whatever you do on your local copy won't mess up anyone else, so you can relax :) .

master branch

The master branch is what is currently deployed through the Chrome Web Store. Developing on it is easy: all you need is a Git client and a Web browser.

  1. Install Git. (One way is through GitHub Desktop.)
  2. Fork this repo and clone your fork to your local machine.
  3. Create a new branch on your local machine (e.g., git checkout -b mybranch origin/master)
  4. Load the tabfern/ tree as an unpacked extension.
  5. Hack away!
  6. After you make changes to files in tabfern/, refresh the TabFern or settings window to see them.

The master branch is currently only receiving security updates or small releases.

Ignore the webstore/ tree --- that is updated manually on release.

switchover branch

This is the main branch of development. It is called that because we are switching over from the model above to a Brunch-based workflow. See below for why. Developing on the switchover branch involves:

  1. Install Git. (see above)
  2. Install node.js. It comes with npm.
  3. At a command line, npm install -g npx.
  4. Fork this repo and clone your fork to your local machine.
  5. Create a new branch on your local machine (e.g., git checkout -b mybranch origin/master)
  6. At a command prompt (cmd or bash, whichever works), cd to the directory where your fork is.
  7. Run npm install. This will download all the other packages switchover uses.
  8. Run npx brunch w. This will build app/ and the other directories in the branch into public/. It will also leave brunch running. (To build but not leave brunch running, say npx brunch b.)
  9. Load public/ as an unpacked extension.
  10. Hack away! As you make changes, brunch will automatically rebuild the files in public/.
  11. After you make changes to any files, refresh the TabFern or settings window to see them.

Why all the extra complication? Two reasons:

  1. It permits us to use npm packages much more easily. (It also permits more easily keeping those packages up to date!)
  2. It gives us flexibility to adjust the build for other targets, such as Firefox (#100).

Once you have experience with this workflow, I think you will find it works fairly well.

Clone this wiki locally