add dev docs for Google Drive Sync (#735)

Co-authored-by: Ankit Ahuja <[email protected]>

README.md

@@ -51,6 +51,23 @@ If you would like to <strong>add a new feature</strong> to Stylebot or <strong>f
 - Enable the Developer mode.
 - Load unpacked `dist/` as extension
 
+### 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`

src/sync/google-drive/get-access-token.ts

@@ -65,6 +65,7 @@ const validate = async (redirectURL?: string): Promise<AccessToken> => {
 
 const authorize = (): Promise<string | undefined> => {
   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'];