如何構建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,我們可以用來獲得所需的一切。我還認為這將是一個很好的過渡到擴展開發,這是我一段時間沒有做的事情。 >
- >引導
>
我們首先將存儲庫克隆到任何文件夾中。>
查看它是否有效,請將其加載到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
現在,讓我們添加一些邏輯。打開settings.js並給予此內容:
<span>// key.js </span><span>var APP_KEY = '{{KEY}}';</span>
>
讓我們立即獲取Trello JS客戶端。
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>
>之後,將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>
在下一部分中,我們將建立擴展背後的整個邏輯並包裝一切。
>>經常詢問的問題(常見問題解答)有關使用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中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

Python和JavaScript開發者的薪資沒有絕對的高低,具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大,薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網(https://www.shiseido.co.jp/sb/wonderland/)中�...

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

如何在JavaScript中將具有相同ID的數組元素合併到一個對像中?在處理數據時,我們常常會遇到需要將具有相同ID�...

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

探索前端中類似VSCode的面板拖拽調整功能的實現在前端開發中,如何實現類似於VSCode...
