Deskripsi aplikasi di google chrome. Apa itu "Chrome"? Deskripsi dan fitur browser. Contoh Aplikasi Chrome untuk Desktop
Itu terjadi pada semua orang. Anda membuka halaman yang panjang dan mulai membaca tanpa menunggu selesai mengunduh. Saat ini, gambar akhirnya dimuat dan disematkan ke halaman, akibatnya Anda kehilangan tempat yang Anda tinggalkan.
Untuk mencegah hal ini terjadi lagi, buka halaman pengaturan layanan Chrome seluler yang terletak di chrome://flag. Selanjutnya, Anda perlu menemukan opsi "Sesuaikan gulir" dan setel ke posisi "Diaktifkan".
2. Penghematan lalu lintas
Browser Chrome memiliki fitur penghematan yang bermanfaat lalu lintas seluler yang, untuk beberapa alasan, hanya sedikit orang yang menggunakannya. Ini memungkinkan Anda untuk secara signifikan mengurangi biaya karena kompresi data. Tampilan halaman web praktis tidak berubah, namun bobotnya menjadi beberapa kali lebih kecil.
Anda dapat mengaktifkan kompresi lalu lintas langsung di pengaturan program. Jangan lupa untuk mengecek kembali ke sini dari waktu ke waktu untuk melihat hasil dari fitur ini.
3. Membuka tab desktop di ponsel
Jika Anda menggunakan browser Chrome di semua perangkat Anda, Anda mungkin tahu bahwa data disinkronkan di antara perangkat tersebut. Oleh karena itu, sama sekali tidak perlu mem-bookmark halaman jika Anda mulai membacanya di komputer dan tiba-tiba Anda harus pergi ke suatu tempat. Anda cukup membuka bagian "Tab Terbaru" di browser seluler Anda di jalan, di mana Anda akan menemukan tautan ke semua halaman yang Anda lihat baru-baru ini, terlepas dari komputer yang Anda gunakan.
4. Simpan halaman untuk dibaca secara offline
Ada banyak program untuk membaca tertunda, tetapi tidak selalu diperlukan, karena Chrome sendiri dapat menyimpan halaman untuk dibaca tanpa terhubung ke Web. Secara default, fitur ini dinonaktifkan, tetapi ini dapat diperbaiki dengan mudah.
Anda dapat mengaktifkan fitur ini di laman setelan eksperimental Google Chrome. Masukkan di bilah alamat chrome://flag, lalu temukan dan aktifkan opsi chrome://flags/#offline-bookmarks.
5. Menggunakan petunjuk pada halaman
Jika saat membaca artikel tersebut Anda menemukan istilah yang perlu diperjelas artinya, maka jangan buru-buru langsung beralih ke mesin pencari. Anda dapat menyorot kata yang diinginkan, lalu masuk menu konteks pilih "Tampilkan petunjuk". Setelah itu, panel dengan tombol akan muncul di bawah, memungkinkan Anda untuk segera mengirimkan permintaan ke aplikasi atau layanan yang diinginkan.
Apa fungsinya versi seluler Apakah Anda paling menyukai Google Chrome?
Itu terjadi pada semua orang. Anda membuka halaman yang panjang dan mulai membaca tanpa menunggu selesai mengunduh. Saat ini, gambar akhirnya dimuat dan disematkan ke halaman, akibatnya Anda kehilangan tempat yang Anda tinggalkan.
Untuk mencegah hal ini terjadi lagi, buka halaman pengaturan layanan Chrome seluler yang terletak di chrome://flag. Selanjutnya, Anda perlu menemukan opsi "Sesuaikan gulir" dan setel ke posisi "Diaktifkan".
2. Penghematan lalu lintas
Browser Chrome memiliki fungsi paling berguna untuk menghemat lalu lintas seluler, yang karena alasan tertentu hanya sedikit orang yang menggunakannya. Ini memungkinkan Anda untuk secara signifikan mengurangi biaya karena kompresi data. Tampilan halaman web praktis tidak berubah, namun bobotnya menjadi beberapa kali lebih kecil.
Anda dapat mengaktifkan kompresi lalu lintas langsung di pengaturan program. Jangan lupa untuk mengecek kembali ke sini dari waktu ke waktu untuk melihat hasil dari fitur ini.
3. Membuka tab desktop di ponsel
Jika Anda menggunakan browser Chrome di semua perangkat Anda, Anda mungkin tahu bahwa data disinkronkan di antara perangkat tersebut. Oleh karena itu, sama sekali tidak perlu mem-bookmark halaman jika Anda mulai membacanya di komputer dan tiba-tiba Anda harus pergi ke suatu tempat. Anda cukup membuka bagian "Tab Terbaru" di browser seluler Anda di jalan, di mana Anda akan menemukan tautan ke semua halaman yang Anda lihat baru-baru ini, terlepas dari komputer yang Anda gunakan.
4. Simpan halaman untuk dibaca secara offline
Ada banyak program untuk membaca tertunda, tetapi tidak selalu diperlukan, karena Chrome sendiri dapat menyimpan halaman untuk dibaca tanpa terhubung ke Web. Secara default, fitur ini dinonaktifkan, tetapi ini dapat diperbaiki dengan mudah.
Anda dapat mengaktifkan fitur ini di laman setelan percobaan Google Chrome. Masukkan di bilah alamat chrome://flag, lalu temukan dan aktifkan opsi chrome://flags/#offline-bookmarks.
5. Menggunakan petunjuk pada halaman
Jika saat membaca artikel Anda menemukan istilah yang perlu diperjelas artinya, maka jangan buru-buru untuk segera beralih ke mesin pencari. Anda dapat menyorot kata yang Anda inginkan, lalu memilih Tampilkan Saran dari menu konteks. Setelah itu, panel dengan tombol akan muncul di bawah, memungkinkan Anda untuk segera mengirimkan permintaan ke aplikasi atau layanan yang diinginkan.
Dan fitur Google Chrome versi seluler apa yang paling Anda sukai?
Untuk menguji aplikasi yang sedang Anda kembangkan, Anda perlu menambahkannya ke browser Anda. Untuk melakukannya, pada halaman chrome://extensions, Anda perlu mencentang kotak "Mode pengembang". Setelah itu, dimungkinkan untuk menambahkan ekstensi atau aplikasi Anda.manifest.json
Kode untuk aplikasi Chrome apa pun, seperti ekstensi apa pun, dimulai dengan file manifest.json. Ini menjelaskan semua meta-informasi aplikasi. Inilah manifes editor secara keseluruhan:( "nama": "Teks Sederhana", "deskripsi": "Editor teks yang sangat sederhana (contoh aplikasi Chrome)", "versi": "0.1", "ikon": ( "48": "icon/48.png ", "128": "icon/128.png" ), "manifest_version": 2, "minimum_chrome_version": "31.0", "offline_enabled": true, "app": ( "background": ( "scripts": [ "js/background.js"] ) ), "izin": [ ("fileSystem": ["write"]) ], "file_handlers": ( "text": ( "title": "Simple Text", "types ": ["aplikasi/javascript", "aplikasi/json", "aplikasi/xml", "teks/*"], "ekstensi": ["c", "cc", "cpp", "css", " h", "hs", "html", "js", "json", "md", "py", "textile", "txt", "xml", "yaml"] ) ) )
Mari kita analisis bidang yang bertemu di sini. Dengan nama dan deskripsi, semuanya jelas. Versi adalah bidang yang wajib diisi - Toko Web Chrome akan memintanya untuk berubah saat Anda mengunggah pembaruan ke aplikasi.
var entriToLoad = null; function init(launchData) ( var fileEntry = null if (launchData && launchData["items"] && launchData["items"].length > 0) ( entryToLoad = launchData["items"]["entry"] ) var options = ( frame: "chrome", minWidth: 400, minHeight: 400, width: 700, height: 700 ); chrome.app.window.create("index.html", opsi); ) chrome.app.runtime.onLaunched. addListener(init);
Halaman latar belakang berfungsi latar belakang terlepas dari jendela aplikasi. Sebagian besar waktu itu tidak dimuat ke dalam memori. Ketika sistem dinyalakan, kodenya dijalankan dan dapat mengatur event handler untuk event tertentu, yang paling umum adalah onLaunched. Saat penangan disetel, halaman latar belakang biasanya diturunkan dari memori dan hanya diaktifkan kembali jika salah satu peristiwa langganannya telah terjadi.
Saat pengguna mengklik ikon aplikasi, atau membuka file di dalamnya, peristiwa onLaunched diaktifkan di halaman latar belakang. Itu diteruskan parameter panggilan, khususnya, file yang harus dibuka aplikasi. Kode entryToLoad = launchData["items"]["entry"] menyimpan file yang diteruskan ke aplikasi dalam variabel lokal, dari mana kode editor akan mengambilnya. Acara onLaunched juga bisa datang saat aplikasi sudah terbuka. Dalam hal ini, kode di halaman latar belakang dapat memutuskan sendiri apakah akan membuka jendela baru atau melakukan beberapa tindakan di jendela yang sudah terbuka.
Demi kelengkapan, inilah CSS-nya:
Body ( margin: 0; ) header ( background-color: #CCC; border-bottom: 1px solid #777; -webkit-box-align: center; -webkit-box-orient: horizontal; -webkit-box-pack: left; display: -webkit-box; height: 48px; padding: 0px 12px 0px 12px; ) button ( margin: 8px; ) textarea ( border: none; -webkit-box-sizing: border-box; font-family: monospace ; padding: 4px; position: absolute; top: 48px; bottom: 0px; left: 0px; right: 0px; width: 100%; ) textarea:focus ( outline: none !important; )
Kode inti: bekerja dengan file
Karena dalam contoh kami, kami akan membatasi diri pada kumpulan fitur minimum untuk kesederhanaan, kode utama editor akan dikhususkan hampir secara eksklusif untuk bekerja dengan file. Untuk melakukan ini, beberapa API digunakan, beberapa di antaranya sedang menuju standardisasi W3C. File API dan antarmuka terkait adalah topik besar yang memerlukan artikel terpisah. Saya merekomendasikannya sebagai pengantar yang bagus.Jadi mari kita uraikan kode di js/main.js . Saya akan memberikan potongannya, kode lengkapnya ada di Github.
Fungsi init(entri) ( $("#open").klik(buka); $("#save").klik(simpan); $("#saveas").klik(saveAs); chrome.runtime.getBackgroundPage (fungsi(bg) ( if (bg.entryToLoad) loadEntry(bg.entryToLoad); )); ) $(document).ready(init);
Tugas fungsi inisialisasi adalah menambahkan penangan ke tombol dan membuka file dari halaman latar belakang. Konteks halaman latar belakang diperoleh secara asinkron dari jendela utama menggunakan chrome.runtime.getBackgroundPage .
Penangan klik tombol:
var currentEntry = null; fungsi open() ( chrome.fileSystem.chooseEntry(("type": "openWritableFile"), loadEntry); ) fungsi save() ( if (currentEntry) ( saveToEntry(currentEntry); ) else ( saveAs(); ) ) fungsi saveAs() ( chrome.fileSystem.chooseEntry(("type": "saveFile"), saveToEntry); )
Kami akan menyimpan FileEntry saat ini dalam variabel global currentEntry.
Satu-satunya fitur khusus dalam kode di atas adalah metode chrome.fileSystem.chooseEntry. Dengan menggunakan metode ini, jendela pemilihan file akan terbuka (berbeda pada setiap sistem). Seperti semua fungsi lain untuk bekerja dengan berkas sistem, metode ini asinkron dan menerima panggilan balik untuk terus bekerja (dalam kasus kami, fungsi loadEntry dan saveToEntry dijelaskan di bawah).
Membaca file:
Fungsi setTitle() ( chrome.fileSystem.getDisplayPath(currentEntry, function(path) ( document.title = path + " - Teks Sederhana"; )); ) fungsi loadEntry(entri) ( currentEntry = entri; setTitle(); entri. file(readFile); ) fungsi readFile(file) ( var reader = new FileReader(); reader.onloadend = function(e) ( $("textarea").val(this.result); ); reader.readAsText(file ); )
Dalam fungsi setTitle() , kami mengubah judul jendela untuk menunjukkan jalur ke file saat ini. Bagaimana judul ini ditampilkan tergantung pada sistem. Di Chrome OS, itu tidak muncul sama sekali. chrome.fileSystem.getDisplayPath adalah cara paling tepat untuk mendapatkan jalur file yang sesuai untuk ditampilkan kepada pengguna. Representasi lain dari jalur tersedia melalui entry.fullPath .
File API memiliki dua objek berbeda yang menjelaskan sebuah file: FileEntry dan File. Secara kasar, FileEntry mewakili jalur ke file, dan File mewakili data yang ada di dalamnya. Oleh karena itu, untuk membaca file, Anda perlu mendapatkan objek File melalui Entry. Ini dicapai dengan menggunakan metode entry.file() asinkron.
Kode untuk contoh ini disimpan sesingkat mungkin agar sesuai dengan format artikel. Jika Anda ingin melihat contoh yang lebih mendetail tentang bagaimana fitur Chrome API tertentu digunakan, ada banyak contoh aplikasi Chrome yang dipublikasikan di GitHub. Dokumentasi resmi untuk semua antarmuka pemrograman ada di developer.chrome.com. Tempat utama untuk mendapatkan jawaban atas pertanyaan khusus tentang pemrograman aplikasi Chrome adalah .
Google Chrome sangat menyederhanakan banyak hal, seperti membuat aplikasi Anda sendiri. Ya, Anda dapat menyiapkan aplikasi Anda untuk publikasi dalam 5 menit, atau bahkan kurang.
Kita akan butuh:
- Google Chrome;
- situs atau blog Anda, yang telah ditambahkan ke Alat Webmaster Google dan telah diverifikasi;
- ukuran ikon 128x128 piksel;
- tangkapan layar situs Anda berukuran 1280x800 atau 640x400 piksel;
- tangkapan layar aplikasi 440×280 piksel;
- ID Google Analytics (dalam format UA-XXXXXX-YY) - opsional;
- kartu dengan $5 di akun.
Kami membuat aplikasi
Kita akan mulai dengan membuat file manifest.json. Contoh ini menunjukkan manifes situs NetRival. Buka editor teks apa saja, salin kode ini ke dalamnya dan ubah untuk aplikasi Anda:
( "name": "NetRival - Blog Teknologi", "short_name": "NetRival", "description": "NetRival adalah Blog yang Berfokus pada Teknologi Pribadi, Tutorial Petunjuk, Gadget, dan Telekomunikasi", "versi": "0.1 ", "manifest_version": 2, "ikon": ( "128": "icon_128.png" ), "aplikasi": ( "url": [ "http://www.netrival.com/#utm_source=google_chrome&utm_medium= chrome_app&utm_campaign=google_chrome_app" ], "launch": ( "web_url": "http://www.netrival.com/#utm_source=google_chrome&utm_medium=chrome_app&utm_campaign=google_chrome_app" ) ) )
Minimal, Anda perlu mengubah bidang "nama" , "nama_pendek", serta deskripsi dan tautan. Ganti nama ikon aplikasi Anda menjadi icon_128.png . Buat direktori baru, letakkan manifest.json dan ikonnya sendiri di sana. Sekarang zip direktori ke dalam file zip. Anda akan membutuhkannya nanti.
Memuat aplikasi di Google Chrome
Buka browser Anda, buka chrome://extensions/ dan pastikan Anda mencentang kotak "Mode Pengembang". Itu terletak di halaman di kanan atas (ini bisa dilihat pada gambar). Kemudian klik tombol "Load unpacked extensions" dan pilih folder tempat manifest.json dan ikon ekstensi Anda berada. Anda tidak perlu mengunduh arsip zip, Google Chrome akan mengunduh file manifest.json secara otomatis dari direktori yang ditentukan, dalam hal ini dari E:\NetRival_Chrome_App (disorot di tangkapan layar).
Memeriksa ekstensi yang dibuat
Plugin sudah berfungsi. Untuk melihatnya, buka chrome://apps/ dan Anda akan melihat sesuatu yang tampak seperti tangkapan layar (mengeklik ikon akan membawa Anda ke situs web atau blog Anda).
Kami menempatkan ekstensi di direktori resmi
Sekarang Anda dapat menempatkan ekstensi kami di Google Chrome Store, tempat siapa pun dapat mengunduhnya. Anda perlu mengunduh manifest.json dan ikonnya dalam file zip (kami sudah melakukannya). Tetapi pertama-tama Anda harus membayar biaya pendaftaran $5 yang akan memberi Anda akses ke Konsol Pengembang Google Chrome (dengan $5 ini Anda dapat mencantumkan 20 aplikasi, ekstensi, atau tema Chrome apa pun di toko).
Buka https://chrome.google.com/webstore/developer/dashboard dan bayar $5. Setelah pembayaran, klik tombol "Tambahkan produk baru" dan pilih file zip dengan ekstensi. Setelah itu, Anda perlu mengisi formulir aplikasi singkat dan menambahkan tangkapan layar.
Banyak artikel telah dipublikasikan di Habré tentang membuat ekstensi untuk Chrome, tetapi topik pengembangan aplikasi Chrome (alias aplikasi Chrome) lebih jarang disinggung. Baru-baru ini, ini menjadi lebih relevan karena penyebaran perangkat di ChromeOS. Selain itu, infrastruktur untuk membuat aplikasi Chrome menjadi lebih stabil dan lebih mudah digunakan. Pada artikel ini saya akan mencoba menjawab pertanyaan utama: mengapa menulis aplikasi untuk Chrome, apa perbedaannya dari ekstensi, layanan web, aplikasi desktop, dll., serta bagaimana aplikasi dikembangkan dan batasan apa yang diberlakukan padanya. Jika topik ini membangkitkan minat, artikel tersebut akan memiliki kelanjutan yang mencakup masalah yang lebih spesifik.
Untuk apa
Fungsionalitas yang sama dapat diimplementasikan menggunakan teknologi yang sama sekali berbeda: Anda dapat menulis program untuk Windows, membuat layanan web, aplikasi seluler untuk Android dan/atau iOS, dll. Apa yang mungkin memotivasi penulis untuk memilih aplikasi Chrome?- Bekerja di ChromeOS. Saat ini, aplikasi Chrome adalah cara utama untuk membawa program Anda ke pengguna Chromebook. Apakah itu sepadan? Chromebook masih lebih kecil daripada, katakanlah, komputer Windows, tetapi trennya sedang berubah. Tahun lalu, Chromebook terjual 5 kali lebih banyak di AS daripada Macbook.
- Aplikasi Chrome berjalan di Windows, Linux, dan OS X tanpa usaha ekstra. Tentu saja, ada banyak cara lain untuk menjadikan aplikasi portabel, tetapi kebanyakan cara tersebut ternyata jauh lebih mahal.
- Baru-baru ini, dimungkinkan untuk mem-porting aplikasi Chrome ke Android dan iOS.
- Di sebagian besar sistem, aplikasi Chrome terlihat seperti program biasa bagi pengguna. Mereka diluncurkan dari menu mulai, membuka jendela biasa tanpa kontrol browser, dapat digunakan sebagai program default untuk membuka file, dan berperilaku sebaliknya
sebagai program lengkap.
Aplikasi terpaket dan aplikasi yang dihosting
Semua orang telah melihat ikon Pencarian, Gmail, Google Drive dalam daftar aplikasi yang dipasang secara default di Chrome. Jika Anda mengklik salah satunya, tidak ada yang terlihat seperti aplikasi yang terbuka. Sebaliknya, pengguna hanya ditransfer ke halaman layanan yang sesuai.Intinya ada dua hal mendasar jenis yang berbeda aplikasi: aplikasi yang dihosting dan aplikasi terpaket. Sayangnya, tidak ada istilah Rusia yang ditetapkan untuk mereka. Pencarian, Gmail, dll. Dihosting. Aplikasi semacam itu terdiri dari file manifest.json dengan URL dan pengaturan keamanan, serta sebuah ikon. Faktanya, aplikasi yang dihosting adalah tab khusus untuk layanan online.
Tidak seperti yang dihosting, dalam kasus aplikasi terpaket, semua file yang diperlukan agar aplikasi dapat berfungsi disimpan di komputer pengguna. Aplikasi semacam itu cenderung bekerja lebih baik secara offline, dapat mengelola jendelanya sendiri, dan umumnya memiliki akses ke lebih banyak API Chrome.
Di masa mendatang, kita akan berbicara tentang aplikasi terpaket.
Aplikasi dan ekstensi
Dari sudut pandang pengguna, ekstensi dan aplikasi melakukan fungsi yang sangat berbeda: ekstensi mengubah cara dia menggunakan browser, sementara aplikasi melakukan beberapa tugas yang terpisah dari browser. Ekstensi mengubah konten halaman dan mungkin menambahkan beberapa tombol, dan aplikasi biasanya berjalan di jendelanya sendiri.Pada saat yang sama, ekstensi dan aplikasi dari dalam sangat mirip. Keduanya diinstal dari Toko Web Chrome dan merupakan file .crx yang merupakan arsip zip. Properti ekstensi/aplikasi dijelaskan dalam file manifest.json, dan UI di dalamnya ditulis dalam HTML5. Banyak API Chrome tersedia untuk ekstensi dan aplikasi.
Pada saat yang sama, ada perbedaan yang signifikan. Aplikasi dapat menggunakan fitur yang tidak tersedia untuk ekstensi:
- mengelola jendela Anda
- bekerja langsung dengan file di komputer pengguna,
- ditugaskan oleh program untuk membuka jenis file tertentu oleh sistem operasi,
- buka koneksi TCP dan UDP (ini, misalnya, digunakan oleh klien SSH untuk Chrome),
- bekerja dengan USB.
Fitur Pengembangan
Saya telah menyebutkan bahwa dari sudut pandang pengguna, aplikasi Chrome tidak jauh berbeda dengan program biasa. Pada saat yang sama, dari sudut pandang seorang programmer, mereka diatur dengan sangat berbeda. Beberapa operasi lebih mudah, beberapa lebih sulit.Banyak antarmuka yang digunakan oleh aplikasi merupakan standar yang diterima secara umum dan dikenal baik oleh semua pengembang web. Untuk UI, HTML dan CSS digunakan, untuk bekerja dengan HTTP - XMLHTTPRequest, dll.
Aplikasi Chrome mengimplementasikan sinkronisasi antara contoh aplikasi di komputer yang berbeda dengan sedikit atau tanpa usaha tambahan. Bekerja dengan file, seperti semua antarmuka lain yang bergantung pada sumber daya eksternal, bersifat asinkron. Di satu sisi, ini agak memperumit kode untuk operasi yang sesuai, di sisi lain, ini menjamin daya tanggap antarmuka dan mencegah pemblokiran.
Fitur lain dari Chrome adalah manajemen keamanan. Di Chrome, pengaturannya berbeda dari yang klasik. sistem operasi dan lebih seperti sistem keamanan di Android. Pengembang Chrome selalu mendekati penambahan antarmuka pemrograman secara konservatif. Saat merancang sistem, lebih mudah untuk melonggarkan pembatasan keamanan dari waktu ke waktu daripada membuatnya lebih ketat. Akibatnya, misalnya, aplikasi tidak memiliki akses tak terbatas ke sistem file. Mereka terutama bekerja dengan file yang dimiliki oleh aplikasi atau dibuka secara eksplisit oleh pengguna.
Apa yang bisa Anda gunakan selain HTML + JavaScript
Bahasa pemrograman utama untuk Chrome tentu saja adalah JavaScript. Tetapi ini tidak berarti bahwa semua kode Anda perlu ditulis ulang di dalamnya. Ada beberapa solusi yang memungkinkan Anda menggunakan kode dalam bahasa pemrograman lain di aplikasi Chrome Anda. Diantara mereka:- klien asli. Kode dikompilasi untuk memungkinkan eksekusi prosesor dan verifikasi browser. Kode NaCl menggunakan sekumpulan API Pepper yang cukup kaya untuk berkomunikasi dengan dunia luar, termasuk, khususnya, bekerja dengan sistem file, OpenGL, dan suara.
- Emscripten Jika NaCl tidak bekerja untuk Anda, Anda dapat mengkompilasi kode C++ langsung ke JavaScript. Di browser modern, JavaScript yang dihasilkan hanya beberapa kali lebih lambat dibandingkan jika dikompilasi ke kode asli. Keuntungannya - kompatibilitas dengan semua antarmuka yang tersedia dari JavaScript.
Contoh
Sebagai penutup, saya akan memberikan contoh aplikasi yang telah saya kerjakan sendiri (dan
Bekerja). Ini adalah editor teks. Kode editor tersedia di github. Untuk pengeditan aktual, pustaka CodeMirror digunakan. Aplikasi mengimplementasikan pekerjaan dengan file, jendela, pengaturan penyimpanan, dan fungsi lain yang diperlukan.
