운 좋게도, 개별 목록의 카드를 검사하면 실제로 HREF 속성이 있고 카드 ID가 포함되어 있음을 알 수 있습니다. 카드 ID를 알면 Trello가 해당 정보를 쿼리하고 부모 목록의 ID를 가져올 수 있습니다. 그러나 .. 팝 오버 메뉴가 목록에 첨부되지 않으면 클릭 한 목록을 어떻게 알 수 있습니까? 우리는 우리가 만난 첫 번째 카드 만 잡을 수 없습니다. 너무 무작위입니다. 메뉴 버튼을 클릭하면 jQuery가 발사 한 이벤트를 사용할 수 있습니다. 이것은 중요합니다! 원래 버튼이 목록에 바인딩되기 때문에 "내보내기"옵션을 클릭하는 대신 메뉴 버튼의 원래 클릭을 사용합니다. 우리가 다루는 목록을 찾는 것이 거의 불가능합니다. 위의 코드에서 // 내보내기 목록 주석 대신에 다음을 추가하십시오.
그런 다음 함수를 만듭니다 :
마지막으로, findfirstcardid 함수를 만듭니다 :
<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>로그인 후 복사
로그인 후 복사
로그인 후 복사
제목이없는 경우 목록을 내보낼 수 없음을 사용자에게 알립니다. 그렇지 않으면 카드의 ID를 추출하고 반환합니다
이제 ExportList 기능에 카드 ID가 있으므로이를 사용하여 목록 ID를 찾을 수 있습니다. API 문서를 보면 URL 카드/{{id}}를 사용하여 필요한 것을 얻을 수 있습니다. Trello에게 반환하도록 요청하는 데이터의 양을 최소화하기 위해 필드 파라를 사용하여 쿼리를 Idlist 속성으로만 제한 할 수도 있습니다. 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>
로그인 후 복사
로그인 후 복사
.
우리는 이제 목록 ID를 성공적으로 가져오고 있습니다
목록 카드를 가져 오기
몇 줄의 코드 라인을 사용하여 main.js로 돌아가서 이제 다음과 같이 보이는 내보내기 기능이 있습니다.
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를 찾을 수 없으면 목록은 분명히 입니다
id가 발견되면 배경 페이지에 전화하여 Trello API 에 대한 호출을 통해 목록 ID를 알려 주도록 지시하십시오.
목록 ID가 정상이면 백그라운드 페이지로 다른 호출을하고 목록의 카드를 얻고 완료되면 콘솔에서 결과를 출력하십시오.
백그라운드 페이지에서 돌아와서 이제 API 문서에 따라 GetListCards 명령을 작성할 수 있습니다.
지금 확장자를 다시로드하고 테스트하면 내보내기 옵션이 목록에 나타날뿐만 아니라 옵션을 클릭 한 후 콘솔에서 내보내는 데이터도 볼 수 있어야합니다.
내보내기 형식
현재로서는이 자습서가 그대로 조금 길게 실행되므로 내보내기에 대한 단순화 된 접근 방식을 취할 것입니다. 우리는 사용자에게 TXT 또는 JSON을 선택하여 우리가 사전 정의한 모양과 양식을 제공합니다. 텍스트 출력은 지금은 다음과 같이 보입니다
JSON은 Trello에서받은대로 만족할 것입니다. 
JSON 데이터는 분명히 훨씬 더 많은 정보를 생성하지만 편집하기가 훨씬 쉽습니다. JSON 편집기 온라인 또는 JSON과 같은 도구에 붙여 넣기 만하면됩니다. >
내보내기 위해서는 데이터를 붙여 넣을 모달 창이 필요합니다. 여기서 매력적인 옵션은 기초 프레임 워크로, 우리가 이미 설정 페이지에 이미 사용하고 있으며 고유 한 모달 팝업 구성 요소가 있지만 Foundation 's 나 Trello의 CSS는 제대로 네임 스패닝되지 않았으며 Trello의 원인에 대한 Foundation의 CSS를 포함하지 않습니다. 우리는 또한 jQuery가 사전에 포함되어 있지만 다시 대화 및 실행을 얻으려면 jQuery UI를 포함해야하며 심지어 충분하지 않을 수도 있습니다. 크롬 확장자는 상대 URL을 통해 CSS의 이미지로드를 지원하지 않습니다 ( ) 구문, jQuery UI가 사용하는 것 - 로컬 확장 UI의 CSS를 다시 작성하거나 로컬 확장 URL을 사용하거나 Base64 인코딩 된 이미지를 사용하여 매력적이지 않아야합니다. 접근.
대신, 우리는 우리 자신의 팝업을 제작하고 Trello의 기존 스타일 중 일부를 사용하여 그 과정에서 모든 갈등을 무시할 것입니다. 여기에 최종 코드를 넣은 다음 설명하겠습니다. lib/trellohelper/js/exportpopup.js를 만들고 다음 내용을 제공하십시오
나는 기본 스크립트 외부에 팝업 로직을 갖기로 선택하여 나중에 쉽게 개선 할 수 있습니다. 나는 또한 내가 좋아하기 때문에“객체 지향적”접근법을 선택했다. 우리는 새로운 trelloexportpopup“class”를 정의하고, 3 가지 방법의 시작, 쇼 및 숨기기. 컨텐츠 스크립트가로드하자마자 Init가 호출됩니다. 팝업 구축, 올바른 이벤트 리스너를 첨부하고 Trello 보드의 HTML에 모든 것을 추가하는 방법입니다. 팝업 헤더의 버튼에 .button 클래스를 추가하면 현재 Trello UI와 일치하는 모습을 얻을 수 있습니다. 내가 여기에서 찾는 모습은 일종의 "탭"인터페이스입니다 - 텍스트를 클릭하고 텍스트 내보내기 쇼를 클릭하고 JSON을 클릭하면 JSON이 표시됩니다.
숨기기 메소드는 팝업을 숨기지 만 페이지 어딘가에 가시 형식으로 존재하는 경우에만 팝업을 숨 깁니다. 쇼 메소드는 첫 번째 (JSON) 탭보기를 자동으로 활성화하고 필요한 데이터로 내보내기 영역을 채 웁니다. JSON 영역은 간단한 Stringify 덤프입니다. JSON 데이터의 출력은 문자열 형식으로, 텍스트 영역은 단순히 카드 사이에 두 개의 빈 줄이있는 별도의 라인에서 각각 카드의 제목과 설명을 출력합니다. "복사-페이스트 친화적".
지금 우리가해야 할 일은 조금 스타일입니다. 다음은 lib/trellohelper/css/exportpopup.css : 의 내용입니다
이것은 팝업이 중앙에 있고 기본 Trello 팝업처럼 보이도록합니다. 또한 수출 내용이 팝업의 나머지 공간을 채우는 TextRea가 우리에게 보여줄 수 있도록합니다. 이제 이러한 파일을 콘텐츠 스크립트에 포함시켜 봅시다 : <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>로그인 후 복사
로그인 후 복사
로그인 후 복사
우리는 먼저 TrelloExportPopup을 "인스턴스화"하므로 코드에서 메소드를 사용할 수 있습니다. 그런 다음 클릭 이벤트 리스너를 메뉴에 바인딩하기 전에 Tep.init ()를 사용하여 팝업을 초기화하여 필요하기 전에 DOM이 좋고 준비됩니다. 내보내기 링크가 클릭되면 이전과 같이 내보내기 기능을 호출합니다.
ExportList 함수에서 먼저 다른 목록의 메뉴를 탐색하는 동안 하나가 열려있는 경우 TEP.Hide ()로 팝업을 숨기고 백그라운드 페이지에서 카드를 받으면 표시됩니다. TEP.show (데이터)를 사용한 내보내기 팝업. 그게 다야!
지금 확장자를 다시로드하고 Trello 페이지를 새로 고치면 기능하는 내보내기 옵션이 있어야합니다! .
<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>
로그인 후 복사
로그인 후 복사
버그 및 개선
나는 의도적으로 몇 가지 버그와 경고를 남겼습니다. 충분한 관심이 있다면, 우리는 미래의 게시물에있는 사람들을 다룰 것입니다. 여전히 가능한 개선 사항은 다음과 같습니다.
캐싱
향후 용도로 속도를 높이려면 LocalStorage를 사용하여 목록이 속한 보드를 기억할 수 있습니다. 목록을 보드에서 보드로 옮기면이 기능이 중단 될 수 있으므로이 기능을주의 깊게 구현하십시오. 목록 이동에 다른 리스너를 추가하여 캐시 된 데이터를 무효화 할 수 있습니다! .
중복 내보내기 옵션 스폰
메뉴가 여전히 열려있는 동안 메뉴 아이콘을 미치광이로 클릭하면 메뉴 하단에 새로운 "내보내기"옵션이 계속 추가됩니다. 옵션이 이미 있는지 확인하는 실패 안전을 구현해야합니다.
init 문제
수백 개의 보드와 멤버가있는 거대한 보드에서 Trello의 UI는 심하게 느려집니다. 이로 인해 문서 준비 이벤트가 잘못되며 스크립트의 초기 부분은 리스너를 바인딩 할 UI 요소가 있기 전에 실행됩니다. 따라서 메뉴에는 때때로 내보내기 옵션이 없으며 새로 고침 될 때까지 얻지 못합니다.
보드 변경
변경 보드 변경은 현재 UI를 죽이고 새 보드를 위해 재 구축합니다. 그러나 문제는 이벤트 리스너가있는 요소도 죽임을 당했기 때문에 메뉴는 더 이상 내보내기 옵션을 소환하지 않습니다. 위의 문제와 마찬가지로, 모든 것이 작동하기 위해서는 보드 변경에서 재 구체화가 트리거되어야합니다.
.
이니파 나이트 루프
메뉴를 클릭 한 후 팝 오버가 렌더링되지 않을 가능성이 작은 것이 있습니다. 아마도 Trello는 UI에서 무언가를 변경했을 수도 있습니다. 아마도 클래스를 변경했거나 어쩌면 어떤 종류의 UI 버그가있을 수 있습니다. 루프가 가시성을 확인하는 것은 무한 해져 탭의 프로세스가 사망 할 때까지 막대한 양의 CPU 리소스를 차지할 것입니다. 그것에 대한 보호가 좋을 것입니다. 결론
이 짧은 시리즈에서는 Trello에 대한 간단한 크롬 확장을 만들었습니다. 이 예제를 사용하여이를 작성하고 자신만의 Trello 확장을 만듭니다. 달성 할 수있는 것들은 상상력 (및 Trello의 API가 제공하는 기능)에 의해서만 제한됩니다. :)). 인증은 이미 귀하를 위해 해결되었으며 로직 템플릿이 제자리에 있습니다 - 코딩 시작!
이 튜토리얼 시리즈에 쓴 코드는 github에서 사용할 수 있습니다.
이 튜토리얼의 연속을보고 싶습니까? 더 많은 기능이 구현 되었습니까? 알려줘요! 피드백에 감사드립니다!
trello 목록 를 내보내는 것에 대한 자주 묻는 질문 (FAQ)
trello 목록을 Excel로 내보낼 수 있습니까?
Trello 목록을 Excel로 내보내는 것은 간단한 프로세스입니다. 먼저“Trello의 내보내기”라는 크롬 확장을 설치해야합니다. 설치되면 Trello 보드로 이동하여 확장자 아이콘을 클릭 할 수 있습니다. Trello 목록을 내보낼 수있는 옵션이 표시됩니다. Excel 형식을 선택하면 Trello 목록이 Excel 파일로 다운로드됩니다. 이 파일에는 카드 이름, 설명, 라벨 등을 포함한 Trello 목록의 모든 세부 사항이 포함되어 있습니다. PDF. Excel로 내보내는 것과 유사하게 "Trello의 내보내기"Chrome 확장을 설치해야합니다. 설치되면 Trello 보드로 이동하여 확장자 아이콘을 클릭하고 내보내기 위해 PDF 형식을 선택하십시오. Trello 목록은 PDF 파일로 다운로드됩니다. Trello 목록을 CSV로 내보내는 방법이 있습니까? 프로세스는 Excel 또는 PDF로 내보내는 것과 유사합니다. "Trello for Trello"Chrome 확장자를 설치하고 Trello 보드로 이동하고 확장 아이콘을 클릭 한 다음 CSV 형식을 선택하여 내보내십시오. Trello 목록은 CSV 파일로 다운로드됩니다.
Trello 목록을 이미지로 내보낼 수 있습니까? 예, Trello 목록은 이미지로 내보낼 수 있습니다. 이것은 "Trello의 내보내기"크롬 확장을 사용하여 수행 할 수 있습니다. 확장자를 설치 한 후 Trello 보드로 이동 한 후 확장 아이콘을 클릭하고 내보내기 위해 이미지 형식을 선택하십시오. Trello 목록은 이미지 파일로 다운로드됩니다.
라벨이있는 Trello 목록을 내보내려면 Trello를 내보내는 경우 Trello chrome Extension을 사용하여 TRELLO 목록을 내보낼 때 모든 라벨을 포함한 Trello 목록의 세부 사항이 내보내립니다. 즉, Trello 목록을 내보낸 후에도 라벨을 추적 할 수 있습니다. 카드 설명이 포함 된 Trello 목록을 내보낼 수 있습니까?
예, TRELLO가 "Trello에 대한 내보내기"Chrome 확장을 사용하여 Trello 목록을 내보내면 카드 설명을 포함한 Trello 목록의 모든 세부 사항이 내보내집니다. 이것은 Trello 목록을 내보낸 후에도 카드 설명을 추적 할 수 있음을 의미합니다. 마감일이있는 Trello 목록을 내보낼 수 있습니까?
예, Trello가“내보내기를 사용하는 Trello 목록을 내보내는 경우. TRELLO”Chrome Extension, 기한 날짜를 포함한 Trello 목록의 모든 세부 사항이 내보내기. 이것은 Trello 목록을 내보낸 후에도 마감일을 추적 할 수 있음을 의미합니다.
첨부 파일과 함께 Trello 목록을 내보낼 수 있습니까?
불행히도 Chrome Extension은 지원하지 않습니다. 첨부 파일을 내 보냅니다. 그러나 카드 이름, 설명, 라벨 및 마감일을 포함하여 Trello 목록의 다른 모든 세부 사항을 내보낼 수 있습니다. 댓글과 함께 Trello 목록을 내보낼 수 있습니까?
불행히도,“내보내기 Trello”Chrome Extension은 주석 내보내기를 지원하지 않습니다. 그러나 카드 이름, 설명, 라벨 및 마감일을 포함하여 Trello 목록의 다른 모든 세부 사항을 내보낼 수 있습니다.
한 번에 여러 보드에서 Trello 목록을 내보낼 수 있습니까? Trello의 경우 Chrome Extension의 경우 한 번에 한 보드에서 Trello 목록을 내보낼 수 있습니다. 여러 보드에서 목록을 내보내려면 각 보드로 이동하여 목록을 별도로 내보내야합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
