在SitePoint,我们广泛使用Trello。 当然,它有其独特之处,可以在各个领域使用一两个改进,但是在大多数情况下,它彻底改变了工作人员,作者及其编辑的协作经验。
我最近发现自己需要从非会员的特定列表中导出卡标题。 默认情况下,Trello仅支持将全部面板导出到JSON,这会使我的选项卡在100个成员以上,数百张卡片的面板上崩溃。 商店中有一小批Trello扩展程序,但是奇怪的是,没有人以任何方式导出列表。
让我们制作一个可以为我们做到这一点的Chrome扩展程序! 如果您急于要查看最终结果,请参阅Github存储库以获取本教程代码的最终版本。
构建一个Chrome扩展程序
我认为最好的方法是扩展,因为仅执行这些导出的单独应用程序可能太多了。 此外,Trello有一个漂亮的API,我们可以使用它来获取所需的一切。 我还认为这是回到扩展开发的很好过渡,这是我一段时间没有做的事情了。
自举
我将重用我可信赖的ChromeSkel存储库-我很久以前构建的骨架扩展,以使开始使用Chrome Extension开发更加容易。 作为参考,如果您想查看我过去编写的其他一些Chrome扩展教程,请参见此处和此处 。
首先,将存储库克隆到任何文件夹。
git clone https://github.com/Swader/ChromeSkel_a.git
要查看其是否有效,请将其加载到Chrome中。 进入扩展程序标签,然后点击“加载解压的扩展程序”。 如果没有该选项,请确保选中右上角的“开发人员模式”复选框。
加载后,它应该出现在您的扩展列表中。
认证方式
尽管我们可以使用Chrome扩展程序简单地在屏幕上收集数据并进行解析,但事实证明Trello有时并不可靠,并且往往会在人口众多的板上崩溃。 这就是为什么我们只使用Chrome扩展程序与trello.com域的集成来在列表上创建新的上下文菜单选项(“导出卡”选项),然后在后台页面执行整个逻辑,获取通过API的数据。
关键与秘密
要为Trello生成应用程序密钥,请在登录时访问https://trello.com/1/appKey/generate 。这将为您提供可用于帐户的密钥和机密。 在本教程的其余部分,请考虑将{{KEY}}用作此密钥,并相应地替换其内容。
获得密钥后,在scripts
子文件夹中创建一个文件key.js
:
// key.js
var APP_KEY = '{{KEY}}';
使用它时,可以删除fragments
和fancy-settings
文件夹。 我们将不需要它们。
工作流程和清单
扩展程序的工作流程如下:
- 给定用户打开Trello板
- 检查该用户是否授权扩展使用他的Trello帐户
- 如果是,请继续
- 如果不是,请使用授权按钮打开设置页面,使他们可以完成此过程
- 获得授权后,自动关闭设置页面并保留扩展名的授权
要使扩展程序自动打开包含某些内容的新标签,我们需要将该内容标记为“可访问网络的资源” 。
为此,请创建文件夹settings
,其中将包含我们的设置页面,并将扩展的清单更新为如下所示:
{
"name": "Trello Helper",
"version": "0.1",
"manifest_version" : 2,
"description": "Trello Helper adds some much needed functionality to Trello. The current version focuses on exporting card information from lists.",
"background" : {
"page" : "background.html",
"persistent": false
},
"page_action" :
{
"default_icon": {
"19": "icons/19.png",
"38": "icons/38.png"
}
},
"content_scripts": [
{
"matches": ["https://trello.com/b/*"],
"js": [
"lib/jquery-2.1.1.min.js",
"scripts/main.js"
],
"run_at": "document_idle"
}
],
"permissions": [
"tabs"
],
"icons": {
"16": "icons/16.png",
"48": "icons/48.png",
"128": "icons/128.png"
},
"web_accessible_resources": [
"settings/index.html"
],
"options_page": "settings/index.html"
}
其中大多数应该是熟悉的。 我们设置版本,提供一些元数据,定义图标并声明一个事件页面 ,加载一些必备的内容脚本( Trello JS客户端库需要jQuery),最后定义“ web_accessible_resources”,因此我们可以使用设置页面正在建设中。 我们还将扩展的影响限制为https://trello.com/b/*
,这仅意味着委员会网址。
设置和授权
要构建设置页面,我们编写一个简单的HTML页面。 为了演示起见,在这种情况下,我将使其保持极其简单。 我们将使用Foundation对其进行样式设置(目前,仅用于按钮,但是我们将在以后的文章中进行更好的设置页面),因此请下载Foundation Essentials捆绑包 ,并将其内容取消存档到/settings
,以便index.html
属于该文件夹。 您应该具有这样的文件夹结构:
如果您有一些额外的文件夹在我的屏幕快照中看不到,请随时删除它们。 创建文件settings/js/settings.js
, settings/js/settings.js
将其留空。
好吧,让我们开始做生意。 因此,可以认为,用户可以通过转到“扩展”选项卡中的“选项”,或在未经身份验证时尝试使用扩展名来最终进入此页面。 让我们用两个div构建一个相当基本的HTML页面-一个用于在用户使用“注销”按钮进行身份验证时进行,另一个用于在用户仍未经身份验证并需要单击“授权”按钮时进行。 用以下内容替换index.html
的内容:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Trello Helper Settings</title>
<link rel="stylesheet" href="css/foundation.css"/>
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row">
<div class="large-12 columns">
<h1>Trello Helper Settings</h1>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="panel" id="trello_helper_loggedout" style="display: none">
<p>To get going, you'll need to authorize the extension to use your Trello account.</p>
<p>Do it by clicking the big Authorize button below.</p>
<a href="#" class="medium success button" id="trello_helper_login">Authorize</a><br/>
</div>
<div class="panel" id="trello_helper_loggedin" style="display: none">
<p>You are already authorized. If something doesn't work, try logging out using the button below, and logging back in.</p>
<a href="#" class="medium success button" id="trello_helper_logout">Log out</a><br/>
</div>
</div>
</div>
<script src="../scripts/key.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/settings.js"></script>
</body>
</html>
我们有两个div,分别是“登录”和“注销”按钮,然后插入所需的JS。 在这种情况下,我们使用的是Foundation的默认包含的jQuery,但是如果您选择使用自己下载的项目在项目中的其他位置,那真的没关系,以防您像我一样获取了最新的版本(更多信息稍后)。
现在让我们添加一些逻辑。 打开settings.js
并提供以下内容:
function init() {
// Message and button containers
var lout = $("#trello_helper_loggedout");
var lin = $("#trello_helper_loggedin");
// Log in button
$("#trello_helper_login").click(function () {
});
// Log out button
$("#trello_helper_logout").click(function () {
});
if (!localStorage.trello_token) {
$(lout).show();
$(lin).hide();
} else {
$(lout).hide();
$(lin).show();
}
}
$(document).ready(init);
通过阅读文档 ,我们可以发现在对客户端应用进行身份验证时, localStorage
trello_token
中将存在trello_token
。 这意味着我们可以将其用作何时显示每个div的指标。 根据trello_token
,在init
函数中,我们抓取div,将单击处理程序添加到按钮(尚无逻辑),最后,我们隐藏适当的div。
例如,当用户通过身份验证时,他们将获得如下屏幕:
现在让我们获取Trello JS客户端。
Trello文档并不是真正考虑到Chrome扩展,因此建议在从其域中检索JS客户端库时,将key
附加到URL,例如:
<script src="https://api.trello.com/1/client.js?key=substitutewithyourapplicationkey"></script>
我们实际上并不能做到这一点,因为我们正在处理扩展的封闭环境,并且出于性能原因,将其本地提供更为有意义。 因此,我们访问上述URL,但没有关键参数:
https://api.trello.com/1/client.js
将此文件的内容保存到lib/trello_client.js
,然后通过将其添加到末尾<body>
标记附近的scripts部分中,确保我们的设置页面lib/trello_client.js
其加载,如下所示:
<script src="js/vendor/jquery.js"></script>
<script src="../lib/trello_client.js"></script>
<script src="js/settings.js"></script>
这将确保我们的Trello对象在JavaScript中可用,从而使我们能够使用它的method 。 让我们先注销。 将注销按钮的单击处理程序更改为:
$("#trello_helper_logout").click(function () {
Trello.deauthorize();
location.reload();
});
这就是Trello取消授权的全部。 我们调用该方法并重新加载我们所在的页面(即设置屏幕)。
现在,让我们处理登录,这有点复杂。
// Log in button
$("#trello_helper_login").click(function () {
Trello.setKey(APP_KEY);
Trello.authorize(
{
name: "Trello Helper Extension",
type: "redirect",
expiration: "never",
interactive: true,
scope: {read: true, write: false},
success: function () {
// Can't do nothing, we've left the page
},
error: function () {
alert("Failed to authorize with Trello.")
}
});
});
按照在线文档的逻辑,我们看到Trello对象具有setKey
方法,我们可以使用它来设置它。 然后,我们将authorize
方法付诸行动。 根据文档,使用类型popup
而不是redirect
将要求用户在收到应用程序时将密钥手动粘贴到应用程序中,这不是我们想要的。 但是,如果我们使用重定向,则页面将重定向到身份验证并在完成后返回。 设置为false时, interactive
字段将同时取消弹出窗口和重定向,而仅检查localStorage.trello_token
值是否存在。 根据文档,我们需要先通过重定向调用常规授权,然后返回到设置页面,然后再次调用它,但将交互设置为false,这将使其在上一次重定向时获取令牌提供。 一切都令人费解,但是可以。
不过,还有另一个问题。 如果在设置页面打开后立即调用非交互式authorize
,则会在页面上引起错误,因为授权后的重定向尚未发生。 一种替代方法是在我们的设置页面中添加另一个按钮“确认”或类似的内容,该按钮在从Trello重定向回到我们的设置页面后出现,从而使用户可以手动启动非交互式授权。 但是,这似乎有点像UX的噩梦。 最后,我选择了第三个解决方案。
将以下代码保存到lib/hashSearch.js
。
/*
As found on: http://stackoverflow.com/questions/3729150/retrieve-specific-hash-tags-value-from-url
*/
var HashSearch = new function () {
var params;
this.set = function (key, value) {
params[key] = value;
this.push();
};
this.remove = function (key, value) {
delete params[key];
this.push();
};
this.get = function (key, value) {
return params[key];
};
this.keyExists = function (key) {
return params.hasOwnProperty(key);
};
this.push= function () {
var hashBuilder = [], key, value;
for(key in params) if (params.hasOwnProperty(key)) {
key = escape(key), value = escape(params[key]); // escape(undefined) == "undefined"
hashBuilder.push(key + ( (value !== "undefined") ? '=' + value : "" ));
}
window.location.hash = hashBuilder.join("&");
};
(this.load = function () {
params = {}
var hashStr = window.location.hash, hashArray, keyVal
hashStr = hashStr.substring(1, hashStr.length);
hashArray = hashStr.split('&');
for(var i = 0; i < hashArray.length; i++) {
keyVal = hashArray[i].split('=');
params[unescape(keyVal[0])] = (typeof keyVal[1] != "undefined") ? unescape(keyVal[1]) : keyVal[1];
}
})();
}
正如从StackOverflow答案中获取的那样 ,这个小实用程序可帮助我们从URL中获取特定哈希值。
当您通过redirect
方式向Trello授权时,它将重定向回到其原始页面,但URL中带有令牌。 该令牌将是Trello JS客户端所需的auth令牌。 因此,有理由认为,如果我们可以检测到URL中存在此令牌,则可以得出结论,我们正在处理Trello的重定向,因此可以自动安全地触发非交互式authorize
协议。
将hashSearch
添加到设置页面后,就像这样…
<script src="../scripts/key.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="../lib/trello_client.js"></script>
<script src="../lib/hashSearch.js"></script>
<script src="js/settings.js"></script>
… settings.js
文件最后应如下所示:
function init() {
// Check if page load is a redirect back from the auth procedure
if (HashSearch.keyExists('token')) {
Trello.authorize(
{
name: "Trello Helper Extension",
expiration: "never",
interactive: false,
scope: {read: true, write: false},
success: function () {},
error: function () {
alert("Failed to authorize with Trello.")
}
});
}
// Message and button containers
var lout = $("#trello_helper_loggedout");
var lin = $("#trello_helper_loggedin");
// Log in button
$("#trello_helper_login").click(function () {
Trello.setKey(APP_KEY);
Trello.authorize(
{
name: "Trello Helper Extension",
type: "redirect",
expiration: "never",
interactive: true,
scope: {read: true, write: false},
success: function () {
// Can't do nothing, we've left the page
},
error: function () {
alert("Failed to authorize with Trello.")
}
});
});
// Log out button
$("#trello_helper_logout").click(function () {
Trello.deauthorize();
location.reload();
});
if (!localStorage.trello_token) {
$(lout).show();
$(lin).hide();
} else {
$(lout).hide();
$(lin).show();
}
}
$(document).ready(init);
您现在可以尝试扩展。 加载扩展选项卡,单击选项链接,然后测试身份验证和注销。 一切都应该正常工作。
结论
在这一部分中,我们构建了扩展的基础,通过基于基金会的自定义设置屏幕并使用Trello的JavaScript客户端库来实现身份验证。
在下一部分中,我们将在扩展程序的后面构建整个逻辑,然后进行总结。
From: https://www.sitepoint.com/build-trello-chrome-extension-api-authentication/