Requiring external libraries when building Chrome extensions - google-chrome-extension

Question

I am trying to build a chrome extension, that when clicking on the toolbar icon will call a function that interfaces with Asana's api (https://asana.com/developers/documentation/getting-started/quick-start).
Here's my code:
Manifest
{
"manifest_version": 2,
"name": "test",
"description": "asana test",
"version": "1.0",
"browser_action":
{
"default_icon": "icon.png"
},
"permissions": [
"https://app.asana.com/api/**",
"activeTab"
],
"background": {
"scripts": [ "scripts/require.js", "scripts/background.js"],
"persistent": true
}
}
background script
require(['asana'], function (asa) {
var asana = asa;
});
chrome.browserAction.onClicked.addListener(function(tab) {
// replace with your personal access token.
var personalAccessToken = '0/123456789....';
// Construct an Asana client
var client = asana.Client.create().useAccessToken(personalAccessToken);
// Get your user info
client.users.me()
.then(function(me) {
// Print out your information
console.log('Hello world! ' + 'My name is ' + me.name + ' and my primary Asana workspace is ' + me.workspaces[0].name + '.');
});
});
Any ideas what I am missing?
Apologies if this question is simplistic. I went over other similar threads but still stuck :(

Answer 1

Resolved this problem by using #ajax to call the apis directly, rather than requiring asana.
Example the below function was added in the background script
function authTest()
{
$.ajax({
url: 'https://app.asana.com/api/1.0/users/me',
type: 'get',
processData: false,
contentType: 'application/octet-stream',
headers: {
"Authorization": "Bearer 0/....,
},
success: function (data) {
console.log(data);
},
error: function (data) {
console.error(data);
}
})
}