Inspiration

I'm taking EECS 16A this semester and one thing that always bothers me is the homework submission. I have to combine everything into one PDF to submit, but this includes handwritten, typed, and code components. I usually had to use online PDF combiners to submit everything, but this meant that I had to export multiple PDFs, which was a hassle. So, I decided that for Cal Hacks, I would solve this problem using Google Apps Script.

What it does

This add-on creates a sidebar that allows you to upload a PDF and displays it as a series of pages. These pages are all images, which can be then copied and pasted into the document. PDFs need to be uploaded one at a time, and any previous display is erased before a new PDF is shown.

How I built it

I used Google Apps Script, which is something I am not too familiar with, but thankfully the documentation has some good examples. The sidebar is written in HTML, and unfortunately the online editor doesn’t have many functionalities, so the css and js scripts are also inside the same file. I used PDF.js, and created a separate canvas that would hold each PDF page to be displayed. This allows the user to copy each image individually and paste it into their document.

Challenges I ran into

The one big challenge I had was actually to figure out how to publish it to the public. Most of the code is relatively simple and templated, so I was able to make a working prototype fairly quickly. However, figuring out how to allow other people to use this script took a long time. Because scripts are specific to each Google account, I can’t share the project. Anyways, at the moment, I have it pending for review in the Google Workspace Marketplace, and once it finishes the review process, other people will be able to use it.

Accomplishments that I’m proud of

I’m proud of being able to come up with a working prototype in a day. I have worked on projects in the past, but they usually were at a more casual pace, where making it spanned several weeks or months. This being my first hackathon, I think I did pretty well in coming up with a good idea and making it in this short of a time frame.

What I learned

I learned a lot about how to work with Google Apps Script as well as some different aspects of HTML/JS that I hadn’t known about before. It was really interesting to see that it didn’t take that much code to throw together an add-on, and it was fun to work a little on the front end.

What's next for PDFs in Google Docs

At the moment, it is a somewhat rudimentary prototype. The design is very plain and, while it gets the job done, it is still a little cumbersome because you have to copy each individual page of the PDF. The next steps would probably be to allow for the drag and drop mechanic of pages, as well as a button to insert the whole PDF as a series of images into a certain spot in the document. I believe these are feasible and I already have a couple ideas to implement these features.

Share this project:

Updates