Trellosnap

---

This is a Chrome Extension that helps with the task of website bug reporting via Trello. It gives you the option to take either a screenshot of the visible portion of the website or a custom selection and allows you to annotate the screenshot (add arrows and boxes). After adding a card title and description, the screenshot can be uploaded to Trello to a board of your choosing, under a specific list, with optional labels. You will also be able to submit your browser information to help with further debugging.

---

Development Setup

This extension uses Ruby and Node build tools. The following instructions assume that you have both Ruby 2.0+ and Node (with NPM) installed.

• Clone
• Run gem install bundler
• Run npm install -g coffee-script
• Run npm install -g jade@1.8.1
• Run bundle
• Run foreman start
• Add the ext/ folder to chrome as an "Unpacked Extension"
• Tweak code within the src folders

---

To-do

• Refactor edit.coffee

• Refactor edit.sass

• Fix annotation arrow tip

• Allow screenshots to be attached to existing cards

---

Timeline

01-22-15

Version 0.1.0 published on the Chrome Web Store.

01-21-15

Made the Edit screen responsive. Cleaning up.

01-20-15

Hooked up the final event listeners. Implemented localStorage for previously used boards and lists. Added a login button. Added icons. Getting ready for verion 1 release.

01-19-15

Styled the 'Add New Card' form.

01-18-15

Finished the Trello API integrations. Got uploading working. Added basic forms to do test submits to Trello.

01-16-15

Added annotations functionality. No text for now (since word wrapping is difficult with <canvas>) - only boxes and arrows. Started work on the Trello integration.

01-15-15

Added functionality to the edit view. It now gets populated with the captured image. Started work on adding the annotations functionality.

01-14-15

Finished the partial screenshot selection tool.

01-13-15

Currently working on the partial page screenshot selection. There are no lightweight libraries out there that will do that; therefore, writing a custom solution.

01-10-15

Hooked up event to capture visible page and send the image to an 'edit' screen. Styled the Browser Action:

01-08-15

Set up project. File organization. Started throwing together needed files etc.

---

Credit where it's due:

• Loosely based on the extension of louischatriot. Github, Chrome Store

• Uses the lightweight, enhanced/modified annotation library of DjaoDjin. Github, Website

---

Tags:

screenshot to trello, trello screenshots, upload screenshot to trello, trello bug reporting, trello qa, website qa trello