搜索

首页 >web前端 >js教程 >如何构建Trello Chrome扩展名-API身份验证

如何构建Trello Chrome扩展名-API身份验证

Jennifer Aniston
Jennifer Aniston原创
2025-02-20 12:36:11289浏览

如何构建Trello Chrome扩展名-API身份验证

在站点点，我们广泛使用Trello。当然，它具有怪癖，并且可以在各个领域使用一两个改进，但在大多数情况下，它不仅彻底改变了员工的协作经验，而且彻底改变了作者及其编辑的经验。

>我最近发现自己需要从非会员的特定列表中导出卡标题。默认情况下，Trello仅支持对JSON的全面出口，这是我在100多个成员的董事会上崩溃的东西。商店里有一支小型的Trello扩展，但奇怪的是，没有任何方式出口列表。

>

>让我们做一个可以为我们做到这一点的镀铬扩展！如果您急于看到最终结果，请参阅GitHub存储库以获取本教程代码的最终版本。>

钥匙要点

    >利用Chromeskel存储库来启动trello Chrome扩展的开发，从而用预制的骨架来简化过程。
  • >通过访问Trello网站获得trello api密钥和秘密验证，至关重要的是使您的扩展可以安全地与Trello帐户进行互动。
    • >使用基本的HTML结构和JavaScript在扩展程序中实现设置页面以处理用户身份验证，以根据用户的身份验证状态切换可见性。
  • >使用Trello JavaScript客户端库和自定义脚本（HashSearch.js）有效地管理授权令牌，以确保安全有效的用户身份验证。
    • >使用清单文件简化扩展功能到特定的trello板URL，从而通过将扩展名操作的范围限制为相关页面来增强性能。>>>>>
    • 构建Chrome Extension
  • 我认为最好的方法是扩展，因为仅执行这些出口的单独应用程序可能太多了。此外，Trello具有漂亮的API，我们可以用来获得所需的一切。我还认为这将是一个很好的过渡到扩展开发，这是我一段时间没有做的事情。
    • >
  • >引导
    •
>我将重复使用我可信赖的Chromeskel Repo - 我很久以前建造的骨架扩展程序，以使铬扩展开发变得更加容易。作为参考，如果您想查看我过去写过的其他一些Chrome扩展教程，请参见此处和此处。

>

我们首先将存储库克隆到任何文件夹中。

>

查看它是否有效，请将其加载到Chrome中。进入“扩展”选项卡，然后单击“加载未包装的扩展名”。如果该选项不存在，请确保您在右上角选中“开发人员模式”复选框。>

>加载后，它应该出现在您的扩展名单中。

>

身份验证

>我们可以简单地通过镀铬扩展来收集屏幕上的数据，并解析Trello有时被证明是不可靠的，并且往往会在人口稠密的板上崩溃。这就是为什么我们只使用Chrome扩展程序与Trello.com域的集成来创建列表上的新上下文菜单选项（“导出卡”选项），我们将在背景页面中执行整个逻辑，从而获取通过API数据。

键和秘密

要生成Trello的应用程序密钥，请在登录时访问https://trello.com/1/appkey/generate。这将为您提供一个密钥和秘密，您可以与您的帐户一起使用。在本教程的其余部分中，请考虑{{key}}作为此键，然后相应地替换内容。

>

>在脚本子文件夹中拥有密钥后，创建一个文件键。 

git clone https://github.com/Swader/ChromeSkel_a.git
>在使用它时，您可以删除片段和精美的文件夹。我们不需要它们。

工作流和清单

扩展工作流的想法如下：

给定用户打开trello板
  • 检查该用户是否授权使用其trello帐户
  • 如果是，请继续
  • 如果否，请打开具有授权按钮的设置页面，该页面使他们可以完成过程>
    • >一旦授权，请自动关闭“设置”页面，并保留扩展名授权
  • >
  • >为了自动打开带有某些内容的新选项卡的扩展名，我们需要将该内容标记为“ Web访问资源”。 为此，创建文件夹设置，该文件夹设置将包含我们的设置页面，并更新扩展名的清单以使其看起来像：

大多数应该熟悉。我们设置版本，给出一些元数据，定义图标并声明事件页面，加载一些先决条件的内容脚本（我们需要trello js客户端库的jQuery），最后定义“ Web__accessible_resources”，以便我们可以使用设置页面，正在建造。我们还将扩展的影响限制为https://trello.com/b/*，这意味着只有董事会URL。

设置和授权

>要构建我们的设置页面，我们编写一个简单的HTML页面。出于演示目的，在这种情况下，我将非常简单。我们将使用基础来对其进行样式（现在仅适用于按钮，但我们将在以后的帖子中制作更好的设置页面），因此请下载基础必需品捆绑包，并将其内容不合格到 /设置中，以便index.html属于该文件夹。您应该有这样的文件夹结构：
<span>// key.js
</span><span>var APP_KEY = '{{KEY}}';</span>
>

>如果您有一些额外的文件夹在我的屏幕截图中不可见，请随时删除它们。创建文件设置/js/settings.js，现在将其留为空。

>

好，让我们开始做生意。因此，假设用户通过在“扩展”选项卡中转到“选项”，或者在未经身份验证时尝试使用扩展名来最终进入此页面。让我们构建一个具有两个Divs的相当基本的HTML页面 - 一个用于用“注销”按钮对用户进行身份验证时，另一个用于当他仍然未经身份验证时，需要单击授权按钮。用以下方式替换index.html的内容 

git clone https://github.com/Swader/ChromeSkel_a.git
>我们有两个divs，登录并注销按钮，我们会拉出所需的JS。在这种情况下，我们正在使用Foundation的默认值包括jQuery，但是如果您选择在项目中其他地方使用自己的下载的jQuery，以防您像我一样更加最新的一个（更多）稍后）。

现在，让我们添加一些逻辑。打开settings.js并给予此内容：

<span>// key.js
</span><span>var APP_KEY = '{{KEY}}';</span>
>通过阅读文档，我们可以发现当客户端应用被身份验证时，localstorage将存在trello_token。这意味着我们可以将其用作何时显示我们每个Divs的指标。在INIT函数中，我们抓住DIV，将单击处理程序添加到按钮（尚无逻辑），最后，我们隐藏了适当的DIV，根据Trello_token。 例如，当对用户进行身份验证时，他们会得到这样的屏幕：

>

让我们立即获取Trello JS客户端。 如何构建Trello Chrome扩展名-API身份验证 Trello文档并不是真正的镀铬扩展名，并建议在从其域中检索JS客户端库时将钥匙附加到URL上，例如：

>


>我们无法真正这样做，因为我们正在处理扩展的封闭环境时，并且出于绩效原因将其在本地使用会更有意义。因此，我们访问上述URL，但没有关键参数：

> 
<span>{
</span>    <span>"name": "Trello Helper",
</span>    <span>"version": "0.1",
</span>    <span>"manifest_version" : 2,
</span>    <span>"description": "Trello Helper adds some much needed functionality to Trello. The current version focuses on exporting card information from lists.",
</span>    <span>"background" : {
</span>        <span>"page" : "background.html",
</span>        <span>"persistent": false
</span>    <span>},
</span>    <span>"page_action" :
</span>    <span>{
</span>        <span>"default_icon": {
</span>            <span>"19": "icons/19.png",
</span>            <span>"38": "icons/38.png"
</span>        <span>}
</span>    <span>},
</span>    <span>"content_scripts": [
</span>        <span>{
</span>            <span>"matches": ["https://trello.com/b/*"],
</span>            <span>"js": [
</span>                <span>"lib/jquery-2.1.1.min.js",
</span>                <span>"scripts/main.js"
</span>            <span>],
</span>            <span>"run_at": "document_idle"
</span>        <span>}
</span>    <span>],
</span>    <span>"permissions": [
</span>        <span>"tabs"
</span>    <span>],
</span>    <span>"icons": {
</span>        <span>"16": "icons/16.png",
</span>        <span>"48": "icons/48.png",
</span>        <span>"128": "icons/128.png"
</span>    <span>},
</span>    <span>"web_accessible_resources": [
</span>        <span>"settings/index.html"
</span>    <span>],
</span>    <span>"options_page": "settings/index.html"
</span><span>}</span>

>将此文件的内容保存到lib/trello_client.js中，然后确保我们的设置页面加载它，通过将其添加到结尾

tag附近的脚本部分，如SO： 
<span><span><!doctype html></span>
</span><span><span><span><html</span> class<span>="no-js"</span> lang<span>="en"</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>/></span>
</span>    <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1.0"</span>/></span>
</span>    <span><span><span><title</span>></span>Trello Helper Settings<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/foundation.css"</span>/></span>
</span>    <span><span><span><script</span> src<span>="js/vendor/modernizr.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="large-12 columns"</span>></span>
</span>        <span><span><span><h1</span>></span>Trello Helper Settings<span><span></h1</span>></span>
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="large-12 columns"</span>></span>
</span>        <span><span><span><div</span> class<span>="panel"</span> id<span>="trello_helper_loggedout"</span> <span>style<span>="<span>display: none</span>"</span></span>></span>
</span>            <span><span><span><p</span>></span>To get going, you'll need to authorize the extension to use your Trello account.<span><span></p</span>></span>
</span>
            <span><span><span><p</span>></span>Do it by clicking the big Authorize button below.<span><span></p</span>></span>
</span>
            <span><span><span><a</span> href<span>="#"</span> class<span>="medium success button"</span> id<span>="trello_helper_login"</span>></span>Authorize<span><span></a</span>></span><span><span><br</span>/></span>
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="panel"</span> id<span>="trello_helper_loggedin"</span> <span>style<span>="<span>display: none</span>"</span></span>></span>
</span>            <span><span><span><p</span>></span>You are already authorized. If something doesn't work, try logging out using the button below, and logging back in.<span><span></p</span>></span>
</span>
            <span><span><span><a</span> href<span>="#"</span> class<span>="medium success button"</span> id<span>="trello_helper_logout"</span>></span>Log out<span><span></a</span>></span><span><span><br</span>/></span>
</span>        <span><span><span></div</span>></span>
</span>
    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><script</span> src<span>="../scripts/key.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="js/vendor/jquery.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="js/settings.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

>这将确保我们在JavaScript中有Trello对象，让我们使用其方法。让我们先登录。更改注销按钮的单击处理程序是这样的：

<span>function init() {
</span>
    <span>// Message and button containers
</span>    <span>var lout = $("#trello_helper_loggedout");
</span>    <span>var lin = $("#trello_helper_loggedin");
</span>
    <span>// Log in button
</span>    <span>$("#trello_helper_login").click(function () {
</span>        
    <span>});
</span>
    <span>// Log out button
</span>    <span>$("#trello_helper_logout").click(function () {
</span>        
    <span>});
</span>
    <span>if (!localStorage.trello_token) {
</span>        <span>$(lout).show();
</span>        <span>$(lin).hide();
</span>    <span>} else {
</span>        <span>$(lout).hide();
</span>        <span>$(lin).show();
</span>    <span>}
</span><span>}
</span><span>$(document).ready(init);</span>

>这就是用Trello命名的全部。我们调用该方法，然后重新加载我们在（设置屏幕）上的页面。

> 
<span><span><span><script</span> src<span>="https://api.trello.com/1/client.js?key=substitutewithyourapplicationkey"</span>></span><span><span></script</span>></span></span>
现在，让我们处理登录，这是一个更复杂的登录。 

git clone https://github.com/Swader/ChromeSkel_a.git

遵循在线文档的逻辑后，我们看到Trello对象具有setKey方法，我们恰当地使用该方法将其设置为setKey方法。然后，我们呼吁采取授权方法。根据文档，使用类型弹出式而不是重定向将要求用户在收到应用程序时手动将秘密键粘贴到该应用程序中，这不是我们想要的。但是，如果我们使用重定向，则该页面将重定向到身份验证，然后返回后完成。交互式字段将设置为false时，将否定弹出式和重定向，而仅检查是否存在localstorage.trello_token值。根据文档，我们需要首先使用重定向调用常规授权，然后一旦返回设置页面，我们需要再次调用它，但将Interactive设置为false，这将使它抓住上一个以前的重定向假如。一切都有些令人费解，但有效。

>

>还有另一个问题。如果我们在设置页面打开后立即调用非交互式授权，那么我们将在页面上造成错误，因为授权后的重定向尚未发生。另一种选择是将另一个按钮“确认”或类似的内容添加到我们的设置页面上，该页面从Trello重定向回到我们的设置页面后出现，让用户手动启动非相互作用的授权。不过，这似乎有点像UX的噩梦。最后，我选择了第三个解决方案。

>将以下代码保存到lib/hashsearch.js。

>从堆叠的答案中获取，这个小实用程序有助于我们从URL中获取特定哈希的价值。 
<span>// key.js
</span><span>var APP_KEY = '{{KEY}}';</span>
当您通过重定向模式授权Trello授权时，它会将其重定向回到该页面，但在URL中带有令牌。这个令牌将是Trello JS客户端需求的验证。因此，有理由认为，如果我们可以检测到URL中的该令牌的存在，我们可以得出结论，我们正在处理Trello的重定向，因此可以自动，安全地触发非交互式授权协议。

>之后，将HashSearch添加到设置页面之后

…settings.js文件最终应该看起来像这样：

>

>您现在可以尝试扩展。加载“扩展”选项卡，单击选项链接并测试身份验证并登录。一切都可以正常工作。
<span>{
</span>    <span>"name": "Trello Helper",
</span>    <span>"version": "0.1",
</span>    <span>"manifest_version" : 2,
</span>    <span>"description": "Trello Helper adds some much needed functionality to Trello. The current version focuses on exporting card information from lists.",
</span>    <span>"background" : {
</span>        <span>"page" : "background.html",
</span>        <span>"persistent": false
</span>    <span>},
</span>    <span>"page_action" :
</span>    <span>{
</span>        <span>"default_icon": {
</span>            <span>"19": "icons/19.png",
</span>            <span>"38": "icons/38.png"
</span>        <span>}
</span>    <span>},
</span>    <span>"content_scripts": [
</span>        <span>{
</span>            <span>"matches": ["https://trello.com/b/*"],
</span>            <span>"js": [
</span>                <span>"lib/jquery-2.1.1.min.js",
</span>                <span>"scripts/main.js"
</span>            <span>],
</span>            <span>"run_at": "document_idle"
</span>        <span>}
</span>    <span>],
</span>    <span>"permissions": [
</span>        <span>"tabs"
</span>    <span>],
</span>    <span>"icons": {
</span>        <span>"16": "icons/16.png",
</span>        <span>"48": "icons/48.png",
</span>        <span>"128": "icons/128.png"
</span>    <span>},
</span>    <span>"web_accessible_resources": [
</span>        <span>"settings/index.html"
</span>    <span>],
</span>    <span>"options_page": "settings/index.html"
</span><span>}</span>

结论

<span><span><!doctype html></span>
</span><span><span><span><html</span> class<span>="no-js"</span> lang<span>="en"</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>/></span>
</span>    <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1.0"</span>/></span>
</span>    <span><span><span><title</span>></span>Trello Helper Settings<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/foundation.css"</span>/></span>
</span>    <span><span><span><script</span> src<span>="js/vendor/modernizr.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="large-12 columns"</span>></span>
</span>        <span><span><span><h1</span>></span>Trello Helper Settings<span><span></h1</span>></span>
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="large-12 columns"</span>></span>
</span>        <span><span><span><div</span> class<span>="panel"</span> id<span>="trello_helper_loggedout"</span> <span>style<span>="<span>display: none</span>"</span></span>></span>
</span>            <span><span><span><p</span>></span>To get going, you'll need to authorize the extension to use your Trello account.<span><span></p</span>></span>
</span>
            <span><span><span><p</span>></span>Do it by clicking the big Authorize button below.<span><span></p</span>></span>
</span>
            <span><span><span><a</span> href<span>="#"</span> class<span>="medium success button"</span> id<span>="trello_helper_login"</span>></span>Authorize<span><span></a</span>></span><span><span><br</span>/></span>
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="panel"</span> id<span>="trello_helper_loggedin"</span> <span>style<span>="<span>display: none</span>"</span></span>></span>
</span>            <span><span><span><p</span>></span>You are already authorized. If something doesn't work, try logging out using the button below, and logging back in.<span><span></p</span>></span>
</span>
            <span><span><span><a</span> href<span>="#"</span> class<span>="medium success button"</span> id<span>="trello_helper_logout"</span>></span>Log out<span><span></a</span>></span><span><span><br</span>/></span>
</span>        <span><span><span></div</span>></span>
</span>
    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><script</span> src<span>="../scripts/key.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="js/vendor/jquery.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="js/settings.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>
在这一部分中，我们构建了扩展的基础知识，通过自定义基础供电的设置屏幕实现身份验证并使用Trello的JavaScript客户端库。

在下一部分中，我们将建立扩展背后的整个逻辑并包装一切。

>

>经常询问的问题（常见问题解答）有关使用API​​身份验证构建Trello Chrome扩展

我如何开始构建trello chrome扩展名？

才能开始构建Trello Chrome扩展，您需要对JavaScript和Chrome的扩展开发环境有基本的了解。您还需要创建一个Trello帐户并生成一个API密钥和令牌。这将使您的扩展可以与Trello的API进行交互。一旦拥有这些先决条件，您就可以通过创建清单文件并添加必要的脚本和HTML文件来开始构建扩展。

>

在Chrome扩展程序中清单文件的目的是什么？ >清单文件是Chrome扩展名的关键组成部分。这是一个JSON文件，可提供有关您的扩展名的重要信息，例如其名称，版本，权限和使用的脚本。 Chrome使用此信息正确加载并运行您的扩展名。

>我如何在chrome扩展中使用trello的API？

在您的Chrome扩展中使用Trello的API，您需要生成API钥匙和Token来自Trello的开发人员平台。这些凭据允许您的扩展名向Trello的API提出授权请求。然后，您可以使用JavaScript从扩展程序中进行API调用，从而允许它与Trello数据进行交互。

>

我可以将自定义功能添加到我的Trello Chrome扩展名吗？ Trello Chrome扩展的功能。这可以通过在扩展名中添加其他脚本并使用Trello的API与Trello数据进行交互来完成。例如，您可以添加一个功能，该功能允许用户直接从扩展名中创建新的trello卡。

>

>我如何调试我的trello chrome扩展名？

chrome提供了一系列用于调试的工具扩展。您可以在“扩展管理”页面中使用“ Inspect View”选项为扩展程序打开开发人员工具窗口。这使您可以调试脚本，查看控制台输出并检查扩展页面的dom。扩展程序，您可以将其发布到Chrome网络商店。您需要创建一个开发人员帐户，支付一次性注册费，并遵循商店的发布指南。 >在构建Trello Chrome扩展程序时，重要的是要遵循最佳实践，以进行安全性，性能和用户体验。这包括使用HTTP进行所有网络通信，最大程度地减少背景脚本的使用，并提供清晰，直观的用户界面。

>

>我可以在trello chrome扩展名中使用其他API吗？这使您可以将其他功能集成到扩展名中。但是，您需要确保您遵循使用的任何API的使用条款，并负责任地处理用户数据。

如何更新我的trello chrome扩展名？通过更改扩展名的文件，然后将更新的版本上传到Chrome Web Store，您的Trello Chrome扩展程序。 Chrome将自动将安装的扩展名更新为最新版本。

我可以将我的trello chrome扩展名称货币化吗？

是的，您可以将trello chrome扩展商品化。 Chrome网络商店允许开发人员为一次性购买或订阅收费。您也可以通过应用内购买或广告来获利扩展。

>

以上是如何构建Trello Chrome扩展名-API身份验证的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript json jquery chrome html Object Resource define if for while checkbox date require try Error Logging Token using Interface finally Event delete JS console function default dom this background transition github idea https ux everything Foundation Other
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：Getting Started with Slack Bots下一篇：New Tools for Cross-Platform Development & Sencha ExtJS5

相关文章

查看更多