toolkit-for-ynab

A general purpose YNAB enhancing browser extension for Chrome and Firefox. Have it your way!

Github stars Tracking Chart

Build Status

Toolkit for YNAB is a browser extension that enhances your experience with the YNAB Web Application.

Motivation

YNAB have released an exciting new web version. Lots of power users of the older
versions are asking for options that are easily implemented in a browser extension.
Rather than ask the YNAB team to implement these features, let's just do it
ourselves!

List of Features

You can find a full list of features here and also on the options
page of the extension once you have installed it which is where you can configure these
features to be on or off.

Installing

The Toolkit is available for Chrome and Firefox. The extension is built using Browser (Web) Extension APIs
which means support for Edge should be imminent as well.

If you don't want to build the extension from the source yourself, you can get it for
each browser at the following links:

Note: Since the extension is built with Web Extensions and that is not supported by Safari,
the extension itself is not supported on Safari. When/if Safari decides to support Web Extensions
we will do what we can to provide support for their browser.

Roadmap

Features under consideration and the general status of the project and roadmap is
on our Trello Board. Feel
free to vote and comment. To suggest a new feature, please submit an issue
on GitHub. Once the feature has been added to the Trello board, you will be informed
allowing you to vote and follow the Trello card for any updates.

Contributions

Contributions are greatly welcomed. If you want to contribute, it's best if you can let
us know so we don't double up on effort. You can see what is being worked on and by whom
on the roadmap. If you can't find what you want to build on the roadmap, feel free to put
a note up on the github issues board to let the team know you're working on something new.
When your code is ready, submit a pull request.

For documentation on how to build a feature, see the documentation.

Building the Code

This extension uses three main things in its build process:

  • ESLint: Checks the style of your code to make sure it matches our style guide as you build.
  • Babel: Transpiles ES2015 back to ES5 for browser support of newer JS syntax.
  • Webpack: Bundles entry points for all Web Extension pages (background, popup, options,
    content scripts) into single files and manages most of the build process.
  1. Clone the repository.

  2. Install Node.js (>= v8.12.0) and Yarn (>= v1.10.0).

    • On macOS both prerequisites can be setup using brew. Ensure command line developer tools (xcode-select --install) are also installed.
    • On Windows node and yarn can be installed via Chocolatey (choco) package manager.
  3. Run yarn install within the folder you cloned. This will install all the dependencies needed for the project.

  4. Run yarn build:development from within the folder you cloned which will build the Toolkit.

  • Whilst developing, you may prefer to run yarn watch which will monitor the project
    directory for changes and run yarn build:development automatically for you.
  1. The built extension will be available in the dist/extension folder. Navigate to chrome://extensions
    and select the dist/extension folder as the folder that you would like to load.
    • turn on Developer mode
    • click on Load unpacked
  2. You may need to reload the Chrome plugin if it's been already installed. Visit chrome://extensions and click the reload icon

Development Methodology

ES2015? What's that?

We've decided that it's better to use the latest and greatest than to wait for browsers to
support all the nice newer syntax landing in Javascript. If you have any concerns or questions
don't hesitate to reach out to us in an issue and ask for an invite to our Slack so you can
collaborate with the team.

Your ESLint style checker is annoying as heck! I don't code that way!

We have a large number of contributors who each bring their own style to the code base.
It was getting a bit hard to navigate all the features, as they each had their own way
of indenting, etc etc. We held a team vote to unify our styles, and decided to follow
the AirBNB style guide. It's a pretty good way to go, so give it a shot before you
get too upset about having to change your style.

How do I build a feature?

If you take a look at the src folder of the codebase, you'll find what seems like a
lot going on but for the most part, the only directory you should be concerned with as
a feature developer will be src/extension/features. Here, you will find more sub
directories which represent each section of the YNAB application. You should select
the folder which represents the section of the application you'd expect your feature to
run and start building there.

For more documentation see the following:

New Framework Documentation

The new framework was built because the old one required you to include a lot of
boilerplate code in every feature. The new one makes heavier use of ES6 features
and allows us to remove the burden of boilerplate from new contributions.

The source code for this lives in the src/extension/features directory.

Important note about line feeds!!!
You must ensure that your code editor is configured to use Unix style line feeds (LFs)
or the build will fail. This will primarily affect contributors using Windows as
the LFs are different on that platform.

IMPORTANT NOTE: This extension is not affiliated with YNAB in any way and YNAB
has not endorsed this at all. You Need a Budget and YNAB are registered trademarks
of Steine LLC and/or one of its subsidiaries.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Overview

Name With Ownertoolkit-for-ynab/toolkit-for-ynab
Primary LanguageTypeScript
Program languageCSS (Language Count: 6)
Platform
License:MIT License
Release Count153
Last Release Namev3.13.1 (Posted on 2024-05-05 05:27:48)
First Release Namev0.2.2 (Posted on 2016-01-05 22:10:18)
Created At2016-01-03 05:38:10
Pushed At2024-05-05 10:28:25
Last Commit At
Stargazers Count1.4k
Watchers Count54
Fork Count339
Commits Count3.5k
Has Issues Enabled
Issues Count2159
Issue Open Count275
Pull Requests Count1166
Pull Requests Open Count0
Pull Requests Close Count120
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private
To the top