As a hobby, my wife and I used to run a small T-Shirt business which sells some funny and nerdy homemade T-Shirts, but we were also selling on eBay to increase sales. As a business, you need to have invoices about everything you buy and sell. However, I found no way to export the eBay view into a nice PDF for our accountant. Then I created a small browser extension for that.

DISCLAIMER:

1. I know that I could have used eBay API to do that but I feel that doing an extension is easier.

2. This extension is not affiliated with, endorsed, or sponsored by eBay Inc.

Demo

First a small demo of how it works so that you can figure out, how useful it is for us.

How it works

There are few steps to get to this result:

  1. We collect all the data via jQuery in a content script and write these to local storage.
  2. We create a popup menu to retrieve the invoice number the user wants to give.
  3. We generate the PDF with all the data stored in the local storage.

Collecting all the data

I started with data collection — it’s easy for someone writing scrappers for a living. This page on eBay has an easy structure but the articles are a bit cumbersome. Thankfully there are a lot of ids for the user data fields, speeding up the process.

At the end of the script, we send all the data to the chrome.storage.sync because it’s the easiest way I found to send information between scripts in chrome extensions.

The popup

Once we have the data, we want to add a popup where the user will be able to add the number of the invoice that he wants (eBay cannot have this information since we sell on many channels).

The popup is super basic:

It’s a form with a number field and a submit button.

The popup.js is a bit more complex because we need to call some libraries before calling the pdf rendering algorithm (otherwise it cannot work).

This script retrieves the invoice number that the user entered and triggers the rendering of alert.js (which is our pourly named render algorithm) with all the required dependencies for creating a PDF.

NB: The concatenateInjections is not from me, I found it on stackoverflow. It’s an elegant way of loading all the (required) libraries in a single function.

Generating the PDF

Generating the PDF was pretty easy because I had past experience with JSpdf. It’s not my best code but this is working ok. I need to highlight the quality of jsPDF-AutoTable which made the implementation way faster.

Pretty straightforward, the only interesting parts are:

  1. I create the PDF from start to bottom and use a current variable to know at which height I currently am. This current variable works well with the autoTable because you can retrieve the Y from the end of the table via doc.lastAutoTable.finalY.
  2. I do some weird string replacements to be able to parse eBay numbers.
  3. I use only one autotable for the whole invoice. It works but doesn’t produce the cleanest result.

Conclusion

It was cool to play around with chrome extensions and that seemed to be the best approach to solve this problem. An alternative would have been to take the eBay API but I didn’t want to manage any authorisation. Now I just need to send the extension to my wife and we can be invoicing 10000x faster!

The whole code is available here. You might need to change it quite a bit for your use case but this is a useful resource to start experimenting with chrome extensions.

If you liked the article, you can follow me on Twitter