Hi, I'm Sabrina! Welcome to My Website

I will be documenting my project progress here

Project Proposal

Objectives: Build a chrome extension that helps online shoppers with the return process Features:

Reminds users of return date
Logs users purchases
Database with stores and return policies
Leads users to accurate return policy/sites

LEVEL 1:

Chrome extension with:

sign in/sign out and account features
user database
Interactive interface
Able to trigger when user is on a check out page.
- Chrome extension application is able to recognize when user has navigated to checkout pages of website(honey & capital one shopping do this).
- Chrome extension application is able to pop up when a user is on a shopping site (honey & capital one shopping do this)
Logs when a person has made a purchase.
- Application is able to register on a separate database when a person has made a purchase.
- Where to house this separate database?
- How to have this register?
Connects to a returns database.
- The database will be basic where I will manually fill in return dates/policies of companies.
- Find a place to house the database that is compatible with chrome extension.
- Have the chrome extension backend be connected to database

LEVEL 2:

All features in level 1
Sends automated email to user when prompted
Has capability of sending an email to user when
Scrapes web to generate extensive returns database. Make a web scraper to compile a database of return policy and dates

1/23 - 1/29 Week 1: Planning

Research and explored potential project ideas. Developed outline of project.

1/30 - 2/5 Week 2: Research

What I did this week: Researched other similar chrome extensions to learn how their features work and how that can be applied/tweaked for my project
Honey & Capital one shopping (Chrome extensions that are also related to online shopping)
Have features that I would like to imitate like:
Recognizes when user is on an online shopping site
Pops up when a user is on the check out page of a site
Has login/user capabilities
Stores some type of database on discount information and connects that with user input/info from shopping sites.
Challenges:
Unsure how most of the features I want to imitate from Honey & Capital One Shopping are implemented as they do not publicly document this. Features such as: recognizes when user is on a check out page.
Goals for next week:

Learn how to make basic chrome extension
Set up basic chrome extension

2/6 - 2/12 Week 3: Chrome Extension Set up

What I did this week:

Learned the basics of building web extension (manifest.json, loading unpacked extension, console logs/errors, error logs, etc)
Read Google Developer Guides on getting started with chrome extensions:
https://developer.chrome.com/docs/extensions/
https://developer.chrome.com/docs/extensions/mv3/getstarted/
https://developer.chrome.com/docs/extensions/mv3/getstarted/extensions-101/
https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/
Followed tutorials from Google Developer Guide on how to build out chrome extension:
Reading Time Extension Example : https://developer.chrome.com/docs/extensions/mv3/getstarted/tut-reading-time/
Tabs Manager Extension Example: https://developer.chrome.com/docs/extensions/mv3/getstarted/tut-tabs-manager/
Watched Youtube Tutorials on how to build Chrome Extension:
Build a Chrome Extension: Tutorial for Beginners https://www.youtube.com/watch?v=0n809nd4Zu4&ab_channel=freeCodeCamp.org
Create a Google Chrome Extension (For Beginners) https://www.youtube.com/watch?v=uV4L-wcnK3Y&t=559s&ab_channel=iEatWebsites

2/12 - 2/19 Week 4: Set Up Basic Chrome Extension

Coded basic chrome extension in Visual Studio Code using the research I had done in the previous week. Got a basic Chrome Exension up and running that can be be accessed through my Chrome Browser. Load Unpacked onto my Chrome. Able to be clicked on and viewed.
Challenges:

Extension has no styling so it is not very visually appealing

Goals for Next Week:

Familiarize self with javascript and chrome extension: Get extension to recognize which site it’s on and later on check to see if site user is on is in our database
Make database of sites and return policies: Research how to do this and best way to do this for a chrome extension

2/12 - 2/19 Week 5: Recognizing Online Store User is Visiting & Database Research

Research how to get Chrome Extension to know what shop user is viewing. Figured out best way to do this is to first get the URL the user is currently viewing and then parse through that URL to figure out exact store.
Utilized Stack Overflow to figure out how to get URL from Chrome Extension. https://stackoverflow.com/questions/1979583/how-can-i-get-the-url-of-the-current-tab-from-a-google-chrome-extension
Used Javascript string manipulation to parse through URL to be left with only the store name.
Database Research
Started researching potential ways to store store return policies and user information. Research on database used with chrome extension:

Locally or on server?
Specifically → how to store persistent data with chrome extension
Chrome.storage API?

Currently attempting to use JSON to store data → more compatible for storing temporary data? Current Plan:

Make database of sites and return policies and connect to extension
First step – get extension to display return policy for specific store
Get extension to link to specific store return policy
Match store name and see if it exists in our database

Research on JSON database & How to get json data in javascript:

https://www.w3schools.com/js/js_json_parse.asp#:~:text=Use%20the%20JavaScript%20function%20JSON,will%20get%20a%20syntax%20error.
https://sebhastian.com/display-javascript-variable-html/
https://stackoverflow.com/questions/12070631/how-to-use-json-file-in-html-code
https://developer.chrome.com/docs/extensions/mv2/xhr/

Challenges:

What to do if store URL and store name are different?
Unsure which database option is most suitable for this project
Never implemented/connected database to frontend before and am unsure how this would work out and potentially how long this woudl take
json storage seems promising but having some trouble with implementation

Next Week: Populate database with store and return policies. Figure out how to recognize when user is on a checkout page.

2/27 - 3/5 Week 6: Prioritization Reorganization and Populating Database

Decided to not prioritize user log-in features and checkout page information as they are not essential in pulling together a MVP solution for the problem I'm tackling. These would be great to look into in the future
Prioritizing implementing the database and then connecting that with the front end is a priority is that is an essential part of the extension. The database should store the store name and it's corresponding return policy. At the most basic leve, the extension should show the store's return policy and after that is implemented I will try to calculate and show the return deadline to users.
Implementing Database:

(Done) Decided on using a Javascript Dictionary for simplicity instead of JSON
(Done) The key of the dictionary contains the store name and the value contains the return policy
Chrome extension should display store return policy based on which store user is on

Challenges:

How to display different return policy based on store user is on

Next Week:

Research how to get extension to show return policy specific to store.

3/6 - 3/12 Week 7: Pivoting: Gmail, OAuth, and Google Chrome API

While researching this week, I stumbled upon an app I hadn't seen before: Returnqueen
This app is for helping customers bring their returns back to the store from their house, but has a feature that seems to connect to users' emails and get their shopping information from there. This could be really good route to take to get more accurate order and shipping information from users. Questions:

How does Returnqueen sign into email and get all of your orders from email (guessing through order confirmation)?
How does it show accurate/semi-accurate date to return according to specific store return policies?
How hard is it to get access to gmail data? – get confirmation. How hard is this compared to getting to after checkout page

Research on getting access to gmail information → this can be done via the gmail API:

Gmail API step by step implementation: https://developers.google.com/gmail/api/quickstart/js
Manage API site: https://console.cloud.google.com/apis/api/gmail.googleapis.com/metrics?project=returnreminder-383414
Chrome web store developer dashboard: https://chrome.google.com/webstore/devconsole/3d633572-3f60-4e18-9843-7270b81f9ea0/settings
How to access user’s gmail: https://developers.google.com/gmail/api/guides
Example of chrome extension using OAuth and google chrome API: https://developer.chrome.com/docs/extensions/mv3/tut_oauth/
Develop on google workspace: https://developers.google.com/workspace/guides/get-started
Create Google Cloud project: https://developers.google.com/workspace/guides/create-project
Javascript quickstart (Quickstarts explain how to set up and run an app that calls a Google Workspace API.) https://developers.google.com/gmail/api/quickstart/js
Gmail API Overview: https://developers.google.com/gmail/api/guides
Configure OAuth Consent Screen: https://developers.google.com/workspace/guides/configure-oauth-consent
Setting up OAuth 2.0: https://support.google.com/cloud/answer/6158849#zippy=%2Cweb-applications%2Cnative-applications
Learn about authentication and authorization: https://developers.google.com/workspace/guides/auth-overview
No code gmail api scraper: https://stevesie.com/apps/gmail-api#:~:text=Scraping%20Gmail%20Data,email%20content%20from%20their%20API.

Next steps: Research more into linking gmail. Try some tutorials on Google APIs to see how difficult this would be

3/13 - 3/19 Week 8: Spring Break

3/20 - 3/27 Week 9: More Google API

Started implementing Gmail API to chrome extension
Added necessary code to manifest.json, index.html, javascript files, etc.
Uploaded extension to developer dashboard
Created OAuth Client ID
Registered OAuth in manifest
Initiate first OAuth Flow

Challenges: Stuck on initiating first OAuth Flow → bug somewhere. Keep getting error message: