Question

我正在制作一个小的Chrome扩展程序。其目的是进行API调用以检索一些JSON，然后将其去除以仅显示Name, Email & Team然后呈现给用户。然后，用户可以选择通过按钮将该信息发送到松弛通道。

一切正常，我的API调用显示正确的信息，我的Webhook for slack与测试消息一起工作正常。

我的问题是我不知道如何将我的API调用中的返回值作为变量发送给slack

$('.Name').html(data.user.name);
$('.Email').html(data.user.email);
$('.Teams').html(data.user.teams[0].name);

即。

var text = '$('.Name') + 'was contacted from' + $('.Teams') + 'Their email addres is' + $('.Email')''

示例松弛消息

John Smith was contacted from Sales Team Their email address is jsmith@mysite.com

HTML

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <meta content="noindex, nofollow" name="robots">
    <meta content="noindex, nofollow" name="googlebot">
    <script src="jquery-git.js" type="text/javascript"></script>
    <script src='apicall.js'></script>
    <script src='slackapi.js'></script>
    <title>Call Logger</title>
</head>
<style>
</style>
<body>
<div class="container">  
  <form id="contact" action="" method="post">
    <h3>Call Logger</h3><br>
    <h2><div class="Name"></h2>
    <h2><div class="Address"></h2>
    <h2><div class="Teams"></h2>
    <h2><div class="Email"></div></h2>
    <h2><div class="Role"></div></h2>
    <br>
    <br>
    <fieldset>
      <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Send</button>
    </fieldset>
  </form>
</div>
</body>
</html>

apicall.js

function currentUrl() {
  return new Promise(function (resolve) {
    chrome.tabs.query({
      active: true,
      currentWindow: true
    }, function(tabs) {
      resolve(tabs[0].url)
    })
  })
}

function userIdfromUrl(url) {
  var parts = url.split('/')
  return parts[parts.length - 1]
}
var authorizationToken = "xxxxxxxxxxxxxxxxxxxxxxxxx";
function myapiRequest(endpoint, options) {
    $.ajax($.extend({}, {
    type: 'GET',
    dataType: "json",
    success: function(data) {
    $('.Name').html(data.user.name);
    $('.Email').html(data.user.email);
    $('.Teams').html(data.user.teams[0].name);
},

    url: "https://api.myapi.com/" + endpoint,
    headers: {
      "Authorization": "Token token=" + authorizationToken,
      "Accept": "application/vnd.myapi+json;version=2"
    }
  },
  options));
}
currentUrl()
  .then(function (url) {
    return userIdfromUrl(url)
  })
  .then(function (userId) {
    return myapiRequest('users/' + userId + '?include%5B%5D=contact_methods&include%5B%5D=teams')
  })
  .then(function (data) {
    console.log(data.user.name)
    console.log(data.user.email)
    console.log(data.user.teams[0].name)
  })

slackapi.js

$(document).ready(function(){
    $('#contact-submit').on('click',function(e){
        e.preventDefault();
        var url = 'https://hooks.slack.com/services/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
        var text = 'This is a message'
        $.ajax({
            data: 'payload=' + JSON.stringify({
                "text": text // What I want to dynamically change
            }),
            dataType: 'json',
            processData: false,
            type: 'POST',
            url: url
        });
    });
});

Answer 1

我显然无法重现您的设置，但是，根据apicall.js和slackapi.js的网页类型 - 在内容/背景网页的情况下存在一些限制和特殊性 - ，I我认为您可以通过message passing将文本变量（甚至其组成部分，例如姓名，团队，电子邮件，使用数组）发送到slackapi.js。

您通常使用apicall.js从chrome.runtime.sendMessage()发送消息（其他选项可用，具体取决于上下文），并且您使用侦听器接收消息，例如chrome.runtime.onMessage.addListener()。对于要接收的消息，需要运行slackapi.js或任何其他JS文件，因此如果不需要，则需要使用chrome.tabs.executeScript()注入。例如。

我不确定这对你有帮助，但至少我试过了。

JavaScript / JQuery / HTML - 将一个脚本的输出用作另一个脚本中的变量

1 个答案: