在站點點,我們廣泛使用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>我們有兩個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文檔並不是真正的鍍鉻擴展名,並建議在從其域中檢索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> </span><span><span><span> class<span>="no-js"</span> lang<span>="en"</span>></span> </span><span><span><span>></span> </span> <span><span><span><meta> charset<span>="utf-8"</span>/></span> </span> <span><span><span><meta> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1.0"</span>/></span> </span> <span><span><span><title>></title></span>Trello Helper Settings<span><span></span>></span> </span> <span><span><span><link> rel<span>="stylesheet"</span> href<span>="css/foundation.css"</span>/></span> </span> <span><span><span><script> src<span >="js/vendor/modernizr.js"</script></span>></span><span><span></span>></span> </span><span><span><span></span>></span> </span><span><span><span>></span> </span> <span><span><span><div> class<span>="row"</span>> <span><span><span><div> class<span>="large-12 columns"</span>> <span><span><span><h1 id="gt">></h1></span>Trello Helper Settings<span><span></span>></span> </span> <span><span><span></span></span></span></span> </div></span>></span> </span><span><span><span></span></span></span> </div></span>></span> </span> <span><span><span><div> class<span>="row"</span>> <span><span><span><div> class<span>="large-12 columns"</span>> <span><span><span><div> class<span>="panel"</span> id<span>="trello_helper_loggedout"</span> <span>style<span>="<span>display: none</span>"</span></span>> <span><span><span><p>></p></span>To get going, you'll need to authorize the extension to use your Trello account.<span><span></span>></span> </span> <span><span><span><p>></p></span>Do it by clicking the big Authorize button below.<span><span></span>></span> </span> <span><span><span><a> href<span>="#"</span> class<span>="medium success button"</span> id<span>="trello_helper_login"</span>></a></span>Authorize<span><span></span>></span><span><span><br>/></span> </span> <span><span><span></span></span></span></span></span></span></span> </div></span>></span> </span> <span><span><span><div> class<span>="panel"</span> id<span>="trello_helper_loggedin"</span> <span>style<span>="<span>display: none</span>"</span></span>> <span><span><span><p>></p></span>You are already authorized. If something doesn't work, try logging out using the button below, and logging back in.<span><span></span>></span> </span> <span><span><span><a> href<span>="#"</span> class<span>="medium success button"</span> id<span>="trello_helper_logout"</span>></a></span>Log out<span><span></span>></span><span><span><br>/></span> </span> <span><span><span></span></span></span></span></span></span> </div></span>></span> </span> <span><span><span></span></span></span> </div></span>></span> </span><span><span><span></span></span></span> </div></span>></span> </span> <span><span><span><script> src<span >="../scripts/key.js"</script></span>></span><span><span></span>></span> </span><span><span><span><script> src<span >="js/vendor/jquery.js"</script></span>></span><span><span></span>></span> </span><span><span><span><script> src<span >="js/settings.js"</script></span>></span><span><span></span>></span> </span><span><span><span></span>></span> </span><span><span><span></span>></span></span></span></span></span></span></span></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> src<span >="https://api.trello.com/1/client.js?key=substitutewithyourapplicationkey"</script></span>></span><span><span></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> </span><span><span><span> class<span>="no-js"</span> lang<span>="en"</span>></span> </span><span><span><span>></span> </span> <span><span><span><meta> charset<span>="utf-8"</span>/></span> </span> <span><span><span><meta> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1.0"</span>/></span> </span> <span><span><span><title>></title></span>Trello Helper Settings<span><span></span>></span> </span> <span><span><span><link> rel<span>="stylesheet"</span> href<span>="css/foundation.css"</span>/></span> </span> <span><span><span><script> src<span >="js/vendor/modernizr.js"</script></span>></span><span><span></span>></span> </span><span><span><span></span>></span> </span><span><span><span>></span> </span> <span><span><span><div> class<span>="row"</span>> <span><span><span><div> class<span>="large-12 columns"</span>> <span><span><span><h1 id="gt">></h1></span>Trello Helper Settings<span><span></span>></span> </span> <span><span><span></span></span></span></span> </div></span>></span> </span><span><span><span></span></span></span> </div></span>></span> </span> <span><span><span><div> class<span>="row"</span>> <span><span><span><div> class<span>="large-12 columns"</span>> <span><span><span><div> class<span>="panel"</span> id<span>="trello_helper_loggedout"</span> <span>style<span>="<span>display: none</span>"</span></span>> <span><span><span><p>></p></span>To get going, you'll need to authorize the extension to use your Trello account.<span><span></span>></span> </span> <span><span><span><p>></p></span>Do it by clicking the big Authorize button below.<span><span></span>></span> </span> <span><span><span><a> href<span>="#"</span> class<span>="medium success button"</span> id<span>="trello_helper_login"</span>></a></span>Authorize<span><span></span>></span><span><span><br>/></span> </span> <span><span><span></span></span></span></span></span></span></span> </div></span>></span> </span> <span><span><span><div> class<span>="panel"</span> id<span>="trello_helper_loggedin"</span> <span>style<span>="<span>display: none</span>"</span></span>> <span><span><span><p>></p></span>You are already authorized. If something doesn't work, try logging out using the button below, and logging back in.<span><span></span>></span> </span> <span><span><span><a> href<span>="#"</span> class<span>="medium success button"</span> id<span>="trello_helper_logout"</span>></a></span>Log out<span><span></span>></span><span><span><br>/></span> </span> <span><span><span></span></span></span></span></span></span> </div></span>></span> </span> <span><span><span></span></span></span> </div></span>></span> </span><span><span><span></span></span></span> </div></span>></span> </span> <span><span><span><script> src<span >="../scripts/key.js"</script></span>></span><span><span></span>></span> </span><span><span><span><script> src<span >="js/vendor/jquery.js"</script></span>></span><span><span></span>></span> </span><span><span><span><script> src<span >="js/settings.js"</script></span>></span><span><span></span>></span> </span><span><span><span></span>></span> </span><span><span><span></span>></span></span></span></span></span></span></span></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核心數據類型在瀏覽器和Node.js中一致,但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window,在Node.js中為global。 2)Node.js獨有Buffer對象,用於處理二進制數據。 3)性能和時間處理在兩者間也有差異,需根據環境調整代碼。

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型,適合科學計算和數據分析。 2.JavaScript採用弱類型,廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢,選擇時應根據項目需求決定。

選擇Python還是JavaScript取決於項目類型:1)數據科學和自動化任務選擇Python;2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞,而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript各有優勢,選擇取決於項目需求和個人偏好。 1.Python易學,語法簡潔,適用於數據科學和後端開發,但執行速度較慢。 2.JavaScript在前端開發中無處不在,異步編程能力強,Node.js使其適用於全棧開發,但語法可能複雜且易出錯。

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1)JavascriptwasdesignedAsignedAsalightWeight,drackendedlanguageforwebbrowsers.2)Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers,典型地,替代品。

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗,後端通過Node.js處理服務器任務。 1.前端示例:改變網頁文本內容。 2.後端示例:創建Node.js服務器。

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統:1)職業發展:Python適合數據科學和後端開發,JavaScript適合前端和全棧開發。 2)學習曲線:Python語法簡潔,適合初學者;JavaScript語法靈活。 3)生態系統:Python有豐富的科學計算庫,JavaScript有強大的前端框架。


熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

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

熱門文章

熱工具

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能

SublimeText3 英文版
推薦:為Win版本,支援程式碼提示!

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SublimeText3 Linux新版
SublimeText3 Linux最新版

SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。