Feature: Chrome extension

bdougie commented 1 year ago

Type of feature

🍕 Feature

Current behavior

We aren't getting submissions on the platform

Additional context

No response

Code of Conduct

[X] I agree to follow this project's Code of Conduct

Contributing Docs

[ ] I agree to follow this project's Contribution Docs

nickytonline commented 1 year ago

Some background about browser extensions

I've worked on a bunch of extensions including one for a previous job. If you're looking to hook into GitHub.com, I'd recommend taking a peek at the Refined GitHub browser extension. They integrate seamlessly with GitHub.

All the code you write for the extension will work in Chromium based browsers that support extensions, and Firefox basically took on the same API as the Chrome Extension API, so for the most part the extension will be cross-browser. The main difference is Chromium based browser use the version 3 of the manifest while last I checked, Firefox still only supports version 2 of the manifest, although they are working on v3 support.

I'd also recommend using Parcel as the bundler for the project if this goes ahead as they support reloading the extension during development with the manifest version 3.

Suggested Approach

The approach you probably want to take is to integrate directly into the GitHub user interface by adding a Hot Sauce button. You could probably also add an option to the extension that auto-suggests to opensauced when the user stars a repo.

To implement this, you could add a click event listener to the button or link that stars the repo. The click event listener would see if the user has auto-suggest to opensauced, and if it does, it'd make an API call to opensauced to auto-suggest the repo. You could get the repo URL to send most likely via window.location.href

If the option to auto-suggest isn't enabled, surface a button to auto-suggest a submission to open sauced.

Happy to discuss this further and even pair with folks.

mtfoley commented 1 year ago

Yo @nickytonline I wouldn't mind some pairing on this too if you're game!

I work on a couple of chrome extensions at work, and we moved a pretty old code base from MV2 to MV3.

LMK 🚀

0-vortex commented 1 year ago

👍

nickytonline commented 1 year ago

I'm definitely game @mtfoley. @0-vortex @bdougie, would you be OK with @mtfoley and me whipping up a POC based on the suggested approach. We could start off with the Hot Sauce button. Also, welcome to suggestions for the approach.

0-vortex commented 1 year ago

I'm definitely game @mtfoley. @0-vortex @bdougie, would you be OK with @mtfoley and me whipping up a POC based on the suggested approach. We could start off with the Hot Sauce button.

I'm all up for it, electron comes with some quirks, and can help with tooling. We should be able to use the current release system, however, nothing is set in stone. To not complicate things, you can work on the profile repo and duplicate it or transfer it to open-sauced when it's ready to be tooled.

Also, welcome to suggestions for the approach.

Tech wise, best way to handle things is to use the public api and treat the chrome extension as a normal client. For anything that's not available, open an issue and we can figure out options! 🍕

mtfoley commented 1 year ago

We are going to work inside of https://github.com/open-sauced/browser-extensions

mtfoley commented 1 year ago

Dropping this Supabase discussion here in case we can use it: https://github.com/supabase/supabase/discussions/5787 cc @0-vortex @nickytonline

0-vortex commented 1 year ago

Dropping this Supabase discussion here in case we can use it: supabase/supabase#5787 cc @0-vortex @nickytonline

Those discussions treat everything as a client, which is fine, but would focus more on understanding the OAuth flow, what SupaBase does and how it integrates with the natural way of using GitHub OAuth apps.

TL;DR: use a PAT for now, replace the PAT later with some seamless technique, but I doubt it's the one mentioned above ... :<

nickytonline commented 1 year ago

Yeah I was thinking a personal access token (PAT) as well for starters at least which the user would set in the extension settings.

bdougie commented 1 year ago

Sorry for the delay on this. Here is my pitch for a POC. Instead of looking at repos, could we make the POC github profiles and identify if they are an OpenSauced users. If they are we should add details on contributed PRs.

Maybe even an invite to opensauced or view on opensauced.

example from opensauced: https://insights.opensauced.pizza/user/eltocier

cc/ @mtfoley

bdougie commented 1 year ago

Here is an easier option. Let's add a pizza to the profile if they have an opensauced account. Polywork already does this.

https://opensauced.pizza/press to fetch the pizze

https://chrome.google.com/webstore/detail/polywork-for-twitter/cbomeonlbafdkljihnmhkgkjojmenmci

"OpenSauced for GitHub"

nickytonline commented 1 year ago

One thing to note about adding it is GitHub has a status drop down in that spot. We'd need to figure out where to best place the OpenSauced button.

CleanShot 2023-01-27 at 17 05 54

CleanShot 2023-01-27 at 17 09 40

For the button, make it an actual button (Polywork uses a <div />. The reason being is you will get all the accessibility of a button out of the box, i.e. keyboard navigation.

If we get the Avatar container, we can then place the button inside it relative to the container, i.e. document.querySelector('[aria-label="Change your avatar"]').parentElement. The container has position: relative, so then you can set the OpenSauced button via position: absolute relative to the container, pretty much like the status button does it.

bdougie commented 1 year ago

I spoke with @nickytonline about this already, but a heads up. GitHub is once again provided OpenSauced interns through the Octernships program.

My plan is to keep this single intern focused on this problem, setting up the initial browser extension. I have created a new org (open-sauced-craftwork) for 500+ student applicants to try building the basics extension. I will give everyone here access to review, if you'd like but no pressure if you don't have the time.

Also the repo is private so it can connect directly with GitHub Classroom.

This is the assignment. A button should show if the GitHub user is signed up for OpenSauced. Pretty basic, but just the start.