Matthew Roach
🍔 🍟

Authorization header with Ajax requests in local development using Google Chrome

This past week at work we’ve been working with an API to fetch data for a mobile application using PhoneGap that needs to send an authorization header for each request, and if you have ever tried to play with an API that requires you to send an Authorization header chances are you have not being able to from a web application. If you have been able to send such a header this means the API you are using has enabled CORS support.

As you may or may not know, using PhoneGap you are able to build your application using web technologies (HTML,CSS and JavaScript), and then PhoneGap packages it up in a native like app.

So as you are building the application with the help of an ios development company, using web technologies this gives you the ability to develop the application just like you would develop a website. You can use your web browser to quickly browse/ test as you are working, this saving time having to build the app to the device or run the emulator each time.

As mentioned earlier with local development you may not be able to access the API if you need send certain headers with each request.

This is where Chrome Apps come you rescue. Due to the nature of Chrome and it not allowing local requests to send the required headers, you can use a Chrome App to do so, I am not 100% sure on why this is the case but it’s a great little feature.

So first off you need to set up a couple of files in your working folder, so say you have the following folder structure for your app

That’s just a basic outline, what we need is to add to files to the same level as your index.html file. These being manifest.json and background.js, these are the files Chrome needs for an App. For what to put in the files see below. You can copy paste these if you so wish.

One thing to note. See the Permissions array inside the manifest.json this the URL to the website you are making API calls to that require the Authorization headers. In this example I am using a local IP address, as we are actually working with a copy of the web application. You can change this to the URL of the API.

manifest.json

{
 "name": "Local Dev",
  "version": "0.1.0",
  "manifest_version": 2,
  "description": "Local API Stuff",
  "permissions": [
    "http://10.0.0.1/"
  ],
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  }
}

background.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    'bounds': {
      'width': 700,
      'height': 600
    }
  });
});

Now you have these two files inside of your working directory, you now need to load this directory as an unpacked extension. In Chrome go to Extension, which is located in theMenu > Tools > Extensions. Make sure you are in developer mode (make sure the Developer Mode checkbox is ticked). This will give you some buttons. You want to click on the the Load unpacked extension button. Find the folder from earlier where we put the two files manifest.json and background.js, and click OK. This will give you an extension named Local Dev (if you did not rename the name from the manifest above).

Now we have the working folder loaded as a Google Extension. Open a new tab, and click Apps in top left of the new tab, on the bookmarks bar, or you can navigate to it using the following address chrome://apps/. You will see your application listed there, it’s the one without an image.

If you click on it you will get a popup window (700x600px – You can change this in your background.js file) containing your application.

Now you can work on you application like normal, and you can also use Chrome Dev Tools from this window. Use Inspect Element from the right click menu not Inspect background page

One thing to note, when ever making changes to your code and you need to refresh the app, right click in the pop up and choose Reload app.