Cara Membina Trello Chrome Extension - Pengesahan API

Di SitePoint, kami menggunakan Trello secara meluas. Pasti, ia mempunyai kebiasaannya dan boleh menggunakan peningkatan atau dua dalam pelbagai bidang, tetapi untuk sebahagian besar, ia merevolusikan pengalaman kolaboratif bukan sahaja kakitangan, tetapi juga pengarang dan editor mereka.

Saya baru -baru ini mendapati diri saya memerlukan tajuk kad eksport dari senarai tertentu untuk bukan ahli. Secara lalai, Trello hanya menyokong eksport lembaga penuh ke JSON dan itu sesuatu yang merosakkan tab saya di papan lebih daripada 100 ahli dengan beratus -ratus kad. Terdapat tentera kecil Trello Extensions di kedai, dan lagi ingin tahu, tidak ada senarai eksport dengan apa -apa cara.

mari kita buat sambungan krom yang boleh melakukan ini untuk kita! Sekiranya anda tergesa -gesa dan hanya mahu melihat hasil akhir, lihat repo GitHub untuk versi akhir kod tutorial ini.

Takeaways Key

Gunakan repositori Chromeskel untuk melancarkan perkembangan lanjutan Trello Chrome anda, memudahkan proses dengan rangka pra-dibuat.
Dapatkan Kunci API Trello dan Rahsia untuk Pengesahan dengan melawat laman web Trello, penting untuk membolehkan pelanjutan anda berinteraksi dengan akaun Trello dengan selamat.
Melaksanakan halaman tetapan dalam pelanjutan anda untuk mengendalikan pengesahan pengguna, menggunakan struktur HTML asas dan JavaScript untuk bertukar -tukar penglihatan berdasarkan status pengesahan pengguna.
Gunakan Perpustakaan Pelanggan Trello JavaScript dan skrip tersuai (hashsearch.js) untuk menguruskan token kebenaran dengan berkesan, memastikan pengesahan pengguna yang selamat dan cekap.
Streamline fungsi lanjutan ke URL papan trello tertentu menggunakan fail manifes, meningkatkan prestasi dengan mengehadkan skop operasi lanjutan ke halaman yang relevan.

Membina sambungan krom

Saya fikir pendekatan terbaik akan menjadi lanjutan kerana aplikasi berasingan hanya melakukan eksport ini mungkin terlalu banyak. Selain itu, Trello mempunyai API bagus yang boleh kita gunakan untuk mendapatkan semua yang kita perlukan. Saya juga menganggap ia akan menjadi peralihan yang baik kembali ke pembangunan lanjutan, sesuatu yang saya tidak lakukan untuk seketika.

bootstrapping

Saya akan menggunakan semula Repo Chromeskel saya yang dipercayai - lanjutan kerangka yang saya bina lama dahulu untuk memulakan pembangunan lanjutan Chrome lebih mudah. Untuk rujukan, jika anda ingin melihat beberapa tutorial lanjutan krom lain yang saya tulis pada masa lalu, lihat di sini dan di sini.

kita mulakan dengan mengkloning repo ke mana -mana folder.

git clone https://github.com/Swader/ChromeSkel_a.git

Untuk melihat sama ada ia berfungsi, muatkannya ke dalam Chrome. Pergi ke tab Extensions dan klik "Load Unpacked Extension". Jika pilihan tidak ada, pastikan anda menyemak kotak semak "Mod Pemaju" di sudut kanan atas.

Setelah dimuatkan, ia harus muncul dalam senarai lanjutan anda.

Pengesahan

Walaupun kita hanya dapat menuai data pada skrin dengan lanjutan krom dan menghuraikan bahawa, Trello telah terbukti tidak boleh dipercayai pada masa -masa dan cenderung untuk merempuh papan yang sangat penduduk. Inilah sebabnya kami hanya akan menggunakan integrasi sambungan Chrome dengan domain Trello.com untuk membuat pilihan menu konteks baru pada senarai (pilihan "kad eksport"), dan kami akan melakukan keseluruhan logik di halaman latar, mengambil data melalui API.

Kunci dan Rahsia

Untuk menghasilkan kunci aplikasi untuk Trello, sila layari https://trello.com/1/appkey/Generate semasa log masuk. Ini akan memberikan anda kunci dan rahsia yang boleh anda gunakan dengan akaun anda. Dalam baki tutorial ini, sila pertimbangkan {{key}} menjadi kunci ini, dan gantikan kandungan dengan sewajarnya.

Sebaik sahaja anda mempunyai kunci anda, dalam subfolder skrip, buat key.js fail:

git clone https://github.com/Swader/ChromeSkel_a.git

Semasa anda berada di situ, anda boleh memadamkan serpihan dan folder-stets mewah. Kami tidak akan memerlukannya.

aliran kerja dan manifes

Idea alur kerja lanjutan adalah seperti berikut:

• diberi pengguna membuka papan trello
• periksa sama ada pengguna yang diberi kuasa untuk menggunakan akaun Trellonya
• Jika ya, teruskan
• Jika tidak, buka halaman tetapan dengan butang kebenaran yang membolehkan mereka menyelesaikan prosedur
• Setelah diberi kuasa, tutup halaman tetapan secara automatik dan simpan lanjutan yang diberi kuasa

Untuk lanjutan untuk membuka tab baru secara automatik dengan beberapa kandungan, kita perlu menandakan kandungan itu sebagai "sumber yang boleh diakses oleh web".

Untuk tujuan ini, buat tetapan folder, yang akan mengandungi halaman tetapan kami, dan mengemas kini manifes lanjutan untuk kelihatan seperti ini:

<span>// key.js
</span><span>var APP_KEY = '{{KEY}}';</span>

Kebanyakan ini harus biasa. Kami menetapkan versi, memberikan beberapa metadata, menentukan ikon dan mengisytiharkan halaman acara, memuat beberapa skrip kandungan prasyarat (kami memerlukan jQuery untuk Perpustakaan Pelanggan Trello JS) dan akhirnya menentukan "WEB_ACCESSIBLE_RESOURCES" supaya kami dapat menggunakan halaman tetapan kami menjadi bangunan. Kami juga mengehadkan kesan pelanjutan ke https://trello.com/b/*, yang bermaksud hanya URL papan.

Tetapan dan Kebenaran

Untuk membina halaman tetapan kami, kami menulis halaman HTML yang mudah. Untuk tujuan demonstrasi, saya akan memastikan ia sangat mudah dalam kes ini. Kami akan menggunakan asas untuk menggayakannya (sekarang, hanya untuk butang, tetapi kami akan berusaha untuk membuat halaman tetapan yang lebih baik dalam jawatan masa depan), jadi muat turun bundle asas asas, dan tidak menghiraukan kandungannya ke dalam /tetapan, sehingga index.html jatuh ke dalam folder itu. Anda harus mempunyai struktur folder seperti yang satu ini:

Jika anda mempunyai beberapa folder tambahan yang tidak dapat dilihat dalam tangkapan skrin saya, jangan ragu untuk memadamkannya. Buat tetapan fail/js/settings.js, biarkan kosong buat masa ini.

OK, mari kita turun ke perniagaan. Oleh itu, andaian adalah bahawa pengguna berakhir pada halaman ini dengan sama ada pergi ke "pilihan" dalam tab Extensions, atau dengan cuba menggunakan pelanjutan apabila tidak sah. Mari kita bina halaman HTML yang agak asas dengan dua Divs - satu untuk apabila pengguna disahkan dengan butang "Log Out", dan satu untuk ketika dia masih tidak sah dan perlu mengklik butang Authorize. Gantikan kandungan index.html dengan ini:

git clone https://github.com/Swader/ChromeSkel_a.git

Kami mempunyai dua div kami, butang log masuk dan log keluar, dan kami tarik JS yang kami perlukan. Dalam kes ini, kami menggunakan lalai Yayasan termasuk jQuery, tetapi tidak mengapa jika anda memilih untuk menggunakan anda sendiri yang dimuat turun di tempat lain dalam projek, sekiranya anda mengambil lebih banyak up to date seperti yang saya lakukan (lebih lanjut yang kemudian).

Sekarang mari kita tambahkan beberapa logik. Buka Tetapan.js dan berikan kandungan ini:

<span>// key.js
</span><span>var APP_KEY = '{{KEY}}';</span>

Dengan membaca dokumen, kita dapat mengetahui bahawa trello_token akan wujud di LocalStorage apabila aplikasi klien disahkan. Ini bermakna kita boleh menggunakannya sebagai penunjuk pada bila untuk menunjukkan setiap div kita. Dalam fungsi init, kita ambil divs, tambahkan pengendali klik ke butang (tiada logik di sana lagi) dan akhirnya, kita menyembunyikan div yang sesuai, menurut trello_token.

Apabila pengguna disahkan, sebagai contoh, mereka mendapat skrin seperti ini:

mari kita ambil pelanggan Trello JS sekarang.

Dokumentasi Trello tidak benar -benar ditulis dengan sambungan Chrome dalam fikiran, dan mengesyorkan melampirkan kunci ke URL sambil mengambil perpustakaan klien JS dari domain mereka, seperti:

<span>{
</span>    <span>"name": "Trello Helper",
</span>    <span>"version": "0.1",
</span>    <span>"manifest_version" : 2,
</span>    <span>"description": "Trello Helper adds some much needed functionality to Trello. The current version focuses on exporting card information from lists.",
</span>    <span>"background" : {
</span>        <span>"page" : "background.html",
</span>        <span>"persistent": false
</span>    <span>},
</span>    <span>"page_action" :
</span>    <span>{
</span>        <span>"default_icon": {
</span>            <span>"19": "icons/19.png",
</span>            <span>"38": "icons/38.png"
</span>        <span>}
</span>    <span>},
</span>    <span>"content_scripts": [
</span>        <span>{
</span>            <span>"matches": ["https://trello.com/b/*"],
</span>            <span>"js": [
</span>                <span>"lib/jquery-2.1.1.min.js",
</span>                <span>"scripts/main.js"
</span>            <span>],
</span>            <span>"run_at": "document_idle"
</span>        <span>}
</span>    <span>],
</span>    <span>"permissions": [
</span>        <span>"tabs"
</span>    <span>],
</span>    <span>"icons": {
</span>        <span>"16": "icons/16.png",
</span>        <span>"48": "icons/48.png",
</span>        <span>"128": "icons/128.png"
</span>    <span>},
</span>    <span>"web_accessible_resources": [
</span>        <span>"settings/index.html"
</span>    <span>],
</span>    <span>"options_page": "settings/index.html"
</span><span>}</span>

kita tidak boleh melakukannya, melihat ketika kita berurusan dengan persekitaran tertutup lanjutan, dan melihat kerana ia akan lebih masuk akal untuk mendapatkannya secara tempatan untuk alasan prestasi. Oleh itu, kami melawat URL di atas tetapi tanpa param utama:

<span><span><!doctype html></span>
</span><span><span><span><html</span> class<span>="no-js"</span> lang<span>="en"</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>/></span>
</span>    <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1.0"</span>/></span>
</span>    <span><span><span><title</span>></span>Trello Helper Settings<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/foundation.css"</span>/></span>
</span>    <span><span><span><script</span> src<span>="js/vendor/modernizr.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="large-12 columns"</span>></span>
</span>        <span><span><span><h1</span>></span>Trello Helper Settings<span><span></h1</span>></span>
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="large-12 columns"</span>></span>
</span>        <span><span><span><div</span> class<span>="panel"</span> id<span>="trello_helper_loggedout"</span> <span>style<span>="<span>display: none</span>"</span></span>></span>
</span>            <span><span><span><p</span>></span>To get going, you'll need to authorize the extension to use your Trello account.<span><span></p</span>></span>
</span>
            <span><span><span><p</span>></span>Do it by clicking the big Authorize button below.<span><span></p</span>></span>
</span>
            <span><span><span><a</span> href<span>="#"</span> class<span>="medium success button"</span> id<span>="trello_helper_login"</span>></span>Authorize<span><span></a</span>></span><span><span><br</span>/></span>
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="panel"</span> id<span>="trello_helper_loggedin"</span> <span>style<span>="<span>display: none</span>"</span></span>></span>
</span>            <span><span><span><p</span>></span>You are already authorized. If something doesn't work, try logging out using the button below, and logging back in.<span><span></p</span>></span>
</span>
            <span><span><span><a</span> href<span>="#"</span> class<span>="medium success button"</span> id<span>="trello_helper_logout"</span>></span>Log out<span><span></a</span>></span><span><span><br</span>/></span>
</span>        <span><span><span></div</span>></span>
</span>
    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><script</span> src<span>="../scripts/key.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="js/vendor/jquery.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="js/settings.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

Simpan kandungan fail ini ke dalam lib/trello_client.js, kemudian pastikan halaman tetapan kami memuatkannya, dengan menambahkannya ke bahagian skrip berhampiran tag , seperti:

<span>function init() {
</span>
    <span>// Message and button containers
</span>    <span>var lout = $("#trello_helper_loggedout");
</span>    <span>var lin = $("#trello_helper_loggedin");
</span>
    <span>// Log in button
</span>    <span>$("#trello_helper_login").click(function () {
</span>        
    <span>});
</span>
    <span>// Log out button
</span>    <span>$("#trello_helper_logout").click(function () {
</span>        
    <span>});
</span>
    <span>if (!localStorage.trello_token) {
</span>        <span>$(lout).show();
</span>        <span>$(lin).hide();
</span>    <span>} else {
</span>        <span>$(lout).hide();
</span>        <span>$(lin).show();
</span>    <span>}
</span><span>}
</span><span>$(document).ready(init);</span>

Ini akan memastikan kami mempunyai objek Trello yang terdapat di JavaScript kami, membiarkan kami menggunakan kaedahnya. Mari kita mengendalikan log keluar terlebih dahulu. Tukar butang pengendali klik untuk menjadi ini:

<span><span><span><script</span> src<span>="https://api.trello.com/1/client.js?key=substitutewithyourapplicationkey"</span>></span><span><span></script</span>></span></span>

Itu semua ada untuk mendahului dengan Trello. Kami memanggil kaedah dan memuatkan semula halaman yang kami ada (skrin Tetapan, iaitu).

Sekarang, mari mengendalikan pembalakan, yang merupakan anak lelaki yang lebih kompleks.

git clone https://github.com/Swader/ChromeSkel_a.git

Mengikuti logik dokumen dalam talian, kita melihat bahawa objek Trello mempunyai kaedah setKey, yang kami gunakan dengan tepat untuk menetapkannya. Kemudian, kami menyeru tindakan kaedah yang dibenarkan. Menurut dokumentasi, menggunakan pop timbul bukannya redirect akan memerlukan pengguna secara manual menampal kunci rahsia ke dalam aplikasinya apabila ia diterima, yang bukan sesuatu yang kita cari. Jika kita menggunakan redirect, bagaimanapun, halaman akan dialihkan ke pengesahan dan kembali setelah selesai. Bidang interaktif, apabila ditetapkan kepada palsu, menafikan kedua -dua popup dan redirect dan sebaliknya hanya cek jika nilai localStorage.trello_token wujud. Mengikut dokumen, kita perlu terlebih dahulu memanggil secara teratur dengan pengalihan, dan kemudian, sekali kembali ke halaman tetapan, kita perlu memanggilnya lagi tetapi dengan set interaktif kepada palsu, yang akan membuatnya merebut token yang sebelumnya disediakan. Ini semua agak rumit, tetapi ia berfungsi.

ada masalah lain, walaupun. Sekiranya kita memanggil kuasa yang tidak interaktif sebaik sahaja selepas halaman tetapan dibuka, maka kita akan menyebabkan ralat pada halaman kerana redirect selepas kebenaran belum berlaku. Alternatif menambah butang lain "mengesahkan" atau sesuatu seperti itu ke halaman tetapan kami yang muncul selepas pengalihan dari Trello kembali ke halaman tetapan kami, membiarkan pengguna memulakan kebenaran bukan interaktif secara manual. Ini kelihatan seperti mimpi ngeri UX, walaupun. Pada akhirnya, saya memilih penyelesaian ketiga.

simpan kod berikut ke lib/hashsearch.js.

<span>// key.js
</span><span>var APP_KEY = '{{KEY}}';</span>

Seperti yang diambil dari jawapan StackOverflow, utiliti kecil ini membantu kita merebut nilai hash tertentu dari URL.

Apabila anda memberi kuasa dengan Trello melalui mod redirect, ia akan mengarahkan kembali ke halaman yang datang dari tetapi dengan token dalam URL. Tanda ini akan menjadi token pengarang yang diperlukan oleh klien Trello JS. Oleh itu, ia adalah alasan bahawa jika kita dapat mengesan kehadiran token ini dalam URL, kita dapat menyimpulkan bahawa kita berhadapan dengan pengalihan dari Trello dan dengan itu secara automatik dan selamat mencetuskan protokol yang dibenarkan oleh tidak interaktif.

selepas anda menambah hashsearch ke halaman tetapan seperti ...

<span>{
</span>    <span>"name": "Trello Helper",
</span>    <span>"version": "0.1",
</span>    <span>"manifest_version" : 2,
</span>    <span>"description": "Trello Helper adds some much needed functionality to Trello. The current version focuses on exporting card information from lists.",
</span>    <span>"background" : {
</span>        <span>"page" : "background.html",
</span>        <span>"persistent": false
</span>    <span>},
</span>    <span>"page_action" :
</span>    <span>{
</span>        <span>"default_icon": {
</span>            <span>"19": "icons/19.png",
</span>            <span>"38": "icons/38.png"
</span>        <span>}
</span>    <span>},
</span>    <span>"content_scripts": [
</span>        <span>{
</span>            <span>"matches": ["https://trello.com/b/*"],
</span>            <span>"js": [
</span>                <span>"lib/jquery-2.1.1.min.js",
</span>                <span>"scripts/main.js"
</span>            <span>],
</span>            <span>"run_at": "document_idle"
</span>        <span>}
</span>    <span>],
</span>    <span>"permissions": [
</span>        <span>"tabs"
</span>    <span>],
</span>    <span>"icons": {
</span>        <span>"16": "icons/16.png",
</span>        <span>"48": "icons/48.png",
</span>        <span>"128": "icons/128.png"
</span>    <span>},
</span>    <span>"web_accessible_resources": [
</span>        <span>"settings/index.html"
</span>    <span>],
</span>    <span>"options_page": "settings/index.html"
</span><span>}</span>

... fail settings.js harus, pada akhirnya, kelihatan seperti ini:

<span><span><!doctype html></span>
</span><span><span><span><html</span> class<span>="no-js"</span> lang<span>="en"</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><meta</span> charset<span>="utf-8"</span>/></span>
</span>    <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1.0"</span>/></span>
</span>    <span><span><span><title</span>></span>Trello Helper Settings<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/foundation.css"</span>/></span>
</span>    <span><span><span><script</span> src<span>="js/vendor/modernizr.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="large-12 columns"</span>></span>
</span>        <span><span><span><h1</span>></span>Trello Helper Settings<span><span></h1</span>></span>
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="large-12 columns"</span>></span>
</span>        <span><span><span><div</span> class<span>="panel"</span> id<span>="trello_helper_loggedout"</span> <span>style<span>="<span>display: none</span>"</span></span>></span>
</span>            <span><span><span><p</span>></span>To get going, you'll need to authorize the extension to use your Trello account.<span><span></p</span>></span>
</span>
            <span><span><span><p</span>></span>Do it by clicking the big Authorize button below.<span><span></p</span>></span>
</span>
            <span><span><span><a</span> href<span>="#"</span> class<span>="medium success button"</span> id<span>="trello_helper_login"</span>></span>Authorize<span><span></a</span>></span><span><span><br</span>/></span>
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="panel"</span> id<span>="trello_helper_loggedin"</span> <span>style<span>="<span>display: none</span>"</span></span>></span>
</span>            <span><span><span><p</span>></span>You are already authorized. If something doesn't work, try logging out using the button below, and logging back in.<span><span></p</span>></span>
</span>
            <span><span><span><a</span> href<span>="#"</span> class<span>="medium success button"</span> id<span>="trello_helper_logout"</span>></span>Log out<span><span></a</span>></span><span><span><br</span>/></span>
</span>        <span><span><span></div</span>></span>
</span>
    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span><script</span> src<span>="../scripts/key.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="js/vendor/jquery.js"</span>></span><span><span></script</span>></span>
</span><span><span><span><script</span> src<span>="js/settings.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

anda kini boleh mencuba lanjutan. Muatkan tab Sambungan, klik pautan pilihan dan ujian pengesahan dan pembalakan. Semuanya mesti berfungsi dengan baik.

Kesimpulan

Di bahagian ini, kami membina asas-asas lanjutan kami, melaksanakan pengesahan melalui skrin tetapan bertenaga asas adat dan menggunakan perpustakaan klien JavaScript Trello.

Di bahagian seterusnya, kami akan membina keseluruhan logik di belakang lanjutan dan membungkus perkara.

Soalan Lazim (Soalan Lazim) Mengenai Membina Pelanjutan Trello Chrome dengan Pengesahan API

Bagaimanakah saya boleh memulakan dengan membina sambungan Trello Chrome? Anda juga perlu membuat akaun Trello dan menghasilkan kunci dan token API. Ini akan membolehkan lanjutan anda berinteraksi dengan API Trello. Sebaik sahaja anda mempunyai prasyarat ini, anda boleh mula membina pelanjutan anda dengan membuat fail manifes dan menambah skrip yang diperlukan dan fail HTML. > Fail manifes adalah komponen penting bagi sambungan krom. Ia adalah fail JSON yang memberikan maklumat penting mengenai pelanjutan anda seperti namanya, versi, keizinan, dan skrip yang digunakannya. Chrome menggunakan maklumat ini untuk memuatkan dan menjalankan pelanjutan anda dengan betul.

Bagaimana saya boleh menggunakan API Trello dalam pelanjutan Chrome saya?

Kunci dan token dari platform pemaju Trello. Kelayakan ini membolehkan pelanjutan anda membuat permintaan yang diberi kuasa kepada API Trello. Anda kemudian boleh menggunakan JavaScript untuk membuat panggilan API dari pelanjutan anda, yang membolehkannya berinteraksi dengan data Trello. fungsi ke sambungan Trello Chrome anda. Ini boleh dilakukan dengan menambahkan skrip tambahan ke lanjutan anda dan menggunakan API Trello untuk berinteraksi dengan data Trello. Sebagai contoh, anda boleh menambah ciri yang membolehkan pengguna membuat kad trello baru terus dari pelanjutan anda. sambungan. Anda boleh menggunakan pilihan 'Memeriksa Pandangan' di halaman Pengurusan Lanjutan untuk membuka tetingkap Alat Pemaju untuk pelanjutan anda. Ini membolehkan anda menyahpepijat skrip anda, melihat output konsol, dan periksa DOM halaman pelanjutan anda. Sambungan, anda boleh menerbitkannya ke kedai web Chrome. Anda perlu membuat akaun pemaju, membayar yuran pendaftaran sekali, dan ikuti garis panduan kedai untuk penerbitan sambungan. > Apabila membina sambungan Trello Chrome, penting untuk mengikuti amalan terbaik untuk keselamatan, prestasi, dan pengalaman pengguna. Ini termasuk menggunakan HTTPS untuk semua komunikasi rangkaian, meminimumkan penggunaan skrip latar belakang, dan menyediakan antara muka pengguna yang jelas dan intuitif.

Bolehkah saya menggunakan API lain dalam sambungan Trello Chrome saya? Ini membolehkan anda mengintegrasikan fungsi tambahan ke dalam pelanjutan anda. Walau bagaimanapun, anda perlu memastikan bahawa anda mengikuti terma penggunaan untuk mana -mana API yang anda gunakan dan mengendalikan data pengguna secara bertanggungjawab. Pelanjutan Trello Chrome anda dengan membuat perubahan pada fail pelanjutan anda dan kemudian memuat naik versi terkini ke kedai web Chrome. Chrome secara automatik akan mengemas kini sambungan yang dipasang pada versi terkini. Kedai web Chrome membolehkan pemaju mengenakan bayaran untuk sambungan mereka, sama ada sebagai pembelian satu kali atau langganan. Anda juga boleh mengewangkan pelanjutan anda melalui pembelian atau pengiklanan dalam aplikasinya.

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