>
鑰匙要點(diǎn)- >使用`chrome.extension.sendMessage`API進(jìn)行安全令牌傳輸之間的“設(shè)置”頁面和Chrome Extension的背景頁面之間
- >在初始安裝時(shí)或在沒有身份驗(yàn)證的情況下訪問trello板時(shí)自動(dòng)打開擴(kuò)展程序的設(shè)置頁面。 >
- >在Trello的UI中集成自定義菜單選項(xiàng)以啟用列表導(dǎo)出，使用jQuery處理動(dòng)態(tài)DOM更改。 >通過涉及檢查列表中的卡元素的解決方案來檢索trello列表ID，這是由于trello ui限制而需要的。
- >在獲取列表ID后，在背景腳本中傳遞消息以從Trello的API中獲取列表卡。
- >使用定制的模態(tài)彈出窗口以顯示導(dǎo)出數(shù)據(jù)，并規(guī)避CSS與Trello的本機(jī)樣式?jīng)_突。 >
- 消息傳遞
- >當(dāng)我們?cè)谠O(shè)置屏幕上使用Trello進(jìn)行身份驗(yàn)證時(shí)，Trello令牌將保存在本地存儲(chǔ)中。但是，設(shè)置頁面是其自己的頁面，有效地是其自己的環(huán)境 - Ergo，擴(kuò)展程序的背景頁面或擴(kuò)展程序的內(nèi)容腳本都無法訪問它。這是我們需要使用消息傳遞的地方。
chrome.extension.sendmessage API用于從背景頁面發(fā)送消息。在我們的情況下，我們將使用它將令牌從設(shè)置頁面發(fā)送到我們的背景頁面。 由于我們的設(shè)置冒險(xiǎn)就完成后就完成了，因此我們不妨自動(dòng)關(guān)閉選項(xiàng)卡，以提高用戶友好。
>>在設(shè)置中更新初始函數(shù)的第一部分。
使用此邏輯，我們告訴Trello庫在身份驗(yàn)證完成時(shí)向擴(kuò)展發(fā)送消息，并且一旦收到返回消息，說明消息已收到（這是功能（數(shù)據(jù)）部分），我們就會(huì)關(guān)閉該消息當(dāng)前選項(xiàng)卡。
>現(xiàn)在讓我們處理背景頁面。首先，將背景內(nèi)容的內(nèi)容更改為：
<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>
>我們像以前一樣加載應(yīng)用程序密鑰，我們將用于邏輯的背景腳本以及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>這是從設(shè)置頁面接收消息的部分。它從請(qǐng)求中獲取令牌，并將其保存到LocalStorage中以供將來使用。我們將對(duì)象形成與命令用作主要密鑰，因?yàn)槲覀兇蛩闵院髮⑵渌畎l(fā)送到背景頁面。
>自動(dòng)安裝
在Savetkoken命令上方，讓我們另一個(gè)塊：
<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>如果我們沒有發(fā)出特定命令，并且我們的用戶尚未使用Trello進(jìn)行身份驗(yàn)證，請(qǐng)?jiān)谛逻x項(xiàng)卡中打開“設(shè)置”頁面。這確保在擴(kuò)展程序初始安裝后立即打開“設(shè)置”頁面，一旦在瀏覽器中訪問了trello板。>
添加菜單選項(xiàng)Trello的UI對(duì)自定義非常非常友好。這些列表在其元素中沒有ID，無論是數(shù)據(jù)屬性還是任何形式的鏈接，而卡片則沒有。單擊右上角的“列表選項(xiàng)”按鈕時(shí)產(chǎn)生的上下文菜單每次被稱為（過重的殺傷性？），而全部從一個(gè)盒子中歸類為“ pop-over”，這是如果您幾乎單擊UI中的所有其他菜單，也可以召喚。更糟糕的是，一旦您調(diào)用了列表的彈出菜單，菜單本身就沒有列出的列表的標(biāo)識(shí)符，因此您對(duì)其上下文一無所知，這使得很難輕松獲取列表的ID，以便正確查詢trello api圍繞它，并獲取出口卡。這就是為什么接下來的事情看起來像是很多可怕的黑客，但這是因?yàn)椋?/h2>。
>要將菜單選項(xiàng)添加到上下文菜單，我們需要編輯main.js內(nèi)容腳本。將其變成：
>>從var popover = $（“。pop-over”）;，我們?cè)O(shè)置了一個(gè)變量以容納彈出對(duì)象，這樣我們就不必繼續(xù)重新提出它。然后，當(dāng)單擊列表上的菜單按鈕（.list-header-menu-icon）時(shí)，我們召喚一個(gè)間隔，不斷注意是否可見彈出聲。一旦可見，檢查停止和菜單選項(xiàng)就會(huì)附加到所有選項(xiàng)的底部，專門設(shè)計(jì)為其余的，因此適合。最后，單擊事件處理程序綁定到此選項(xiàng)，以便我們可以單擊選項(xiàng)時(shí)調(diào)用“導(dǎo)出”。但是..我們?cè)趺粗牢覀冃枰隹谑裁?？我們以哪種格式導(dǎo)出？
<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
就像我之前說過的，Trello的UI眾所周知，開發(fā)人員不友好。它沒有提供帶有DOM元素的列表ID，因此找到它們的ID遠(yuǎn)不及直接。為什么我們需要列表ID？要查詢trello api并獲取卡片，以便我們可以導(dǎo)出它們 - 我們已經(jīng)說，由于它在大型板上的不穩(wěn)定性，我們不會(huì)在UI上解析，但會(huì)依靠API。
>幸運(yùn)的是，如果我們?cè)诟鱾€(gè)列表中檢查卡片，我們可以看到實(shí)際上確實(shí)具有HREF屬性，并且它包含卡ID。通過了解卡ID，我們可以查詢Trello的信息并獲取其父列表的ID。但是..如果彈出菜單未連接到列表中，我們?nèi)绾尾檎覇螕舻牧斜恚课覀儾荒苤蛔プ∥覀冇龅降牡谝粡埧ㄆ?，那太隨機(jī)了。>
>當(dāng)單擊菜單按鈕時(shí)，我們可以使用jQuery發(fā)射的事件。這很重要！我們使用原始單擊菜單按鈕，而不是單擊“導(dǎo)出”選項(xiàng)，因?yàn)楫?dāng)原始按鈕綁定到我們有興趣導(dǎo)出的列表時(shí)，所產(chǎn)生的實(shí)際菜單不是，因此，使我們幾乎不可能找出我們要處理的列表。代替上述代碼中的//導(dǎo)出列表注釋，添加以下內(nèi)容：
><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>
然后，創(chuàng)建函數(shù)：
<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>最后，創(chuàng)建FindfirstCardid函數(shù)：
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>>我們獲取了活動(dòng)目標(biāo)的祖父母（列表），并在其中找到第一個(gè)卡標(biāo)題。標(biāo)題包含以下形狀的HREF：>
>現(xiàn)在，我們的導(dǎo)出列表功能具有卡ID，我們可以使用它來找出列表ID。如果查看API文檔，我們可以使用URL卡/{{id}}來獲取我們需要的東西。為了最大程度地減少我們要求Trello返回的數(shù)據(jù)量，我們還可以將查詢限制在帶有字段參數(shù)的iDlist屬性中。讓我們?cè)诒尘爸刑砑右粋€(gè)新命令。
我們也需要定義trelloinit函數(shù)。我們可以在調(diào)用與Trello交互的命令之前每次都可以打電話，因此設(shè)置了令牌和密鑰，我們100％確定我們的請(qǐng)求已得到認(rèn)證。
<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>
我們現(xiàn)在正在成功獲取列表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，我們現(xiàn)在擁有一個(gè)看起來像這樣的導(dǎo)出函數(shù)：
在“人類”中，這是：
獲取第一張卡的ID
<span>exportList(event);</span>
如果找不到ID，列表顯然為空
- 如果找到ID，請(qǐng)致電背景頁面，并告訴我們通過呼叫Trello API
- 給我們列表ID 如果列表ID很好，請(qǐng)?jiān)俅魏艚斜尘绊撁娅@取列表的卡，然后在控制臺(tái)中輸出結(jié)果。
- >回到背景頁面，我們現(xiàn)在可以根據(jù)API文檔構(gòu)建GetListCards命令。
- >如果您現(xiàn)在重新加載并測(cè)試擴(kuò)展程序，則不僅可以看到列表中的導(dǎo)出選項(xiàng)出現(xiàn)在您的列表中，而且還可以在單??擊該選項(xiàng)后在控制臺(tái)中尋找導(dǎo)出的數(shù)據(jù)。 >
>目前，我們將采用一種簡(jiǎn)化的方法來導(dǎo)出，因?yàn)楸窘坛痰倪\(yùn)行時(shí)間要長。我們將為用戶提供TXT或JSON的選擇，并具有形狀和形式，并由我們預(yù)定?，F(xiàn)在，文本輸出將看起來像這樣：
<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收到的滿足，即：
要導(dǎo)出，我們需要一個(gè)模態(tài)窗口來粘貼數(shù)據(jù)。 這里的一個(gè)吸引人的選擇是基礎(chǔ)框架，因?yàn)槲覀円呀?jīng)在設(shè)置頁面上使用了它，并且它具有自己的模態(tài)彈出組件，但是Foundation的和Trello的CSS均未適當(dāng)?shù)孛麨榭瘴唬⑶以赥rello的CSS中包括Trello的CSS引起沖突。我們也有jQuery預(yù)先包含的，但是要再次進(jìn)行對(duì)話框，我們需要包括jQuery UI，甚至還不夠 - Chrome Extensions不支持通過相對(duì)URL中的CSS加載圖像（ ）語法，這是jQuery UI使用的 - 我們必須重寫jQuery UI的CSS來使用本地?cái)U(kuò)展URL或使用Base64編碼圖像，都沒有吸引力接近。
相反，我們將制作自己的彈出窗口，并使用Trello的一些現(xiàn)有樣式，忽略一路上的所有沖突。我將最終代碼放在這里，然后進(jìn)行解釋。請(qǐng)創(chuàng)建lib/trellohelper/js/exportpopup.js，并給出以下內(nèi)容：>我選擇在主腳本之外具有彈出邏輯，以便以后可以輕松地改進(jìn)它。我還選擇了一種“面向?qū)ο蟮摹狈椒?，只是因?yàn)槲蚁矚g它。我們通過三種方法定義了一個(gè)新的TrelloexportPopup“ class”：INIT，顯示和隱藏。內(nèi)容腳本加載后，初始化將立即調(diào)用。這是負(fù)責(zé)構(gòu)建彈出窗口，附加正確的事件聽眾并將整個(gè)內(nèi)容添加到Trello板的HTML的方法。將.button類添加到彈出窗口標(biāo)題的按鈕上，請(qǐng)確保我們獲得與當(dāng)前Trello UI一致的外觀。我要在這里尋找的外觀是一種“選項(xiàng)卡”接口 - 單擊文本，文本導(dǎo)出顯示，單擊JSON和JSON。
隱藏方法將隱藏彈出窗口，但前提是它以可見的形式存在于頁面上的某個(gè)地方。 Show方法自動(dòng)激活第一個(gè)（JSON）選項(xiàng)卡視圖，并使用所需數(shù)據(jù)填充導(dǎo)出區(qū)域。 JSON區(qū)域是一個(gè)簡(jiǎn)單的Stringify轉(zhuǎn)儲(chǔ) - JSON數(shù)據(jù)以字符串形式的輸出，而文本區(qū)域目前僅在單獨(dú)的行上輸出該卡的標(biāo)題和描述，在卡之間有兩個(gè)空行 - 高度“復(fù)制 - 帕斯特友好”。
<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>我們現(xiàn)在需要做的就是樣式。這是lib/trellohelper/css/exportpopup.css的內(nèi)容：
>確保彈出窗口是中心的，看起來像本機(jī)Trello彈出窗口。它還可以確保將向我們展示導(dǎo)出內(nèi)容的文本方面填充了彈出窗口的其余空間?，F(xiàn)在，讓我們將這些文件包含在我們的內(nèi)容腳本中：
<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>
>最后，讓我們使用新的彈出邏輯來調(diào)整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>
>我們首先“實(shí)例化”了TrelloexportPopup，因此我們可以在代碼中使用其方法。然后，在將點(diǎn)擊事件偵聽器綁定到菜單之前，我們將使用tep.init（）初始化彈出窗口，以便在需要之前就可以在DOM中進(jìn)行準(zhǔn)備。單擊導(dǎo)出鏈接后，我們像以前一樣稱呼我們的導(dǎo)出函數(shù)。
>>在導(dǎo)出列表函數(shù)中，我們首先使用tep.hide（）隱藏彈出窗口，以防萬一我們?cè)跒g覽另一個(gè)列表的菜單時(shí)開放，然后，一旦我們從背景頁面上獲得卡，我們就會(huì)顯示帶有tep.show的導(dǎo)出彈出窗口（數(shù)據(jù)）。就是這樣！
>現(xiàn)在重新加載擴(kuò)展名，刷新Trello頁面，您應(yīng)該具有功能功能的導(dǎo)出選項(xiàng)！
>
>錯(cuò)誤和改進(jìn)
>我故意留下了一些錯(cuò)誤和警告。如果有足夠的興趣，我們將與以后的帖子中的那些人打交道，調(diào)整和優(yōu)化故障安全的擴(kuò)展。這是一些仍然可以的改進(jìn)：
>緩存
>為將來的用途加快速度，我們可以使用LocalStorage記住列表所屬的板。請(qǐng)注意，如果您將列表從董事會(huì)轉(zhuǎn)移到董事會(huì)，請(qǐng)仔細(xì)實(shí)現(xiàn)此功能 - 請(qǐng)確保添加另一個(gè)偵聽器以進(jìn)行列表移動(dòng)，因此您可以將緩存數(shù)據(jù)無效！
重復(fù)導(dǎo)出選項(xiàng)spawns>如果您在菜單仍打開時(shí)手動(dòng)單擊菜單圖標(biāo)，則將繼續(xù)在菜單底部添加新的“導(dǎo)出”選項(xiàng)。需要實(shí)現(xiàn)故障安全，以檢查該選項(xiàng)是否已經(jīng)存在。
>
初始問題在擁有數(shù)百個(gè)董事會(huì)和成員的巨大董事會(huì)上，Trello的UI變得非常慢。這會(huì)導(dǎo)致對(duì)文檔準(zhǔn)備就緒事件的失誤，并且在有任何UI元素可以綁定聽眾之前，我們的腳本的初始部分執(zhí)行。因此，菜單有時(shí)沒有導(dǎo)出選項(xiàng)，并且在刷新之前才能獲得。
>更改板
更換板殺死了當(dāng)前的UI并為新董事會(huì)重建。但是，問題在于，與活動(dòng)聽眾的元素也被殺死 - 因此我們的菜單不再召喚出口選項(xiàng)。與上面的問題類似，需要在板上觸發(fā)重新引導(dǎo)才能使一切正常工作。
> unifinite循環(huán)>在菜單點(diǎn)擊菜單之后，彈出窗口不會(huì)呈現(xiàn)的天文數(shù)字很小 - 也許Trello更改了UI中的某些內(nèi)容，也許他們更改了班級(jí)，或者也許他們只是某種UI錯(cuò)誤 - 在這種情況下循環(huán)檢查其可見性將變得無限，占用大量的CPU資源，直到TAB的過程被殺死為止。對(duì)此的保障會(huì)很好。
>結(jié)論
在這個(gè)簡(jiǎn)短的系列中，我們?yōu)門rello構(gòu)建了一個(gè)簡(jiǎn)單的Chrome擴(kuò)展名，使我們可以從給定列表中導(dǎo)出作為JSON或TXT列表的卡片。使用此示例在其上構(gòu)建，并創(chuàng)建自己的Trello擴(kuò)展名 - 您可以完成的事情僅受您的想象力（以及Trello的API提供的功能）的限制:)。身份驗(yàn)證已經(jīng)為您解決，并且邏輯模板已經(jīng)到位 - 開始編碼！
我們?cè)诒窘坛滔盗兄芯帉懙拇a可在GitHub上找到。
經(jīng)常詢問有關(guān)導(dǎo)出Trello列表的問題（常見問題解答）
>如何將Trello列表導(dǎo)出到Excel？
>將Trello列表導(dǎo)出到Excel是一個(gè)簡(jiǎn)單的過程。首先，您需要安裝稱為“ Trello的導(dǎo)出”的鍍鉻擴(kuò)展名。安裝后，您可以導(dǎo)航到Trello板，然后單擊擴(kuò)展圖標(biāo)。您將看到一個(gè)選項(xiàng)來導(dǎo)出trello列表。選擇Excel格式，您的Trello列表將作為Excel文件下載。該文件將包含您的TRELLO列表的所有詳細(xì)信息，包括卡名稱，描述，標(biāo)簽等。
我可以將Trello列表導(dǎo)出到PDF？
是的，您可以將Trello列表導(dǎo)出到Trello列表中PDF。類似于導(dǎo)出到Excel，您需要安裝“ Trello” Chrome擴(kuò)展名的“導(dǎo)出”。安裝后，導(dǎo)航到Trello板，單擊擴(kuò)展圖標(biāo)，然后選擇用于導(dǎo)出的PDF格式。您的trello列表將被下載為PDF文件。
>>是否可以將Trello列表導(dǎo)出到CSV？
>是的，可以將Trello列表導(dǎo)出到CSV格式。該過程類似于導(dǎo)出到Excel或PDF。您需要安裝“ trello for Trello” Chrome擴(kuò)展名，導(dǎo)航到Trello板，單擊擴(kuò)展圖標(biāo)，然后選擇用于導(dǎo)出的CSV格式。您的trello列表將被下載為CSV文件。
我可以將Trello列表導(dǎo)出到圖像嗎？
是的，可以將Trello列表導(dǎo)出為圖像。可以使用“ Trello的導(dǎo)出” Chrome Extension完成此操作。安裝擴(kuò)展程序后，導(dǎo)航到Trello板，單擊擴(kuò)展圖標(biāo)，然后選擇用于導(dǎo)出的圖像格式。您的trello列表將被下載為圖像文件。>我可以用標(biāo)簽導(dǎo)出trello列表嗎？是的，當(dāng)您使用“ Trello” Chrome Extension的“導(dǎo)出Trello”列表時(shí)，所有這些包括標(biāo)簽在內(nèi)的Trello列表的詳細(xì)信息已導(dǎo)出。這意味著即使導(dǎo)出了trello列表，您也可以跟蹤您的標(biāo)簽。>
>我可以用卡描述導(dǎo)出trello列表嗎？這意味著您即使導(dǎo)出了trello列表，您也可以跟蹤卡描述。
我可以以適當(dāng)?shù)娜掌趯?dǎo)出trello列表？ Trello” Chrome Extension，包括到期日期的Trello列表中的所有詳細(xì)信息均已導(dǎo)出。這意味著您即使導(dǎo)出了trello列表，您也可以跟蹤到期日期。
我可以帶有附件的trello列表嗎？
不幸的是，“ trello” Chromeexension的“導(dǎo)出”不支持出口附件。但是，可以導(dǎo)出包括卡名稱，描述，標(biāo)簽和到期日的所有其他詳細(xì)信息。 Trello” Chrome擴(kuò)展名不支持導(dǎo)出評(píng)論。但是，可以導(dǎo)出trello列表的所有其他詳細(xì)信息，包括卡名稱，描述，標(biāo)簽和到期日期。
>>我可以一次從多個(gè)板上導(dǎo)出trello列表嗎？對(duì)于Trello”，Chrome擴(kuò)展程序使您可以一次從一個(gè)板上導(dǎo)出Trello列表。如果您想從多個(gè)董事會(huì)導(dǎo)出列表，則需要導(dǎo)航到每個(gè)板并分別導(dǎo)出列表。
以上是如何構(gòu)建Trello Chrome擴(kuò)展名 - 導(dǎo)出列表的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
Java vs. JavaScript：清除混亂
Jun 20, 2025 am 12:27 AM
Java和JavaScript是不同的編程語言，各自適用于不同的應(yīng)用場(chǎng)景。Java用于大型企業(yè)和移動(dòng)應(yīng)用開發(fā)，而JavaScript主要用于網(wǎng)頁開發(fā)。
如何在JS中與日期和時(shí)間合作？
Jul 01, 2025 am 01:27 AM
JavaScript中的日期和時(shí)間處理需注意以下幾點(diǎn)：1.創(chuàng)建Date對(duì)象有多種方式，推薦使用ISO格式字符串以保證兼容性；2.獲取和設(shè)置時(shí)間信息可用get和set方法，注意月份從0開始；3.手動(dòng)格式化日期需拼接字符串，也可使用第三方庫；4.處理時(shí)區(qū)問題建議使用支持時(shí)區(qū)的庫，如Luxon。掌握這些要點(diǎn)能有效避免常見錯(cuò)誤。
為什么要將標(biāo)簽放在的底部？
Jul 02, 2025 am 01:22 AM
PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl
JavaScript與Java：開發(fā)人員的全面比較
Jun 20, 2025 am 12:21 AM
JavaScriptIspreferredforredforwebdevelverment，而Javaisbetterforlarge-ScalebackendsystystemsandSandAndRoidApps.1）JavascriptexcelcelsincreatingInteractiveWebexperienceswebexperienceswithitswithitsdynamicnnamicnnamicnnamicnnamicnemicnemicnemicnemicnemicnemicnemicnemicnddommanipulation.2）
什么是在DOM中冒泡和捕獲的事件？
Jul 02, 2025 am 01:19 AM
事件捕獲和冒泡是DOM中事件傳播的兩個(gè)階段，捕獲是從頂層向下到目標(biāo)元素，冒泡是從目標(biāo)元素向上傳播到頂層。1.事件捕獲通過addEventListener的useCapture參數(shù)設(shè)為true實(shí)現(xiàn)；2.事件冒泡是默認(rèn)行為，useCapture設(shè)為false或省略；3.可使用event.stopPropagation()阻止事件傳播；4.冒泡支持事件委托，提高動(dòng)態(tài)內(nèi)容處理效率；5.捕獲可用于提前攔截事件，如日志記錄或錯(cuò)誤處理。了解這兩個(gè)階段有助于精確控制JavaScript響應(yīng)用戶操作的時(shí)機(jī)和方式。
JavaScript：探索用于高效編碼的數(shù)據(jù)類型
Jun 20, 2025 am 12:46 AM
javascripthassevenfundaMentalDatatypes：數(shù)字，弦，布爾值，未定義，null，object和symbol.1）numberSeadUble-eaduble-ecisionFormat，forwidevaluerangesbutbecautious.2）
JavaScript模塊上的確定JS綜述：ES模塊與COMPORJS
Jul 02, 2025 am 01:28 AM
ES模塊和CommonJS的主要區(qū)別在于加載方式和使用場(chǎng)景。1.CommonJS是同步加載，適用于Node.js服務(wù)器端環(huán)境；2.ES模塊是異步加載，適用于瀏覽器等網(wǎng)絡(luò)環(huán)境；3.語法上，ES模塊使用import/export，且必須位于頂層作用域，而CommonJS使用require/module.exports，可在運(yùn)行時(shí)動(dòng)態(tài)調(diào)用；4.CommonJS廣泛用于舊版Node.js及依賴它的庫如Express，ES模塊則適用于現(xiàn)代前端框架和Node.jsv14 ；5.雖然可混合使用，但容易引發(fā)問題
