My First Chrome Extension

Etsy Seller Assistant - PDF Maker

Posted on March 2, 2016 in webdev

See it on Github

Chrome Extensions

Until a few weeks ago, I have never really thought about how chrome extensions work. I just knww that there was almost always an extension for whatever you need. A few of my favorites are Pushbullet, The Great Suspender, ColorPick Eyedropper, Web Developer, and Google Dictionary.

At work I learned that chrome extensions are made of the same material as any webpage. You just have to learn a few key functions and the structure of the manifest.json file.

Etsy

My wife likes to make things. She started selling dolls and stickers on Etsy as a hobby, and now she hopes to make it her main job. We are always searching for new opportunities for passive income, and I found a way that I could help her make her Etsy business "more passive".

I noticed that she creates a customized "Thank You" card for each and every order that she completes. She gets the names from this page, which has all the details about each order she has.

That means that she has to edit her photoshop template and export a new pdf for every person. Some days she gets more than 15 orders, so that's a lot of editing, exporting, and printing.

Javascript and PDFs

I searched "javascript pdf" on google and clicked the first link I found, which led me to a tool called jsPDF. jsPDF is awesome. You can write html, images, shapes, text, and more to a pdf using a coordinate system.

var doc = new jsPDF();
doc.setFontSize(40);
doc.text(35, 25, "Hello world");
doc.save('Test.pdf')

This downloads a pdf in your browser that looks like this:

35 is the distance from the left of the page and 25 is the distance from the top of the page.

You can also add images with this simple line of code:

doc.addImage(imgData, 'JPEG', 15, 40, 180, 180) where imgData points to a data url.

Getting Data from the DOM

The next step was to extract the information I needed from Etsy. Terra uses the "My Orders" page to see her customers' names, addresses, and items ordered. Thankfully, Etsy has clean html, so it was easy to pinpoint the elements I wanted with jQuery.

var allOrderElements = $('.order-summary .order-shipping').toArray()

allOrderElements.forEach( function( order )
{
        var date = $(order).find('.ship-by-time').html()
	var customerName = $(order).find('.address .name').text()

        // do stuff with those variables here
}

I stored those variables in an order object and then pushed them into an array.

Writing to the PDF

Now that I have all the data structured the way I want, I can start drawing on the PDF. First, I'll draw the cutting lines:

function drawLines(doc){

	doc.lineWidth(.3)
	doc.strokeColor('gray')

	var xRightBound = 715;
	var xLeftBound = 80;

	var yUpperBound = 35;
	var yLowerBound = 550;

	var yCenter = 290;
	var xCenter = 395;

	doc.moveTo(xLeftBound, yUpperBound).lineTo(xRightBound, yUpperBound).stroke()

	doc.moveTo(xLeftBound, yUpperBound).lineTo(xLeftBound, yLowerBound).stroke()

	doc.moveTo(xLeftBound, yLowerBound).lineTo(xRightBound, yLowerBound).stroke()

	doc.moveTo(xRightBound, yLowerBound).lineTo(xRightBound, yUpperBound).stroke()

	doc.moveTo(xLeftBound, yCenter).lineTo(xRightBound, yCenter).stroke() 
        // center line 

	doc.moveTo(xCenter, yUpperBound).lineTo(xCenter, yLowerBound).stroke() 
        // center vertical line

	return doc
}

Then, for each order, I will draw some words and two images, including the customer's name:

ordersInRange.forEach( function ( order ){

	if (count == 4){
		count = 0;
		doc.addPage();
		doc = drawLines(doc)
		x = 120;
		y = 60;
	}

	if (count == 2){
		x += 320;
		y = 60;
	}

	doc.fontSize(18)
	.text('Hi '+order.customerFirstName+'!', x, y);

	doc.fontSize(18)
	.text('Thank you for choosing to', x, y+40);

	doc.fontSize(18)
	.text('shop with us! We hope you', x, y+65);

	doc.fontSize(18)
	.text('enjoy your stickers!', x, y+90);

	doc.fontSize(18)
	.text('Pumpkin Paper Co.', x, y+190);

	doc.image(heart, x, y+155, {width: 30}); 

	doc.image(terra, x+160, y+107, {width: 70});   

	y += 260;
	count++
})

After spending hours trying to get custom fonts to work, and converting images to their base64 encoded versions, I finally got a good looking PDF that Terra can use:

The Extension

Here is the final version of the extension:

The datepicker allows Terra to choose which range of orders she wants to complete today. If she picks February 29th, then she will see a PDF with orders from February 29th to today's date, which is March 2nd.


comments powered by Disqus