如何从 gmail 插件按钮触发 JS 文件中的函数？答案

【问题标题】：How can i trigger a function in JS file from gmail addon button?如何从 gmail 插件按钮触发 JS 文件中的函数？
【发布时间】：2019-05-28 11:27:06
【问题描述】：

我有 js 库，它具有我们的应用程序所需的一些内置功能。现在我想在 Gmail 插件中导入我的 js 库及其 css 文件。之后，我想将一个函数绑定到该按钮 id，以便每当单击该按钮时，我的库中的函数就会执行。

我该怎么做？请看示例代码

根据示例代码 myLib.js 具有函数 myFunc() ，它需要打开组件 id 和 url。所以我创建了按钮并将 myFunc 绑定到它。我如何使用 googlescript for gmail 插件 做同样的事情。

提前致谢

   <head>
      <script src="https://*/app.bundle.js"> </script>
      <script src="https://*/app.bundle.css"> </script>
      <script src="https://*/myLib.js"> </script>
   </head>
   <body>
     <button id="app">Clickhere</button>
     <script>
        myFunc('#app',URL);
     </script>
   </body>

【问题讨论】：

标签： google-apps-script google-api google-workspace google-apps-marketplace gmail-addons

【解决方案1】：

Gmail 插件（如果您所说的确实是 Gmail 插件）使用 Card-based interface 并且不能使用自定义 html 和“css”创建。一旦构建了这样的接口，创建一个执行库函数的函数：

/**
 * Triggers library function;
 * @param {Object} e event object;
 */
function myTrigger(e) {
  //access event object's params;
  var parameters = e.parameters; 
  var id  = parameters.id;
  var url = parameters.url;      

  //you can reference lib functions by prepending its name;
  myLibrary.myFunc();
}

通过单击项目的命令栏按钮 Resources 导入您的库，然后选择 Libraries 并导入您的项目（假设您的库可以转换为应用程序脚本项目，如果没有，您无能为力）。此外，Google discourages from 使用插件中的库。

当然，您可以使用eval() 通过UrlFetchApp.fetch() 加载外部非GAS 库（ctrq 有一个great tutorial 说明如何执行此操作），但您可能知道eval() 带来了@ 987654324@ 到您的应用程序。

然后，在目标 Ui 元素上配置 Action（很可能是 TextButton）：

//...created a TextButton and wrote it into a var tb;

//create parameters object (aquire id and url however you want)
var parameters = {
 id  : '', 
 url : '' 
};

//reference Enum loadIndicator (only NONE or SPINNER currently);
var loadIndicator = CardService.LoadIndicator.SPINNER;

//create Action to set;
var action = CardService.newAction();
    action.setFunctionName('myTrigger'); //reference trigger function;
    action.setLoadIndicator(loadIndicator); //set a load indicator, if not invoked equals NONE;
    action.setParameters(parameters) //every key in this object are strings!;

//set Action to TextButton;
tb.setOnClickAction(action);

【讨论】：

感谢您的回复。我按照你说的执行了。但是当我调用 Mylibrary.myFunc() 时。它给出了错误，例如 myFunc() 未找到，但已加载到 myLibrary 变量中。我认为错误是因为我们正在加载库文件。 var appCode = UrlFetchApp.fetch('https://*/app.bundle.js').getContentText(); var style = UrlFetchApp.fetch('https://*/app.bundle.css').getContentText(); var myLibrary = UrlFetchApp.fetch('https://*/myLib.js').getContentText(); 就是这样。它实际上是以字符串格式加载的。所以我无法在其中调用 myFunc 。我怎样才能将它作为对象加载？
如果我做 eval(UrlFetchApp.fetch('https://*/app.bundle.js').getContentText());我收到错误之类的错误。 后缺少名称。运算符
@vinaynarayana - 您的加载过程和 eval() 一切正常 - 请确保您的库不包含应用程序脚本无法解析的任何内容（ES6 的一大块） - 例如类、箭头函数（如果不使用打字稿）等。它可以很好地解析示例库。