Google Chrome 扩展程序和 Twilio Client API

Google Chrome extension and Twilio Client API

本文关键字：Twilio Client API 程序 Chrome 扩展 Google      更新时间：2023-11-22

我是一个新手，试图制作一个利用Twilio Client API和Node.js后端从浏览器进行传出调用的Chrome扩展。

我从我的扩展运行 Twilio 时遇到了一些麻烦，我得到了"Twilio is not defined".

这是我的清单文件：

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

这是我的背景.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 脚本希望从 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>

更新

此操作将失败，因为加载程序会尝试使用以 // 开头的网址，该网址在 Chrome 扩展程序页面中无法按预期工作。所以更简单的解决方法是：

  1. 返回到原始设置
  2. 将文件lib/twilio.js替换为 http://static.twilio.com/libs/twiliojs/refs/7ed9035/twilio.min.js 的内容
相关文章：