Search code examples
javascriptapigoogle-chromegoogle-contacts-api

"No 'Access-Control-Allow-Origin' header is present" when trying to interact with Google Contacts API from Chrome extension

My goal is to get a chrome extension to be able to add a contact to google contacts. The files are:

manifest.json

{
    "manifest_version": 2,
    "name": "My friend joe",
    "version": "1.0",

    "description": "Add Joe to google contacts",

    "browser_action": {},

    "background": {
        "scripts": ["background.js"]
    },

    "permissions": [
        "identity"
    ],

    "oauth2": {
        "client_id": "1038191206887-v1987tg5v07mp166l0pm68qqblojvpll.apps.googleusercontent.com",
        "scopes": ["https://www.google.com/m8/feeds/"]
    }
}

background.js

chrome.browserAction.onClicked.addListener(add_joe);

function add_joe() {
    chrome.identity.getAuthToken({"interactive": true}, add_contact);
    return true;
}

function add_contact(t) {
    console.log('Token: ' + t);
    // Generate the body of the XMLHttpRequest
    xhr_body =
        `<atom:entry xmlns:atom="http://www.w3.org/2005/Atom"
            xmlns:gd="http://schemas.google.com/g/2005">
            <atom:category scheme="http://schemas.google.com/g/2005#kind"
                term="http://schemas.google.com/contact/2008#contact"/>
            <gd:name>
                <gd:fullName>Joe Schmoe</gd:fullName>
            </gd:name>
        </atom:entry>`;

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "https://www.google.com/m8/feeds/contacts/default/full");
    xhr.setRequestHeader("Content-Type", "application/atom+xml");
    xhr.setRequestHeader("GData-Version", "3.0");
    xhr.setRequestHeader("Authorization", "Bearer " + t);
    xhr.send(xhr_body);
}

The error that shows up error

Steps taken prior to error occurring:

Created an API key with google for a chrome extensiongoogle api

Added the API key to the manifest. Then I loaded the unpacked extension into chrome using developer modechrome extension

Then I clicked the extension's iconenter image description here

That's when the error occurs as shown in the screenshot above. This can be seen by clicking on Inspect views: background page on the extensions page and viewing the console.

Resources referenced:

I'm using the Creating contacts section of the Google Contacts API to determine the request headers and request body. Also it says "To create a new contact, send an authorized POST request".

How to send an authorized request is demonstrated in their javascript API client library docs.

I know the problem stems from issues making a CORS request (Cross-Origin-Resource Sharing). That information is also in the javascript API client library docs but the only example code is using their client library function calls.

Solution

  • In the process of typing out my question I came across the answer. The specific docs I found are: https://developer.chrome.com/extensions/xhr. Just needed to add any domains I'm going to be making CORS requests to needed to be listed beforehand in the manifest.json. So after modifying my manifest to include: 

    "permissions": [
        "identity",
        "https://www.google.com/"
    ],

    I was no longer getting the error and was actually receiving a 201 Created status code response.