Google Chrome extension and Twilio Client API

Question

I'm a newb trying to make a Chrome Extension that utilizes the Twilio Client API and a Node.js back end to make outgoing calls from the browser.

I'm having some trouble to run Twilio from my Extension, I get "Twilio is not defined".

Here is my manifest file:

{
  "name": "<NAME>",
  "version": "0.0.1",
  "manifest_version": 2,
  "permissions": [
    "contextMenus",
    "http://localhost:3000/",
    "http://*.twilio.com/*",
    "https://*.twilio.com/*"
  ],
  "background": {
    "scripts": ["lib/jquery-1.7.2.min.js","lib/twilio.js","background.js"]
  }, 
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*", "file:///*/*"],
      "css": ["css/styles.css"],
      "js": ["lib/jquery-1.7.2.min.js"]
    }
  ],
  "icons":{
    "128":"icon_128.png"
  }
}

and here is my background.js:

console.log('Init background.js...'); 

function callNumber(info, tab) {
    alert(info.selectionText);
}

chrome.contextMenus.create ({
    "title":"%s", 
    "contexts": ["all"], 
    "onclick": callNumber
});

// get capability token
$(function() {
    $.get('http://localhost:3000/token', function(resp){
        initTwilio(resp);
    }); 
});

function initTwilio(token) {
    // init twilio
    Twilio.Device.setup(token);
}

Any suggestions on how I can utilize the Twilio Client API?

Thanks!

Answer 1

The Twilio script expects to be loaded from the Twilio server. It relies on that to find the rest of the library. To make it happy, you can try the following:

Drop the current background section of your manifest and replace it with these lines:

"content_security_policy": "script-src 'self' https://static.twilio.com; object-src 'self'",
"background": { "page": "background.html" },

And add to your extension a file named background.html with the following content:

<script src="lib/jquery-1.7.2.min.js"><script>
<script src="https://static.twilio.com/libs/twiliojs/1.1/twilio.min.js"><script>
<script src="background.js"><script>

UPDATE

This will fail because the loader attempts to use a URL starting with //, which won't work as expected in a Chrome Extension page. So the easier fix is:

1. Go back to your original setting
2. Replace the file lib/twilio.js with the contents of http://static.twilio.com/libs/twiliojs/refs/7ed9035/twilio.min.js