谷歌Chrome浏览器扩展和Twilio客户端API

6

我是个新手,试图制作一个利用Twilio Client API和Node.js后端来从浏览器发出呼叫的Chrome扩展程序。

我在运行Twilio时遇到了一些问题,我得到了"Twilio未定义"

这是我的清单文件:

{
  "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"
  }
}

这是我的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);
}

有没有关于如何利用Twilio客户端API的建议?谢谢!

你在扩展中包含了哪个 twilio.js 文件? - rsanchez
包括这个链接:http://static.twilio.com/libs/twiliojs/1.1/twilio.min.js - Ismailp
@rsanchez,对此有什么想法吗? - Ismailp
1个回答

2
Twilio脚本期望从Twilio服务器加载。它依赖于此来查找库的其余部分。为了让它更加顺畅,您可以尝试以下操作:
删除清单中当前的background部分,并用以下行替换:
"content_security_policy": "script-src 'self' https://static.twilio.com; object-src 'self'",
"background": { "page": "background.html" },

并且在您的扩展中添加一个名为background.html的文件,并包含以下内容:

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

更新

这将失败,因为加载程序会尝试使用以//开头的URL,在Chrome扩展页中不会按预期工作。因此更容易的解决方法是:

  1. 返回您的原始设置
  2. http://static.twilio.com/libs/twiliojs/refs/7ed9035/twilio.min.js的内容替换文件lib/twilio.js

我在控制台中看到了这个:无法获取chrome-extension://static.twilio.com/libs/twiliojs/refs/7ed9035/twilio.min.js。为什么会这样? - Ismailp
我需要它是http(s)://。 - Ismailp

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接