Cara Membina Trello Chrome Extension - Senarai Mengeksport

Di bahagian sebelumnya, kami membina asas-asas pelanjutan kami, melaksanakan pengesahan melalui skrin tetapan bertenaga asas adat dan menggunakan perpustakaan klien JavaScript Trello. Di bahagian ini, kami akan menyelesaikan pelanjutan kami dengan menambahkan logik dan UI yang mengeksport.

Takeaways Key

Gunakan `chrome.extension.sendmessage` API untuk pemindahan token selamat antara halaman tetapan dan halaman latar belakang lanjutan Chrome.
Secara automatik buka halaman Tetapan Pelanjutan apabila pemasangan awal atau apabila papan Trello dilawati tanpa pengesahan.
Mengintegrasikan pilihan menu tersuai dalam UI Trello untuk membolehkan eksport senarai, menggunakan jQuery untuk mengendalikan perubahan DOM dinamik.
Ambil ID Senarai Trello melalui penyelesaian yang melibatkan pemeriksaan elemen kad dalam senarai, yang diperlukan kerana batasan UI Trello.
Melaksanakan mesej lulus dalam skrip latar belakang untuk mengambil kad senarai dari API Trello sebaik sahaja ID senarai diperoleh.
Menawarkan pilihan eksport dalam kedua-dua format TXT dan JSON, menggunakan pop timbul modal yang dibina untuk memaparkan data eksport, mengelakkan konflik CSS dengan gaya asli Trello.

pemesejan

Apabila kami mengesahkan dengan Trello pada skrin Tetapan, token Trello disimpan dalam storan tempatan. Walau bagaimanapun, halaman tetapan adalah halaman sendiri dan, dengan berkesan, persekitarannya sendiri - Ergo, bukan halaman latar belakang lanjutan mahupun skrip kandungan lanjutan mempunyai akses kepadanya. Di sinilah kita perlu menggunakan lulus mesej.

API Chrome.extension.Sendmessage digunakan untuk menghantar mesej ke dan dari halaman latar belakang. Dalam kes kami, kami akan menggunakannya untuk menghantar token dari halaman tetapan ke halaman latar belakang kami. Oleh kerana pengembaraan tetapan kami dilakukan sebaik sahaja ini selesai, kami mungkin juga menutup tab secara automatik, untuk meningkatkan keramahan pengguna.

Kemas kini bahagian pertama fungsi init dalam settings.js untuk ini:

<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>

Menggunakan logik ini, kami memberitahu Perpustakaan Trello untuk menghantar mesej ke pelanjutan apabila pengesahan selesai, dan sebaik sahaja ia menerima mesej kembali yang mengatakan mesej itu diterima (itu bahagian fungsi (data)), kami menutup Tab Semasa.

Sekarang mari kita berurusan dengan halaman latar belakang. Pertama, ubah kandungan latar belakang.html ke ini:

Kami memuatkan kunci aplikasi, skrip latar belakang yang akan kami gunakan untuk logik kami, dan klien Trello seperti dahulu. Jelas sekali, kita juga memerlukan jQuery - ia adalah kebergantungan Trello.

<span><span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/key.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/background.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="lib/jquery-2.1.1.min.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="lib/trello_client.js"</span>></span><span><span></span>></span></span></span>

Kemudian, tukar skrip/latar belakang.js ke:

Ini adalah bahagian yang menerima mesej dari halaman Tetapan. Ia merebut token daripada permintaan itu dan menyelamatkannya ke LocalStorage untuk kegunaan masa depan. Kami menggunakan pembentukan objek dengan arahan sebagai kunci utama kerana kami berhasrat untuk menghantar arahan lain ke halaman latar belakang kemudian.

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>

auto-settings

Di atas perintah SaveToken, mari blok lain:

<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>

Jika kami tidak mengeluarkan arahan tertentu, dan pengguna kami belum disahkan dengan Trello, buka halaman tetapan dalam tab baru. Ini memastikan halaman tetapan dibuka sebaik sahaja pemasangan awal pelanjutan, sebaik sahaja papan Trello dikunjungi dalam penyemak imbas.

Menambah pilihan menu

UI Trello sangat, sangat tidak mesra untuk penyesuaian. Senarai tidak mempunyai ID dalam elemen mereka, sama ada sebagai atribut data atau pautan apa -apa jenis, sementara kad lakukan. Menu konteks yang boleh dilahirkan apabila anda mengklik butang pilihan senarai di sudut kanan atas semuanya dibina semula dari awal setiap kali mereka dipanggil (berlebihan?) Dan semua dari satu kotak yang dikelaskan sebagai "pop-over", iaitu Juga dipanggil jika anda mengklik hampir setiap menu lain di UI. Apa yang lebih buruk, sebaik sahaja anda memanggil menu popover senarai, menu itu sendiri tidak mempunyai pengenalpastian senarai yang dipanggil, jadi anda tidak tahu tentang konteksnya, menjadikannya lebih sukar untuk mendapatkan ID senarai dengan mudah untuk menanyakan dengan betul Trello API mengenainya dan mengambil kad untuk eksport. Inilah sebabnya apa yang berikut mungkin kelihatan seperti banyak hackery yang mencurigakan, tetapi itu kerana, baiklah, itu.

Untuk menambah pilihan menu ke menu konteks, kita perlu mengedit skrip kandungan main.js. Hidupkan ke dalam ini:

<span><span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/key.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/background.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="lib/jquery-2.1.1.min.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="lib/trello_client.js"</span>></span><span><span></span>></span></span></span>

Bermula dengan var popover = $ (". Pop-over");, kami menetapkan pembolehubah untuk memegang objek Popover, hanya supaya kita tidak perlu menyimpannya semula. Kemudian, apabila butang menu pada senarai diklik (.list-header-menu-icon), kami memanggil selang yang sentiasa berjaga-jaga sama ada atau tidak popover dapat dilihat atau tidak. Sebaik sahaja ia kelihatan, pemeriksaan berhenti dan pilihan menu dilampirkan ke bahagian bawah semua pilihan, khususnya dibuat untuk kelihatan seperti yang lain, jadi ia sesuai. Akhirnya, pengendali acara klik terikat pada pilihan ini, sehingga kita dapat Panggil "Eksport" apabila pilihan diklik. Tetapi .. bagaimana kita tahu apa yang perlu kita eksport? Dan format mana yang kita eksport?

Cari id senarai

Seperti yang saya katakan sebelum ini, UI Trello terkenal pemaju-tidak mesra. Ia tidak menawarkan ID senarai dengan elemen DOM, jadi mendapati mereka kurang daripada mudah. Mengapa kita memerlukan ID senarai? Untuk menanyakan API Trello dan mengambil kad, jadi kami boleh mengeksportnya - kami sudah mengatakan bahawa kami tidak akan menghuraikan UI kerana ketidakstabilannya di papan besar, tetapi akan bergantung pada API.

bernasib baik, jika kita memeriksa kad dalam senarai individu, kita dapat melihat bahawa mereka sebenarnya mempunyai atribut HREF, dan ia mengandungi ID kad. Dengan mengetahui ID kad, kami boleh menanyakan Trello untuk maklumatnya dan ambil ID senarai induknya. Tetapi .. jika menu Popover tidak dilampirkan pada senarai, bagaimana kita mengetahui senarai mana yang telah kita klik? Kami tidak boleh merebut kad pertama yang kami jumpai, itu akan terlalu rawak.

kita boleh menggunakan acara yang dipecat oleh jQuery apabila butang menu diklik. Ini penting! Kami menggunakan klik asal pada butang menu, dan bukannya klik pada pilihan "Eksport" kerana sementara butang asal terikat pada senarai yang kami berminat untuk mengeksport, menu sebenar yang ditanam tidak dan oleh itu, menjadikannya hampir mustahil bagi kita untuk mengetahui senarai mana yang kita hadapi. Di tempat komen senarai // eksport dalam kod di atas, tambahkan ini:

<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>

Kemudian, buat fungsi:

<span><span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/key.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/background.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="lib/jquery-2.1.1.min.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="lib/trello_client.js"</span>></span><span><span></span>></span></span></span>

Akhirnya, buat fungsi findfirstcardid:

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>

Kami mengambil datuk nenek sasaran acara (senarai), dan cari tajuk kad pertama di dalamnya. Tajuknya mengandungi HREF dalam bentuk ini:

Jika tiada tajuk ditemui, kami memberi amaran kepada pengguna bahawa senarai itu tidak dapat dieksport. Jika tidak, kami mengekstrak dan mengembalikan id kad.

Sekarang fungsi ExportList kami mempunyai ID kad, kami boleh menggunakannya untuk mengetahui ID senarai. Jika kita melihat dokumen API, kita boleh menggunakan kad URL/{{id}} untuk mendapatkan apa yang kita perlukan. Untuk meminimumkan jumlah data yang kami minta Trello kembali, kami juga boleh mengehadkan pertanyaan kepada hanya harta Idlist dengan param medan. Mari tambahkan arahan baru ke dalam latar belakang.js.

<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>

kita perlu menentukan fungsi Trelloinit juga. Itulah yang boleh kita panggil setiap kali sebelum arahan yang berinteraksi dengan Trello dipanggil, jadi token dan kunci ditetapkan dengan betul dan kami 100% pasti permintaan kami disahkan.

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>

kami kini berjaya mengambil id senarai.

mengambil kad senarai

Dengan beberapa baris kod lagi, kembali ke main.js, kami kini mempunyai fungsi eksport yang kelihatan seperti ini:

<span>exportList(event);</span>

Dalam "Humanese", ini adalah:

Dapatkan id kad pertama
Jika ID tidak dijumpai, senarai jelas kosong
Jika ID dijumpai, hubungi halaman latar belakang dan beritahu ia untuk memberi kami senarai ID melalui panggilan ke trello api
Jika id senarai baik -baik saja, buat panggilan lain ke halaman latar belakang mendapatkan kad senarai, dan apabila selesai, output hasil dalam konsol.

Kembali di halaman latar belakang, kini kita boleh membina perintah getListCards, seperti dokumen API:

<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>

Jika anda memuatkan semula dan menguji pelanjutan sekarang, anda sepatutnya tidak dapat melihat pilihan eksport muncul pada senarai anda, tetapi juga data yang kami cari dieksport dalam konsol selepas mengklik pilihan.

Format Eksport

Buat masa ini, kami akan mengambil pendekatan yang mudah untuk mengeksport, kerana tutorial ini berjalan sedikit lama. Kami akan menawarkan pengguna pemilihan sama ada TXT atau JSON, dengan bentuk dan bentuk yang telah ditetapkan oleh kami. Output teks akan, buat masa ini, kelihatan seperti ini:

Walaupun JSON akan berpuas hati seperti yang diterima dari Trello, iaitu:

<span>/**
</span><span> * Uses the menu button on a card to find the first card in that list and get its ID
</span><span> * Returns false if not found, or the ID if there is a card
</span><span> * <span>@param event
</span></span><span> * <span>@returns bool | string
</span></span><span> */
</span><span>function findFirstCardId(event) {
</span>    <span>var titles = $(event.currentTarget).parent().parent().find('a.list-card-title:first');
</span>    <span>if (titles[0] === undefined) {
</span>        <span>console.error('List has no cards!');
</span>        <span>return false;
</span>    <span>} else {
</span>        <span>return $(titles[0]).attr('href').split('/')[2];
</span>    <span>}
</span><span>}</span>

Data JSON akan, jelas, menghasilkan lebih banyak maklumat, tetapi ia juga jauh lebih mudah untuk diedit - hanya tampal ke mana -mana IDE atau alat seperti editor JSON Online atau JSON ke CSV dan anda baik untuk pergi.

Untuk mengeksport, kami memerlukan tetingkap modal untuk menampal data. Pilihan yang menarik di sini adalah rangka kerja asas, melihat seperti yang kita telah menggunakannya untuk halaman tetapan kami dan ia mempunyai komponen pop timbul modal sendiri, tetapi tidak ada CSS Yayasan atau Trello yang betul -betul diisytiharkan, dan termasuk CSS Yayasan dalam Punca Konflik Trello. Kami juga mempunyai jQuery pra-termasuk, tetapi sekali lagi, untuk mendapatkan dialog dan berjalan, kita perlu memasukkan UI jQuery dan bahkan tidak akan mencukupi-sambungan Chrome tidak menyokong pemuatan imej dalam CSS melalui URL relatif ( ) Sintaks, yang digunakan oleh JQuery UI - kita perlu menulis semula CSS JQuery UI untuk menggunakan URL lanjutan tempatan atau menggunakan imej yang dikodkan oleh Base64, kedua -duanya Pendekatan yang tidak menarik.

Sebaliknya, kita akan membuat pop timbul kita sendiri, dan menggunakan beberapa gaya Trello yang sedia ada, mengabaikan semua konflik di sepanjang jalan. Saya akan meletakkan kod akhir di sini, dan kemudian menerangkannya. Sila buat lib/trellohelper/js/exportpopup.js, dan berikan kandungan berikut:

<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>

Saya memilih untuk mempunyai logik pop timbul di luar skrip utama supaya kita dapat dengan mudah memperbaikinya kemudian. Saya juga memilih pendekatan "berorientasikan objek", hanya kerana saya suka. Kami mentakrifkan "kelas" TrelloExportPopup baru, dengan tiga kaedah - init, menunjukkan dan menyembunyikan. Init akan dipanggil sebaik sahaja skrip kandungan dimuatkan. Ia adalah kaedah yang bertanggungjawab untuk membina pop timbul, melampirkan pendengar acara yang betul, dan menambahkan semuanya ke dalam HTML dari Lembaga Trello. Menambah kelas. Button ke butang di tajuk popup memastikan kita dapat melihat yang konsisten dengan UI Trello semasa. Pandangan yang saya pergi ke sini adalah sejenis antara muka "tab" - klik pada teks dan menunjukkan eksport teks, klik pada JSON dan JSON ditunjukkan.

Kaedah Hide akan menyembunyikan pop timbul, tetapi hanya jika ia wujud di suatu tempat di halaman dalam bentuk yang kelihatan. Kaedah pertunjukan secara automatik mengaktifkan paparan tab pertama (JSON), dan memaparkan kawasan eksport dengan data yang diperlukan. Kawasan JSON adalah dump stringify mudah - output data JSON dalam bentuk rentet "Salin-paste mesra".

semua yang perlu kita lakukan sekarang adalah gaya sedikit. Inilah kandungan lib/trellohelper/css/exportpopup.css:

Ini memastikan pop timbul berpusat dan kelihatan seperti popup trello asli. Ia juga memastikan Textarea yang akan menunjukkan kepada kita kandungan eksport yang mengisi ruang pop timbul yang lain. Sekarang mari masukkan fail -fail ini dalam skrip kandungan kami:

<span><span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/key.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/background.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="lib/jquery-2.1.1.min.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="lib/trello_client.js"</span>></span><span><span></span>></span></span></span>

<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>

Akhirnya, mari kita rempah -rempah main.js dengan logik pop timbul baru. Versi terakhir Main.js kelihatan seperti ini:

<span><span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/key.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="scripts/background.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="lib/jquery-2.1.1.min.js"</span>></span><span><span></span>></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="lib/trello_client.js"</span>></span><span><span></span>></span></span></span>

Kami pertama kali "menyegarkan" TrelloExportPopup, jadi kami boleh menggunakan kaedahnya dalam kod kami. Kemudian, sebelum mengikat pendengar acara klik ke menu, kami memulakan popup kami dengan Tep.init () jadi ia bagus dan siap di DOM kami sebelum diperlukan. Selepas pautan eksport diklik, kami memanggil fungsi ExportList kami seperti dahulu.

Dalam fungsi ExportList, kami mula -mula menyembunyikan pop timbul dengan tep.hide () sekiranya seseorang dibuka semasa kami melayari menu senarai lain, dan kemudian, sebaik sahaja kami mendapat kad dari halaman latar kami, kami tunjukkan Popup eksport dengan Tep.show (data). Itu sahaja!

Muat semula pelanjutan sekarang, muat semula halaman Trello, dan anda harus mempunyai pilihan eksport yang berfungsi!

pepijat dan penambahbaikan

Saya telah meninggalkan beberapa bug dan kaveat dengan tujuan. Sekiranya terdapat minat yang cukup, kami akan berurusan dengan mereka yang berada dalam jawatan yang akan datang, tweaking dan mengoptimumkan lanjutan untuk keselamatan yang gagal. Berikut adalah beberapa penambahbaikan yang masih mungkin:

Caching

Untuk mempercepatkan perkara untuk kegunaan masa depan, kita boleh menggunakan LocalStorage untuk mengingati mana papan senarai milik. Perhatikan bahawa ini mungkin pecah jika anda memindahkan senarai dari papan ke papan, jadi laksanakan ciri ini dengan teliti - pastikan anda menambah pendengar lain untuk gerakan senarai, jadi anda boleh membatalkan data cache!

Pilihan Eksport Duplicate Spawns

Jika anda klik secara maniacally pada ikon menu semasa menu masih dibuka, anda akan terus menambah pilihan "eksport" baru di bahagian bawah menu. Failsafe perlu dilaksanakan yang memeriksa jika pilihan sudah ada.

masalah init

Di papan besar dengan beratus -ratus papan dan ahli, UI Trello menjadi perlahan. Ini menyebabkan kesilapan acara siap dokumen, dan bahagian init skrip kami dilaksanakan sebelum terdapat unsur -unsur UI yang akan mengikat pendengar. Oleh itu, menu kadang -kadang tidak mempunyai pilihan eksport dan tidak mendapatnya sehingga anda menyegarkan semula.

menukar papan

Mengubah papan membunuh UI semasa dan membina semula untuk papan baru. Masalahnya, bagaimanapun, bahawa unsur -unsur dengan pendengar acara juga terbunuh - jadi menu kami tidak lagi memanggil pilihan eksport. Sama dengan masalah di atas, reinitialization perlu dicetuskan dalam perubahan papan untuk semuanya berfungsi.

loop inifinite

ada peluang kecil astronomi bahawa popover tidak diberikan selepas menu klik - mungkin Trello mengubah sesuatu dalam UI mereka, mungkin mereka mengubah kelas, atau mungkin mereka hanya mempunyai bug UI - di mana kes itu Pemeriksaan gelung untuk penglihatannya akan menjadi tak terhingga, mengambil sejumlah besar sumber CPU sehingga proses tab dibunuh. Perlindungan terhadapnya pasti bagus.

Kesimpulan

Dalam siri pendek ini, kami membina lanjutan Chrome mudah untuk Trello yang membolehkan kami mengeksport kad dari senarai tertentu sebagai senarai JSON atau TXT. Gunakan contoh ini untuk membinanya, dan buat sambungan Trello anda sendiri - perkara -perkara yang boleh anda capai hanya terhad oleh imaginasi anda (dan ciri -ciri yang disediakan oleh API Trello :)). Pengesahan telah diselesaikan untuk anda, dan templat logik berada di tempat - mula pengekodan!

Kod yang kami tulis dalam siri tutorial ini boleh didapati di GitHub.

Adakah anda ingin melihat kesinambungan tutorial ini? Lebih banyak ciri yang dilaksanakan? Beritahu saya! Maklum balas dihargai!

Soalan Lazim (Soalan Lazim) Mengenai Mengeksport Senarai Trello

Bagaimana saya boleh mengeksport senarai Trello ke Excel?

Mengeksport senarai Trello ke Excel adalah proses mudah. Pertama, anda perlu memasang sambungan Chrome yang dipanggil "Eksport untuk Trello". Setelah dipasang, anda boleh menavigasi ke papan Trello anda dan klik pada ikon pelanjutan. Anda akan melihat pilihan untuk mengeksport senarai Trello anda. Pilih format Excel dan senarai Trello anda akan dimuat turun sebagai fail Excel. Fail ini akan mengandungi semua butiran senarai trello anda termasuk nama kad, penerangan, label, dan banyak lagi. Pdf. Sama seperti mengeksport ke Excel, anda perlu memasang lanjutan krom "Eksport untuk Trello". Setelah dipasang, navigasi ke papan Trello anda, klik pada ikon pelanjutan, dan pilih format PDF untuk mengeksport. Senarai Trello anda akan dimuat turun sebagai fail PDF.

Adakah terdapat cara untuk mengeksport senarai Trello ke CSV? Proses ini sama dengan mengeksport ke Excel atau PDF. Anda perlu memasang lanjutan krom "Eksport untuk Trello", menavigasi ke papan Trello anda, klik pada ikon lanjutan, dan pilih format CSV untuk mengeksport. Senarai Trello anda akan dimuat turun sebagai fail CSV.

Bolehkah saya mengeksport senarai Trello ke imej? Ini boleh dilakukan menggunakan lanjutan krom "Eksport untuk Trello". Selepas memasang pelanjutan, navigasi ke papan Trello anda, klik pada ikon pelanjutan, dan pilih format imej untuk mengeksport. Senarai Trello anda akan dimuat turun sebagai fail imej.

Bolehkah saya mengeksport senarai Trello dengan label? Butiran senarai Trello anda termasuk label dieksport. Ini bermakna anda boleh menjejaki label anda walaupun selepas mengeksport senarai Trello anda.

Bolehkah saya mengeksport senarai Trello dengan deskripsi kad?

Ya, apabila anda mengeksport senarai Trello menggunakan lanjutan krom "Eksport untuk Trello", semua butiran senarai Trello anda termasuk deskripsi kad dieksport. Ini bermakna anda boleh menjejaki deskripsi kad anda walaupun selepas mengeksport senarai trello anda. Trello "Extension Chrome, semua butiran senarai Trello anda termasuk tarikh akhir dieksport. Ini bermakna anda boleh menjejaki tarikh akhir anda walaupun selepas mengeksport senarai trello anda. mengeksport lampiran. Walau bagaimanapun, semua butiran lain mengenai senarai trello anda termasuk nama kad, penerangan, label, dan tarikh tamat boleh dieksport. Trello "Extension Chrome tidak menyokong mengeksport komen. Walau bagaimanapun, semua butiran lain mengenai senarai trello anda termasuk nama kad, penerangan, label, dan tarikh akhir boleh dieksport. Untuk Trello "Extension Chrome membolehkan anda mengeksport senarai Trello dari satu papan pada satu masa. Jika anda ingin mengeksport senarai dari pelbagai papan, anda perlu menavigasi ke setiap papan dan mengeksport senarai secara berasingan.

Atas ialah kandungan terperinci Cara Membina Trello Chrome Extension - Senarai Mengeksport. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!