While brainstorming, we were working on difficult homework assignments involving complicated drug names and concepts. We realized that this common issue could be made a lot simpler with the help of a Chrome extension, and more importantly, that a solution to this issue could be much more impactful than helping with schoolwork.

What it does

Our extension uses the openFDA API to show the top five uses for a highlighted drug in the popup window.

How we built it

First off we started by taking in user input after detecting a mouseup event and then sending this to the background which then made the text of the drug available to sketch.js. At this point, the drug name will be processed by both the API and the popup window for data retrieval and presentation respectively. In terms of back end, we centered our work around openFDA, which was the API we incorporated. Essentially, after accessing the user input sent in from the client side operation, we segmented the API call into sections so that each time, a new URL could be produced to reference whatever term the user chose to send We then used this to extract the relevant set of elements we wanted from within the json object and parsed through to retrieve the five most common uses of the selected medication. Finally, we incorporated the p5 library to send the drug name and applications to the popup window that appears when clicked format popup window which displays the drug name and information.

Challenges we ran into

We encountered challenges on both the front and back ends of our project. On the front end, we encountered numerous difficulties while trying to grab the highlighted text from the page, display it on the popup, and send it to the FDA API. On the back end, we had many barriers to successfully implementing the FDA API correctly. In general, our lack of experience made the process pretty tough at first.

Accomplishments that we're proud of

By the end of our project we completed a functional final product that did the task we set out to do. Starting from no experience we gained a solid foundation in the fundamentals of JavaScript and HTML as well as how to develop chrome and extensions and the incorporation of APIs.

What we learned

We learned so much in just two days through the framework of building a Chrome extension, from using GitHub and VS code to push, pull, and edit our work, figuring out JavaScript, Node.js and HTML, and eventually integrating the API endpoint URL into our extension framework. Not only did we learn the technical parts of the project, but we also got a general sense of the process of dividing a large task into smaller parts. We found tutorial videos to be very helpful and especially coding along with it to learn it in real time -- at one point most of our group coded a Chrome extension that made every image into Will Smith. It was also very enlightening to see how as we accumulated more knowledge we recognized patterns across programming languages. Additionally, we learned to compromise and bounce off of each other as a group.

What's next for Rx Appendix

Rx Appendix was just one example of the many possible impacts of publicly accessible FDA data, and in the future we can also integrate other elements from the openFDA API, such as its impacts on certain demographics, active ingredients, brand-generic names, etc.

Built With

Share this project: