Requiring external libraries when building Chrome extensions

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 :(

Add the API URL in permissions as shown in the [documentation](https://developer.chrome.com/extensions/xhr). — wOxxOm, Nov 30 '18 at 15:42
Updated the code, but still get the same error (adding a capture) — r3x, Nov 30 '18 at 15:57
Uhm, you need to actually load the required script by specifying it in "scripts". Or at least it should be in the current directory of the page so `require()` could load it dynamically. While waiting for an answer, look at the existing extensions that use require() in their background scripts. — wOxxOm, Nov 30 '18 at 16:10

score 0 · Answer 1 · answered Dec 01 '18 at 00:03

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);
        }
    })
}

Requiring external libraries when building Chrome extensions

1 Answers1