Did you ever notice that almost every tweet features a screenshot? While tweeting screenshots seems cool and credible, the process of creating a multimedia post with a screen capture is rather painful. Every user goes through pressing the camera button, saving the file, digging it up among a myriad of other weirdly-named files, embedding it into the post, editing it, and finally posting (maybe). With TweetShot, sharing your screenshots happens in an instant.

What it does

TweetShot is a user-friendly Chrome extension that captures the selected screen image and embeds it into a tweet template. It uses JavaScript and HTML/CSS to operate quickly and lightly, providing essential assistance to regular and novice Twitter users. After a user clicks on the extension icon, TweetShot offers them to take a screenshot or to simply share a tweet, with an option of attaching the website link available in both modes. When the desired screen area is selected, it automatically converts the image into an accessible format and embeds it into a tweet using the p5.js library and the Twitter API. After the user finishes editing their post, TweetShot is able to send their Tweet with just one mouse click.

How we built it

Having worked with front-end development before, we chose to build our extension using JavaScript and its numerous libraries. We use the p5.js library for Direct Object Manipulation and animation, the Codebird.js library for API connection, and the html2canvas.js library to create custom screenshots. While TweetShot also works as a web application, we primarily considered making it a Chrome extension, so it would be fast and easy to access. We also utilized the Chrome Storage API and the chrome Tabs API for browser-extension communication. Working with front-end styling and bootstrap, we hoped to make our extension look pleasant, simple, and, most of all, useful.

Challenges we ran into

Since JavaScript is a relatively modern programming language and is constantly evolving, we ran into some challenges while figuring out the documentation and case uses of the external libraries. We have also had a fun time working with Google Chrome's strict anti-script restriction policies and figuring out how the pre-installed Chrome APIs work. However, our experience turned out to be very interesting and truly inspiring -- because we realized how powerful Chrome is as a browser and how many options are available when working with the Twitter API.

Accomplishments that we're proud of

We are proud of completing the initial version of the project on time and learning how to use a lot of new Chrome and web development tools. Since the browser and front-end tools are changing constantly, it was a great experience to learn about many new developments in the field and learn how to use some of them. We also loved making Tweeting easier for people! With TweetShot, tweeting news headlines and articles, useful stats, sports rankings, politics updates, and economic developments is so easy (!), and we're very excited to try it out ourselves.

What we learned

We learned that JavaScript is way more powerful than it seems! While slightly bamboozling sometimes, it is a very powerful language that provides a lot of tools for front-end and back-end developers. While connecting an external API using a JavaScript library and HTML/CSS was a completely new experience for us, we loved to see that it is easy and effective, and would definitely recommend it to others!

What's next for TweetShot

TweetShot's first version is out! And we can't wait to jump right back into working on it. In the next few months, we plan to debug the extension and make sure that all features work smoothly, work on customization and processing speed, and then add some styling to the project. We also plan to explore additional functionality that might be useful to a casual tweeter and plan to expand onto mobile platforms! We believe that TweetShot has a great future and will help thousands of people around the world to post what's on their screens in a matter of seconds!

Built With

Share this project: