From 711c922b12029b04fb804b445d149eca6c0140b1 Mon Sep 17 00:00:00 2001 From: Josh Seltzer Date: Thu, 15 Dec 2022 13:40:08 -0500 Subject: [PATCH] add dev docs for Google Drive Sync --- README.md | 17 +++++++++++++++++ src/sync/google-drive/get-access-token.ts | 1 + 2 files changed, 18 insertions(+) diff --git a/README.md b/README.md index d3b39ae2..57a56689 100644 --- a/README.md +++ b/README.md @@ -53,6 +53,23 @@ If you would like to add a new feature to Stylebot or f - Click Load unpacked extension button - Navigate to the project's `dist/` folder +### Google Drive Sync + +When running the extension from a local build, you will not be able to use the Google Drive Sync feature as the OAuth authenticator will not recognize your extension id. + +If you want to use the Google Drive Sync feature locally, and/or for your own forked version of the extension, you must create a Google Cloud project and associated OAuth consent screen associated with the extension. + +You can do so as follows: + +1. Obtain your extension redirect URL. This is returned by the `chrome.identity.getRedirectURL()` function. This is already printed as a debug console message: if you load your extension into Chrome, click to "Inspect views background page", ensure that the All Levels of messages are shown (particularly Verbose), and then click the Sync button on the extension, the extension redirectURL will be printed onto the console for you to copy. Save this redirectURL, as you will need it below. +2. Create a Google Cloud project. You can do this through the [Google Cloud console](https://cloud.google.com/cloud-console). The name of the project does not matter, but remember it for your own reference. Select the project after it has been created. +3. Search for "Google Drive API" in the console, and click "Enable". +4. Select "OAuth consent screen" in the left-pane menu, and choose Internal (if for local development or sharing within an organization), or External (if you intend to publish as your own Chrome Extension). You can leave all optional fields on first page blank. On the second page, add the following scope: `https://www.googleapis.com/auth/drive.file` +5. When completed, select "Credentials" on the left-pane menu. Click "CREATE CREDENTIALS", and select "OAuth client ID". Under "Application type", select "Web application". Provide any name, and under "Authorized redirect URIs" add the redirectURL that you copied in step #1. +6. You will see "Your Client ID" once you have finished creating the credential. Copy the client ID, and use it to replace the value of `CLIENT_ID` in the `get-access-token.ts` file of this repository. + +That's it! Now you are ready to use the Google Drive Sync feature with your local extension. + ### Release - Add entry to `CHANGELOG` diff --git a/src/sync/google-drive/get-access-token.ts b/src/sync/google-drive/get-access-token.ts index c38a61e0..6956a9cc 100644 --- a/src/sync/google-drive/get-access-token.ts +++ b/src/sync/google-drive/get-access-token.ts @@ -65,6 +65,7 @@ const validate = async (redirectURL?: string): Promise => { const authorize = (): Promise => { return new Promise(resolve => { + console.debug('Extension redirectURL:', chrome.identity.getRedirectURL()); const redirectURL = chrome.identity.getRedirectURL(); const scopes = ['https://www.googleapis.com/auth/drive.file'];