Cara Membina Trello Chrome Extension - Senarai Mengeksport
Feb 20, 2025 am 11:23 AM
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.
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><!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>
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><!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>
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><!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>
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:
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.
<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>
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><!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>
<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><!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>
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!
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!
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!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1793
16
1737
56
1589
29
267
587
Kenapa anda harus meletakkan tag di bahagian bawah ?
Jul 02, 2025 am 01:22 AM
PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl
Bagaimana untuk bekerja dengan tarikh dan masa di JS?
Jul 01, 2025 am 01:27 AM
Titik berikut harus diperhatikan apabila tarikh pemprosesan dan masa di JavaScript: 1. Terdapat banyak cara untuk membuat objek tarikh. Adalah disyorkan untuk menggunakan rentetan format ISO untuk memastikan keserasian; 2. Dapatkan dan tetapkan maklumat masa boleh diperoleh dan tetapkan kaedah, dan ambil perhatian bahawa bulan bermula dari 0; 3. Tarikh pemformatan secara manual memerlukan rentetan, dan perpustakaan pihak ketiga juga boleh digunakan; 4. Adalah disyorkan untuk menggunakan perpustakaan yang menyokong zon masa, seperti Luxon. Menguasai perkara -perkara utama ini secara berkesan dapat mengelakkan kesilapan yang sama.
Apakah peristiwa yang menggelegak dan menangkap di Dom?
Jul 02, 2025 am 01:19 AM
Penangkapan dan gelembung acara adalah dua peringkat penyebaran acara di Dom. Tangkap adalah dari lapisan atas ke elemen sasaran, dan gelembung adalah dari elemen sasaran ke lapisan atas. 1. Penangkapan acara dilaksanakan dengan menetapkan parameter useCapture addeventlistener kepada benar; 2. Bubble acara adalah tingkah laku lalai, useCapture ditetapkan kepada palsu atau ditinggalkan; 3. Penyebaran acara boleh digunakan untuk mencegah penyebaran acara; 4. Acara menggelegak menyokong delegasi acara untuk meningkatkan kecekapan pemprosesan kandungan dinamik; 5. Penangkapan boleh digunakan untuk memintas peristiwa terlebih dahulu, seperti pemprosesan pembalakan atau ralat. Memahami kedua -dua fasa ini membantu mengawal masa dan bagaimana JavaScript bertindak balas terhadap operasi pengguna.
Bagaimanakah anda dapat mengurangkan saiz muatan aplikasi JavaScript?
Jun 26, 2025 am 12:54 AM
Jika aplikasi JavaScript memuat perlahan -lahan dan mempunyai prestasi yang buruk, masalahnya adalah bahawa muatan terlalu besar. Penyelesaian termasuk: 1. Penggunaan kod pemisahan (codesplitting), memecah bundle besar ke dalam pelbagai fail kecil melalui react.lazy () atau membina alat, dan memuatkannya seperti yang diperlukan untuk mengurangkan muat turun pertama; 2. Keluarkan kod yang tidak digunakan (treeshaking), gunakan mekanisme modul ES6 untuk membersihkan "kod mati" untuk memastikan perpustakaan yang diperkenalkan menyokong ciri ini; 3. Memampatkan dan menggabungkan fail sumber, membolehkan GZIP/Brotli dan Terser memampatkan JS, menggabungkan fail dan mengoptimumkan sumber statik; 4. Gantikan kebergantungan tugas berat dan pilih perpustakaan ringan seperti hari.js dan ambil
Roundup JS yang pasti pada modul JavaScript: Modul ES vs Commonjs
Jul 02, 2025 am 01:28 AM
Perbezaan utama antara modul ES dan Commonjs adalah kaedah pemuatan dan senario penggunaan. 1.Commonjs dimuatkan secara serentak, sesuai untuk persekitaran sisi pelayan Node.js; 2. Modul tidak disengajakan, sesuai untuk persekitaran rangkaian seperti penyemak imbas; 3. Sintaks, modul ES menggunakan import/eksport dan mesti terletak di skop peringkat atas, manakala penggunaan CommonJS memerlukan/modul.exports, yang boleh dipanggil secara dinamik pada runtime; 4.Commonjs digunakan secara meluas dalam versi lama node.js dan perpustakaan yang bergantung kepadanya seperti Express, manakala modul ES sesuai untuk kerangka depan moden dan nod.jsv14; 5. Walaupun ia boleh dicampur, ia boleh menyebabkan masalah dengan mudah.
Bagaimana membuat permintaan HTTP di node.js?
Jul 13, 2025 am 02:18 AM
Terdapat tiga cara biasa untuk memulakan permintaan HTTP dalam node.js: Gunakan modul terbina dalam, axios, dan nod-fetch. 1. Gunakan modul HTTP/HTTPS terbina dalam tanpa kebergantungan, yang sesuai untuk senario asas, tetapi memerlukan pemprosesan manual jahitan data dan pemantauan ralat, seperti menggunakan https.get () untuk mendapatkan data atau menghantar permintaan pos melalui .write (); 2.AXIOS adalah perpustakaan pihak ketiga berdasarkan janji. Ia mempunyai sintaks ringkas dan fungsi yang kuat, menyokong async/menunggu, penukaran JSON automatik, pemintas, dan lain -lain. Adalah disyorkan untuk memudahkan operasi permintaan tak segerak; 3.Node-Fetch menyediakan gaya yang serupa dengan pengambilan penyemak imbas, berdasarkan janji dan sintaks mudah
Bagaimanakah pengumpulan sampah berfungsi di JavaScript?
Jul 04, 2025 am 12:42 AM
Mekanisme pengumpulan sampah JavaScript secara automatik menguruskan memori melalui algoritma pembersihan tag untuk mengurangkan risiko kebocoran ingatan. Enjin melintasi dan menandakan objek aktif dari objek akar, dan tidak bertanda dianggap sebagai sampah dan dibersihkan. Sebagai contoh, apabila objek tidak lagi dirujuk (seperti menetapkan pembolehubah kepada null), ia akan dikeluarkan dalam pusingan seterusnya kitar semula. Punca kebocoran memori yang biasa termasuk: ① Pemasa atau pendengar peristiwa yang tidak jelas; ② Rujukan kepada pembolehubah luaran dalam penutupan; ③ Pembolehubah global terus memegang sejumlah besar data. Enjin V8 mengoptimumkan kecekapan kitar semula melalui strategi seperti kitar semula generasi, penandaan tambahan, kitar semula selari/serentak, dan mengurangkan masa menyekat benang utama. Semasa pembangunan, rujukan global yang tidak perlu harus dielakkan dan persatuan objek harus dihiasi dengan segera untuk meningkatkan prestasi dan kestabilan.
var vs let vs const: penjelasan js roundup cepat
Jul 02, 2025 am 01:18 AM
Perbezaan antara VAR, LET dan Const adalah skop, promosi dan pengisytiharan berulang. 1.VAR adalah skop fungsi, dengan promosi yang berubah -ubah, yang membolehkan pengisytiharan berulang; 2.Let adalah skop peringkat blok, dengan zon mati sementara, dan pengisytiharan berulang tidak dibenarkan; 3.const juga skop peringkat blok, dan mesti diberikan dengan segera, dan tidak boleh ditugaskan semula, tetapi nilai dalaman jenis rujukan boleh diubah suai. Gunakan const terlebih dahulu, gunakan biarkan apabila menukar pembolehubah, dan elakkan menggunakan var.
