>
钥匙要点>在设置中更新初始函数的第一部分。
使用此逻辑,我们告诉Trello库在身份验证完成时向扩展发送消息,并且一旦收到返回消息,说明消息已收到(这是功能(数据)部分),我们就会关闭该消息当前选项卡。
>现在让我们处理背景页面。首先,将背景内容的内容更改为:
<span>// Check if page load is a redirect back from the auth procedure </span> <span>if (HashSearch.keyExists('token')) { </span> <span>Trello.authorize( </span> <span>{ </span> <span>name: "Trello Helper Extension", </span> <span>expiration: "never", </span> <span>interactive: false, </span> <span>scope: {read: true, write: false}, </span> <span>success: function () { </span> chrome<span>.extension.sendMessage({ </span> <span>command: 'saveToken', </span> <span>token: localStorage.getItem('trello_token') </span> <span>}, function(data) { </span> chrome<span>.tabs.getCurrent(function (tab) { </span> chrome<span>.tabs.remove(tab.id) </span> <span>}); </span> <span>}); </span> <span>}, </span> <span>error: function () { </span> <span>alert("Failed to authorize with Trello.") </span> <span>} </span> <span>}); </span> <span>}</span>
>我们像以前一样加载应用程序密钥,我们将用于逻辑的背景脚本以及Trello客户端。显然,我们也需要jQuery - 这是Trello的依赖。
> 然后,将脚本/background.js更改为:
<span><span><!doctype html></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/key.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/background.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="lib/jquery-2.1.1.min.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="lib/trello_client.js"</span>></span><span><span></script</span>></span></span>
<span>// Check if page load is a redirect back from the auth procedure </span> <span>if (HashSearch.keyExists('token')) { </span> <span>Trello.authorize( </span> <span>{ </span> <span>name: "Trello Helper Extension", </span> <span>expiration: "never", </span> <span>interactive: false, </span> <span>scope: {read: true, write: false}, </span> <span>success: function () { </span> chrome<span>.extension.sendMessage({ </span> <span>command: 'saveToken', </span> <span>token: localStorage.getItem('trello_token') </span> <span>}, function(data) { </span> chrome<span>.tabs.getCurrent(function (tab) { </span> chrome<span>.tabs.remove(tab.id) </span> <span>}); </span> <span>}); </span> <span>}, </span> <span>error: function () { </span> <span>alert("Failed to authorize with Trello.") </span> <span>} </span> <span>}); </span> <span>}</span>
>
添加菜单选项>要将菜单选项添加到上下文菜单,我们需要编辑main.js内容脚本。将其变成:
>>从var popover = $(“。pop-over”);,我们设置了一个变量以容纳弹出对象,这样我们就不必继续重新提出它。然后,当单击列表上的菜单按钮(.list-header-menu-icon)时,我们召唤一个间隔,不断注意是否可见弹出声。一旦可见,检查停止和菜单选项就会附加到所有选项的底部,专门设计为其余的,因此适合。最后,单击事件处理程序绑定到此选项,以便我们可以单击选项时调用“导出”。但是..我们怎么知道我们需要出口什么?我们以哪种格式导出?
<span><span><!doctype html></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/key.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/background.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="lib/jquery-2.1.1.min.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="lib/trello_client.js"</span>></span><span><span></script</span>></span></span>
查找列表ID
>
>当单击菜单按钮时,我们可以使用jQuery发射的事件。这很重要!我们使用原始单击菜单按钮,而不是单击“导出”选项,因为当原始按钮绑定到我们有兴趣导出的列表时,所产生的实际菜单不是,因此,使我们几乎不可能找出我们要处理的列表。代替上述代码中的//导出列表注释,添加以下内容:
><span>// Check if page load is a redirect back from the auth procedure </span> <span>if (HashSearch.keyExists('token')) { </span> <span>Trello.authorize( </span> <span>{ </span> <span>name: "Trello Helper Extension", </span> <span>expiration: "never", </span> <span>interactive: false, </span> <span>scope: {read: true, write: false}, </span> <span>success: function () { </span> chrome<span>.extension.sendMessage({ </span> <span>command: 'saveToken', </span> <span>token: localStorage.getItem('trello_token') </span> <span>}, function(data) { </span> chrome<span>.tabs.getCurrent(function (tab) { </span> chrome<span>.tabs.remove(tab.id) </span> <span>}); </span> <span>}); </span> <span>}, </span> <span>error: function () { </span> <span>alert("Failed to authorize with Trello.") </span> <span>} </span> <span>}); </span> <span>}</span>
<span><span><!doctype html></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/key.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/background.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="lib/jquery-2.1.1.min.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="lib/trello_client.js"</span>></span><span><span></script</span>></span></span>
chrome<span>.extension.onMessage.addListener( </span> <span>function (request<span>, sender, sendResponse</span>) { </span> chrome<span>.pageAction.show(sender.tab.id); </span> <span>// Now we have a token saved locally, as fetched from the settings page after authorization. </span> <span>if (request.command == 'saveToken') { </span> <span>localStorage.setItem('trello_token', request.token); </span> <span>sendResponse(); </span> <span>return true; </span> <span>} </span> <span>});</span>
>
>现在,我们的导出列表功能具有卡ID,我们可以使用它来找出列表ID。如果查看API文档,我们可以使用URL卡/{{id}}来获取我们需要的东西。为了最大程度地减少我们要求Trello返回的数据量,我们还可以将查询限制在带有字段参数的iDlist属性中。让我们在背景中添加一个新命令。
我们也需要定义trelloinit函数。我们可以在调用与Trello交互的命令之前每次都可以打电话,因此设置了令牌和密钥,我们100%确定我们的请求已得到认证。
<span>if (!request.command && !localStorage.getItem('trello_token')) { </span> chrome<span>.tabs.create({url: chrome.extension.getURL('settings/index.html')}); </span> <span>sendResponse(); </span> <span>return true; </span> <span>}</span>
我们现在正在成功获取列表ID。
chrome<span>.extension.sendMessage({}, function (response) { </span> <span>var readyStateCheckInterval = setInterval(function () { </span> <span>if (document.readyState === "complete") { </span> <span>clearInterval(readyStateCheckInterval); </span> <span>var popover = $(".pop-over"); </span> <span>$('.list-header-menu-icon').click(function(event) { </span> <span>var popover_summoned_interval = setInterval(function () { </span> <span>if ($(popover).is(':visible')) { </span> <span>clearInterval(popover_summoned_interval); </span> <span>$(".pop-over .content").append('<hr><ul > <li><a href="#">Export This List</a></li> </ul>'); </span> <span>$(".js-export-list").click(function(e){ </span> <span>// EXPORT LIST </span> <span>}); </span> <span>} </span> <span>}, 50); </span> <span>}); </span> <span>} </span> <span>}, 10); </span><span>});</span>
>带有另外几行代码,返回Main.js,我们现在拥有一个看起来像这样的导出函数:
获取第一张卡的ID
<span>exportList(event);</span>
如果找不到ID,列表显然为空
>目前,我们将采用一种简化的方法来导出,因为本教程的运行时间要长。我们将为用户提供TXT或JSON的选择,并具有形状和形式,并由我们预定。现在,文本输出将看起来像这样:
<span>function exportList(event) { </span> <span>var first_card_id = findFirstCardId(event); </span> <span>if (!first_card_id) { </span> <span>alert('No cards found in the list.'); </span> <span>return false; </span> <span>} </span><span>}</span>
> JSON将满足从Trello收到的满足,即:
要导出,我们需要一个模态窗口来粘贴数据。 这里的一个吸引人的选择是基础框架,因为我们已经在设置页面上使用了它,并且它具有自己的模态弹出组件,但是Foundation的和Trello的CSS均未适当地命名为空位,并且在Trello的CSS中包括Trello的CSS引起冲突。我们也有jQuery预先包含的,但是要再次进行对话框,我们需要包括jQuery UI,甚至还不够 - Chrome Extensions不支持通过相对URL中的CSS加载图像( )语法,这是jQuery UI使用的 - 我们必须重写jQuery UI的CSS来使用本地扩展URL或使用Base64编码图像,都没有吸引力接近。
相反,我们将制作自己的弹出窗口,并使用Trello的一些现有样式,忽略一路上的所有冲突。我将最终代码放在这里,然后进行解释。请创建lib/trellohelper/js/exportpopup.js,并给出以下内容:>我选择在主脚本之外具有弹出逻辑,以便以后可以轻松地改进它。我还选择了一种“面向对象的”方法,只是因为我喜欢它。我们通过三种方法定义了一个新的TrelloexportPopup“ class”:INIT,显示和隐藏。内容脚本加载后,初始化将立即调用。这是负责构建弹出窗口,附加正确的事件听众并将整个内容添加到Trello板的HTML的方法。将.button类添加到弹出窗口标题的按钮上,请确保我们获得与当前Trello UI一致的外观。我要在这里寻找的外观是一种“选项卡”接口 - 单击文本,文本导出显示,单击JSON和JSON。
隐藏方法将隐藏弹出窗口,但前提是它以可见的形式存在于页面上的某个地方。 Show方法自动激活第一个(JSON)选项卡视图,并使用所需数据填充导出区域。 JSON区域是一个简单的Stringify转储 - JSON数据以字符串形式的输出,而文本区域目前仅在单独的行上输出该卡的标题和描述,在卡之间有两个空行 - 高度“复制 - 帕斯特友好”。
<span>// Check if page load is a redirect back from the auth procedure </span> <span>if (HashSearch.keyExists('token')) { </span> <span>Trello.authorize( </span> <span>{ </span> <span>name: "Trello Helper Extension", </span> <span>expiration: "never", </span> <span>interactive: false, </span> <span>scope: {read: true, write: false}, </span> <span>success: function () { </span> chrome<span>.extension.sendMessage({ </span> <span>command: 'saveToken', </span> <span>token: localStorage.getItem('trello_token') </span> <span>}, function(data) { </span> chrome<span>.tabs.getCurrent(function (tab) { </span> chrome<span>.tabs.remove(tab.id) </span> <span>}); </span> <span>}); </span> <span>}, </span> <span>error: function () { </span> <span>alert("Failed to authorize with Trello.") </span> <span>} </span> <span>}); </span> <span>}</span>
>确保弹出窗口是中心的,看起来像本机Trello弹出窗口。它还可以确保将向我们展示导出内容的文本方面填充了弹出窗口的其余空间。现在,让我们将这些文件包含在我们的内容脚本中:
<span>// Check if page load is a redirect back from the auth procedure </span> <span>if (HashSearch.keyExists('token')) { </span> <span>Trello.authorize( </span> <span>{ </span> <span>name: "Trello Helper Extension", </span> <span>expiration: "never", </span> <span>interactive: false, </span> <span>scope: {read: true, write: false}, </span> <span>success: function () { </span> chrome<span>.extension.sendMessage({ </span> <span>command: 'saveToken', </span> <span>token: localStorage.getItem('trello_token') </span> <span>}, function(data) { </span> chrome<span>.tabs.getCurrent(function (tab) { </span> chrome<span>.tabs.remove(tab.id) </span> <span>}); </span> <span>}); </span> <span>}, </span> <span>error: function () { </span> <span>alert("Failed to authorize with Trello.") </span> <span>} </span> <span>}); </span> <span>}</span>
>最后,让我们使用新的弹出逻辑来调整main.js。 main.js的最终版本看起来像这样:
<span><span><!doctype html></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/key.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="scripts/background.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="lib/jquery-2.1.1.min.js"</span>></span><span><span></script</span>></span> </span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="lib/trello_client.js"</span>></span><span><span></script</span>></span></span>
>我们首先“实例化”了TrelloexportPopup,因此我们可以在代码中使用其方法。然后,在将点击事件侦听器绑定到菜单之前,我们将使用tep.init()初始化弹出窗口,以便在需要之前就可以在DOM中进行准备。单击导出链接后,我们像以前一样称呼我们的导出函数。
>>在导出列表函数中,我们首先使用tep.hide()隐藏弹出窗口,以防万一我们在浏览另一个列表的菜单时开放,然后,一旦我们从背景页面上获得卡,我们就会显示带有tep.show的导出弹出窗口(数据)。就是这样!
>现在重新加载扩展名,刷新Trello页面,您应该具有功能功能的导出选项!
>
>我故意留下了一些错误和警告。如果有足够的兴趣,我们将与以后的帖子中的那些人打交道,调整和优化故障安全的扩展。这是一些仍然可以的改进:
>>为将来的用途加快速度,我们可以使用LocalStorage记住列表所属的板。请注意,如果您将列表从董事会转移到董事会,请仔细实现此功能 - 请确保添加另一个侦听器以进行列表移动,因此您可以将缓存数据无效!
重复导出选项spawns>
初始问题更改板
>在菜单点击菜单之后,弹出窗口不会呈现的天文数字很小 - 也许Trello更改了UI中的某些内容,也许他们更改了班级,或者也许他们只是某种UI错误 - 在这种情况下循环检查其可见性将变得无限,占用大量的CPU资源,直到TAB的过程被杀死为止。对此的保障会很好。
我们在本教程系列中编写的代码可在GitHub上找到。
经常询问有关导出Trello列表的问题(常见问题解答)
我可以将Trello列表导出到PDF?
>是否可以将Trello列表导出到CSV?
我可以将Trello列表导出到图像吗?
是的,可以将Trello列表导出为图像。可以使用“ Trello的导出” Chrome Extension完成此操作。安装扩展程序后,导航到Trello板,单击扩展图标,然后选择用于导出的图像格式。您的trello列表将被下载为图像文件。>我可以用标签导出trello列表吗?是的,当您使用“ Trello” Chrome Extension的“导出Trello”列表时,所有这些包括标签在内的Trello列表的详细信息已导出。这意味着即使导出了trello列表,您也可以跟踪您的标签。>
我可以以适当的日期导出trello列表? Trello” Chrome Extension,包括到期日期的Trello列表中的所有详细信息均已导出。这意味着您即使导出了trello列表,您也可以跟踪到期日期。
>我可以一次从多个板上导出trello列表吗?对于Trello”,Chrome扩展程序使您可以一次从一个板上导出Trello列表。如果您想从多个董事会导出列表,则需要导航到每个板并分别导出列表。
以上是如何构建Trello Chrome扩展名 - 导出列表的详细内容。更多信息请关注PHP中文网其他相关文章!