Skip to content

Latest commit

 

History

History
55 lines (33 loc) · 1.75 KB

README.md

File metadata and controls

55 lines (33 loc) · 1.75 KB

What is this?

A YNAB (https://app.ynab.com) browser plugin that helps users view their date sorted transactions clearly with borders around each day.

Before:

Before Image

After:

After Image

Production releases

Firefox

Add-on available at https://addons.mozilla.org/en-US/firefox/addon/ynab-date-borders/

Chrome

Chrome exenstion coming soon!

How to debug

Firefox

From https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension

In Firefox: Open the about:debugging page, click the This Firefox option, click the Load Temporary Add-on button, then select any file in your extension's directory.

Chrome

..todo

Without extension, using dev tools (F12) [FOR DEVELOPMENT ONLY!]

Open browser dev tools and then enter the following in the console. This will render borders around the transactions for given dates.

// fetch a list of all the date elements
let dateElementsOnAccountPage = document.querySelectorAll('.ynab-grid-cell-date.user-data')
// start from 1 instead of 0, because we compare current date with previous date to decide if we want to draw a top border
for(let i = 1; i < dateElementsOnAccountPage .length; i++){
    if(dateElementsOnAccountPage[i-1].innerHTML.trim() !== dateElementsOnAccountPage [i].innerHTML.trim()){
        dateElementsOnAccountPage[i].parentElement.style.borderTop = '2px solid #405163'
    }
}

Contribution

Would you like to contribute? come check out the issue tab, start development and open a PR for me to review.

Disclaimer

This project is not affiliated with YNAB (https://www.ynab.com/), it's just a brower plugin to help solve this specific problem and make the UI more accessible.