Rumah >hujung hadapan web >tutorial js >Tulis semula Web dengan Chickenfoot
Walau bagaimanapun, jika pengguna ingin berinteraksi secara dinamik dengan pelbagai halaman, untuk mengautomasikan bahagian -bahagian yang berlainan antara muka Firefox, untuk aktiviti skrip di beberapa halaman, atau bekerja dengan kedua -dua laman web dan sistem fail setempat secara serentak, pilihannya telah terhad. Tetapi ini telah mula berubah baru -baru ini dengan sambungan seperti Coscripter, dan lanjutan yang membentuk subjek artikel ini: Chickenfoot.
Takeaways Key
Gunakan shell interaktif untuk memanipulasi halaman dan untuk memantau interaksi halaman dalam pelbagai cara
Chickenfoot dipasang dengan cara yang sama seperti sambungan Firefox yang lain: hanya muat turun dan terima fail XPI yang tersedia dari halaman pemasangan Chickenfoot.
Walaupun fakta bahawa Firefox adalah pelayar silang platform, lanjutan berfungsi dengan baik pada Windows. Jika anda berada di Mac, anda masih boleh memasang Chickenfoot dan bermain bersama dengan kod dalam artikel ini, tetapi anda mungkin melihat tingkah laku yang tidak konsisten. Malangnya, sehingga kinks disetrika, amaran ini. Docshell tidak mempunyai sifat akan sering muncul, dan output anda mungkin tidak sepadan dengan yang diterangkan di sini.
Sebaik sahaja anda telah memasang pelanjutan dan memulakan semula penyemak imbas anda, anda boleh mengakses shell interaktif Chickenfoot dengan sama ada menekan F8 atau memilih pilihan menu Sidebar> Sidebar> Chickenfoot. Cangkang akan dibuka di bar sisi, dan akan kelihatan seperti imej di bawah.
Apabila sidebar Chickenfoot pertama kali dilancarkan, ia menunjukkan pandangan berpecah - panel atas mengandungi medan teks yang dilabelkan tanpa henti; Ini adalah kawasan input di mana kami akan menulis kod Chickenfoot kami.
Panel bawah mengandungi empat tab. Tab yang dipilih secara lalai dilabelkan output, dan memaparkan sejarah semua tindakan anda, dan semua tindakan Chickenfoot, yang digunakan untuk penyemak imbas. Pertama, kita perlu memberitahu Chickenfoot untuk merakam tindakan kita, walaupun - klik pada tab Tindakan, dan pastikan pilihan tindakan rekod diperiksa.
mari kita menguji bahawa output kami sedang ditangkap. Untuk berbuat demikian, buka tab Firefox baru dan muatkan laman utama Google. Sebaik sahaja halaman telah dimuatkan, klik pada pautan imej di sebelah kiri atas halaman, yang akan membawa anda ke carian imej Google. Jika anda memilih tab Output Chickenfoot sekali lagi, anda harus melihat teks berikut:
click("Images")
Ini lebih daripada sekadar penerangan tentang apa yang telah berlaku - ia sebenarnya merupakan coretan kod Chickenfoot! Untuk menguji kod ini, klik anak panah belakang untuk kembali ke laman utama Google, kemudian salin dan tampal coretan yang kami buat ke dalam panel Chickenfoot atas. Klik anak panah hijau di bahagian atas panel, dan coretan kod anda akan dilaksanakan. Halaman ini sekali lagi akan menavigasi ke halaman carian imej Google.
Chickenfoot berkongsi idea -idea tertentu dengan alat lain yang membolehkan Web Skrip.
Idea utama di sebalik Chickenfoot adalah untuk menyediakan pengguna dengan alat untuk membuat makro yang boleh digunakan oleh sesiapa sahaja atau menulis, tanpa memerlukan bantuan pengaturcara. Saya harus perhatikan di sini bahawa pendapat saya bahawa matlamat ini tidak akan dicapai, kerana akan sentiasa ada permintaan untuk skrip dengan fungsi kompleks yang hanya dapat dilaksanakan oleh seorang pengaturcara. Walau bagaimanapun, hakikat bahawa matlamat idealis ini adalah daya penggerak di belakang Chickenfoot telah menghasilkan alat yang sangat berguna.
Matlamat ini serupa dengan Coscripter - sesungguhnya, Coscripter menggunakan sebahagian daripada kod Chickenfoot versi 0.9. Saya tidak akan pergi ke sebarang butiran mengenai Coscripter dalam artikel ini, tetapi jika anda berminat untuk membaca lebih lanjut, lihat penulisan Alex Faorg.
mari kita lihat bagaimana skrip ayam boleh direkodkan, seperti makro dalam MS Word atau Adobe Photoshop. Untuk contoh ini, kami akan membuat skrip yang hanya sedikit lebih terlibat daripada arahan tunggal yang kita lihat di bahagian sebelumnya. Untuk demo ini, saya telah mengambil inspirasi dari permulaan dengan tutorial Coscripter.
Apabila kami selesai, skrip kami akan menyebabkan penyemak imbas kami:
click("Images")kemudian klik anak panah hijau. Seperti yang anda harapkan, penyemak imbas anda akan memuatkan halaman utama Google.
Untuk merakam sisa skrip kami, kami pada dasarnya akan melakukan langkah -langkah yang saya nyatakan di atas. Klik pada pautan imej, kemudian taipkan teks "Koalas" dalam kotak carian, dan tekan tab untuk keluar dari medan. Akhirnya, klik butang Imej Carian.
tab output anda kini harus memaparkan sesuatu yang serupa dengan yang berikut:
go("google.com")Jika anda melakukan langkah -langkah ini semasa anda log masuk ke akaun Google anda, beberapa nilai teks yang disenaraikan mungkin berbeza, tetapi tindakan itu masih sama.
Sekarang bahawa kami telah mencatatkan tindakan kami, kami boleh memilih dan memilih dari output kod ini, dan menyalin garisan yang dikehendaki ke panel atas sidebar Chickenfoot kami. Voila! Kami mempunyai skrip kerja!
Selain tindakan awal, perintah yang kami lakukan adalah klik dan masukkan arahan. Kita juga boleh memudahkan nilai -nilai yang diluluskan, supaya skrip kita kelihatan seperti ini:
go("http://www.google.com/")Satu perkara yang anda dapati dari contoh di atas ialah sintaks Chickenfoot mempunyai banyak persamaan dengan banyak bahasa berasaskan C, seperti JavaScript. Perintah Chickenfoot, sebenarnya, JavaScript.
click("Images")
go("http://images.google.com/imghp?hl=en&tab=wi")
enter("Sign in", "koalas")
click("Search Images button")
go("http://images.google.com/images?hl=en&q=koalas&btnG=Search+Images
&gbv=2")
menggaru permukaan
Jika anda merujuk atau mengubahsuai objek yang mana JavaScript mempunyai akses dalam konteks halaman biasa, ia mungkin berkelakuan seperti yang anda harapkan. Walau bagaimanapun, kerana enjin JavaScript Chickenfoot mempunyai tahap akses yang lebih mendalam, anda boleh mengambil lebih banyak kebebasan daripada biasa, seperti mengakses objek di luar konteks lalai mereka.
Semasa anda meneroka Chickenfoot lebih jauh, anda mungkin menghadapi perbezaan antara kedua -dua persekitaran dan bagaimana objek berkelakuan di dalamnya. Selalunya, sebab perbezaan ini akan turun ke fungsi asli dari persekitaran penyemak imbas yang telah diimplementasikan semula dalam persekitaran Xul Chickenfoot demi kebiasaan.
Salah satu contoh sedemikian adalah fungsi amaran; Pertimbangkan coretan kod JavaScript berikut:
click("Images")
Apabila kod ini dijalankan dalam persekitaran HTML di Firefox, ia memaparkan kotak dialog berikut:
Apabila ia dijalankan di persekitaran Chickenfoot, bagaimanapun, kod yang sama menghasilkan kotak dialog berikut:
Di samping banyak fungsi yang dikongsi, terdapat beberapa fungsi tambahan yang tidak tersedia dalam pelaksanaan JavaScript berasaskan pelayar biasa, tetapi boleh didapati dalam persekitaran Chickenfoot. Senarai fungsi ini boleh didapati dalam dokumentasi API Chickenfoot.
pecking di API Chickenfoot
Berikut adalah bahagian -bahagian yang saya dapati yang paling berguna.
Datatip corak
Kebanyakan fungsi Chickenfoot menerima corak untuk parameter. Corak diterangkan dalam dokumentasi API sebagai "kesatuan beberapa datatip lain."
Adalah paling mudah untuk memikirkan corak sebagai frasa tersendiri untuk mengakses objek pada halaman HTML. Sebagai contoh, corak "cickenfoot kedua" merujuk kepada kejadian kedua perkataan "chickenfoot" pada halaman. Jika anda melawat halaman API Chickenfoot dan melaksanakan kod berikut, kejadian kedua perkataan "Chickenfoot" pada halaman akan dipilih:
Terdapat beberapa variasi pada pendekatan ini, dan Chickenfoot menggunakan beberapa logik untuk cuba memikirkan corak mana yang digunakan oleh frasa anda. Oleh kerana itu, fungsi tertentu (seperti klik) tidak berfungsi dengan baik dengan corak, kerana mereka akan menghasilkan kesilapan jika mereka diberi corak yang dapat mengembalikan lebih dari satu hasil yang mungkin.
go("google.com")
Sebagai contoh, katakan kita akan menukar kod di atas kepada yang berikut:
Kemungkinan besar ini akan menghasilkan mesej ralat dalam panel output yang serupa dengan yang berikut:
go("http://www.google.com/")
click("Images")
go("http://images.google.com/imghp?hl=en&tab=wi")
enter("Sign in", "koalas")
click("Search Images button")
go("http://images.google.com/images?hl=en&q=koalas&btnG=Search+Images
&gbv=2")
Untuk menggunakan corak dengan berkesan, oleh itu anda perlu sama ada untuk membuat corak anda sangat tepat (contohnya, dengan menggunakan sintaks XPath atau sintaks pertanyaan LAPIS jika anda mempunyai lanjutan LAPIS dipasang) atau menggunakan fungsi Cari, dan berulang melalui pelbagai objek yang fungsi ini dikembalikan. Kami akan melihat pendekatan ini seterusnya.
go("google.com")
click("Images")
enter("koalas")
click("Search Images button")
Corak adalah kesatuan datatip berikut:
Fungsi Cari
Fungsi Cari mengambil corak dan mengembalikan objek yang sepadan dengan corak itu. Letakkan kod berikut di panel atas anda dan laksanakan pada halaman ini:
click("Images")Anda akan melihat objek yang muncul dalam panel output anda. Mengklik pada objek ini akan menyebabkan semua contoh perkataan "cickilfoot" diserlahkan.
Objek yang dikembalikan oleh fungsi ini, malangnya, bukan array JavaScript. Sebagai peraturan ibu jari, anda perlu mengetuk hasil fungsi mencari Chickenfoot ke dalam array, kemudian gelung melalui array untuk memilih objek individu yang anda sedang selepas.
Fungsi termasuk
Fungsi termasuk membolehkan anda memasukkan fail JavaScript lain dalam skrip Chickenfoot anda. Chickenfoot dilengkapi dengan beberapa perpustakaan terbina dalam (kebanyakan nama yang jelas):
Nota Mengenai Menggunakan Perpustakaan Baru: Saya dapati bahawa sering jenis perpustakaan yang berfungsi dengan baik adalah yang menyediakan fungsi tertentu, seperti cssquery atau perpustakaan yang serupa, dan bukannya perpustakaan yang cuba menjadi semua-merangkumi. Fungsi termasuk juga mengambil parameter objek pilihan yang boleh sangat berguna untuk memeriksa apa yang ada di dalam perpustakaan tertentu atau set perpustakaan, walaupun fungsi ini tidak diliputi dalam artikel ini.
Chickenfoot juga mempunyai beberapa bahasa lain, seperti selepas, sebelum, dan masukkan, yang membolehkan anda mengambil elemen pada halaman menggunakan Cari, dan kemudian menavigasi dari elemen itu ke elemen yang anda sebenarnya. Fungsi -fungsi ini juga memungkinkan untuk memasukkan kandungan secara dinamik ke dalam elemen itu atau ke dalam elemen HTML di sekelilingnya.
Tugas berguna berubah menjadi ayam
mari kita mulakan! Berikut adalah beberapa skrip Chickenfoot yang berguna.
Pertama, mari kita ketahui pembolehubah apa yang terikat di peringkat tertinggi Firefox Chrome anda:
Baris tunggal ini harus memberi anda sedikit maklumat. Anda juga boleh melihat timbunan maklumat mengenai dokumen semasa menggunakan arahan ini:
click("Images")
Seterusnya, mari output laman web semasa sebagai rentetan XHTML ke panel output:
go("google.com")
Sekarang, mari tulis rentetan XHTML di atas ke desktop anda. Ada kemungkinan untuk menulis output XHTML dari contoh di atas ke fail pada desktop anda. Gantikan pemisah fail yang melarikan diri "" pada baris terakhir dengan "//" jika anda berada di mesin Mac atau Linux:
go("http://www.google.com/")
click("Images")
go("http://images.google.com/imghp?hl=en&tab=wi")
enter("Sign in", "koalas")
click("Search Images button")
go("http://images.google.com/images?hl=en&q=koalas&btnG=Search+Images
&gbv=2")
Tugas di atas sebenarnya boleh dilakukan dengan menggunakan kod yang lebih mudah dalam versi Chickenfoot yang akan dikeluarkan dengan segera, kerana ia menggunakan direktori muat turun Firefox lalai (biasanya desktop).
go("google.com")
click("Images")
enter("koalas")
click("Search Images button")
Sekarang, mari berinteraksi dengan krom penyemak imbas yang telah anda periksa.
Di Firefox, bahagian -bahagian krom tetingkap penyemak imbas anda boleh diakses jika anda mempunyai ID objek yang dipersoalkan. Ini boleh diambil menggunakan fungsi Chromewindow.document.getElementById. Sebagai contoh, menu ID konteks yang dipaparkan apabila anda klik kanan pada halaman adalah ConteneAcontextMenu. Sekiranya kita mengambil skrip dari Contoh 3 di atas, yang menyelamatkan DOM ke desktop, dan bungkusnya dalam fungsi, kita boleh memanggil fungsi ini dari menu konteks, seperti:
click("Images")
Perhatikan bahawa fungsi tambahan fungsi Chickenfoot membolehkan anda menambah data ke dokumen. Anda menggunakannya seperti ini:
go("google.com")
Mudah -mudahan, contoh -contoh ini memberi anda rasa untuk beberapa tugas yang mudah tetapi berkuasa yang boleh automatik oleh skrip Chickenfoot.
cukup dengan tugas -tugas yang mudah - mari kita lakukan sesuatu yang lebih maju dengan Chickenfoot!
Saya menggunakan skrip berikut untuk menambah fungsi ke Gmail - khususnya, untuk mencari dan pilih dari halaman perbualan yang mengandungi teks yang sepadan dengan corak Chickenfoot tertentu. Ia adalah peningkatan yang berguna dan kuat kepada pelanggan e-mel berasaskan web kegemaran semua orang.
inilah skrip:
go("http://www.google.com/")
click("Images")
go("http://images.google.com/imghp?hl=en&tab=wi")
enter("Sign in", "koalas")
click("Search Images button")
go("http://images.google.com/images?hl=en&q=koalas&btnG=Search+Images
&gbv=2")
Skrip ini mendorong pengguna untuk beberapa input, kemudian lulus input itu sebagai parameter ke fungsi mencari ayam. Ingatlah bahawa Cari Menerima Corak Chickenfoot, jadi kemungkinan penggunaan untuk carian semacam ini hampir tidak terbatas memandangkan anda boleh memintanya untuk memadankan lebih daripada sekadar rentetan.
anda mungkin ingat dari ketika pertama kali kami menemui kaedah mencari yang tidak mengembalikan array. Oleh itu, kita perlu membaca hasilnya ke dalam array. Anda mungkin akan menemui serpihan kod yang melaksanakan tugas ini untuk berguna dalam skrip Chickenfoot lain yang anda tulis:
go("google.com")
click("Images")
enter("koalas")
click("Search Images button")
Selepas ini, skrip gelung melalui array yang dikembalikan oleh fungsi Cari, dan cuba membina corak ayam yang akan sepadan dengan teks yang mengandungi rentetan carian kami dengan tepat. Kami kemudian menggunakan fungsi semak Chickenfoot untuk menukar kotak semak yang paling dekat dengan bahagian teks itu, dengan itu memilih mesej itu.
ingat bahawa pemeriksaan perlu dapat memastikan ia mempunyai sekeping teks yang tepat, atau ia akan membuang kesilapan, itulah sebabnya kita tidak boleh melakukan pemeriksaan pada found.text.
Satu aspek penting skrip di atas adalah saiznya yang kecil berbanding dengan fungsi yang dicapai. Fungsi Chickenfoot menyediakan cara yang lebih mudah untuk berinteraksi secara dinamik dengan dokumen daripada API standard seperti DOM.
Dalam artikel ini, kami melihat beberapa cara di mana anda boleh menggunakan Chickenfoot dengan mudah untuk berinteraksi dengan penyemak imbas. Kami hanya menggaruk permukaan dari segi apa yang boleh dilakukan dengan ayam dalam artikel ini - potensi yang besar, dan hanya terhad oleh imaginasi anda!
Jika anda berminat untuk mempelajari lebih lanjut, lihat sumber -sumber berikut:
Jika anda membuat skrip pembunuh, saya menggalakkan anda menyerahkannya kepada wiki Chickenfoot. Selamat skrip!
Alat penulisan web direka khas untuk membantu pengguna mengfrasive atau menulis semula kandungan. Ini amat berguna untuk pencipta kandungan, penulis, pelajar, dan profesional yang perlu membuat kandungan yang unik dari sumber sedia ada. Alat ini menggunakan algoritma lanjutan dan kecerdasan buatan untuk memastikan kandungan yang ditulis semula mengekalkan makna asal semasa menukar struktur dan kata -kata untuk mengelakkan plagiarisme. Ia menyediakan persekitaran pengaturcaraan secara langsung dalam penyemak imbas, membolehkan pengguna memanipulasi laman web dan mengautomasikan pelayaran web. Ciri ini membezakannya daripada alat penulisan semula yang lain yang memberi tumpuan terutamanya kepada pengaliran kandungan. Walau bagaimanapun, ia sentiasa disyorkan untuk menyemak spesifikasi alat atau kedai web Chrome untuk maklumat keserasian. Sesetengah alat, seperti OutWrite dan WordTune, menawarkan sambungan Chrome khusus untuk akses dan penggunaan yang mudah. Kebanyakan alat menggunakan algoritma pembelajaran AI dan mesin lanjutan untuk memastikan kandungan yang ditulis semula secara tatabahasa betul dan mengekalkan makna asal. Walau bagaimanapun, ia adalah idea yang baik untuk mengkaji semula kandungan yang ditulis semula secara manual untuk ketepatan dan konteks. Sentiasa pastikan untuk memetik sumber anda dengan sewajarnya. Ia kemudian menyusun semula dan menyusun semula kandungan sambil mengekalkan niat asal. Sesetengah alat, seperti hix.ai, gunakan model AI canggih seperti GPT-3 untuk penulisan semula berkualiti tinggi.
Kebanyakan alat penulisan semula web selamat digunakan. Walau bagaimanapun, penting untuk mengkaji semula dasar privasi alat untuk memahami bagaimana data anda dikendalikan. Sesetengah alat boleh menyimpan kandungan anda buat sementara waktu untuk diproses, tetapi biasanya tidak menyimpan atau berkongsi data anda. Mereka juga boleh membantu anda mempelajari perbendaharaan kata baru dan memperbaiki tatabahasa anda. Sentiasa periksa spesifikasi alat untuk sokongan bahasa.
Atas ialah kandungan terperinci Tulis semula Web dengan Chickenfoot. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!