Cara Membuat dan Menerbitkan Ekstensi Chrome dalam 20 menit

Pernah bertanya-tanya bagaimana rasanya membuat ekstensi Chrome? Nah, saya di sini untuk memberi tahu Anda betapa mudahnya itu. Ikuti langkah-langkah ini dan ide Anda akan menjadi kenyataan dan Anda akan dapat menerbitkan ekstensi yang sebenarnya di Toko Web Chrome dalam waktu singkat.

Apa itu ekstensi Chrome?

Ekstensi Chrome memungkinkan Anda menambahkan fungsionalitas ke browser web Chrome tanpa mempelajari kode asli secara mendalam. Itu luar biasa karena Anda dapat membuat ekstensi baru untuk Chrome dengan teknologi inti yang sangat dikenal oleh pengembang web - HTML, CSS, dan JavaScript. Jika Anda pernah membuat halaman web, Anda akan dapat membuat ekstensi lebih cepat daripada saat makan siang. Satu-satunya hal yang perlu Anda pelajari adalah cara menambahkan beberapa fungsi ke Chrome melalui beberapa API JavaScript yang diekspos oleh Chrome.

Jika Anda belum berpengalaman dalam membuat halaman web, saya sarankan Anda menyelami beberapa sumber daya gratis untuk mempelajari cara membuat kode, seperti freeCodeCamp.

Apa yang ingin Anda bangun?

Sebelum memulai, Anda harus memiliki gambaran kasar tentang apa yang ingin Anda bangun. Tidak perlu ada ide terobosan baru, kita bisa melakukannya untuk bersenang-senang. Dalam artikel ini, saya akan memberi tahu Anda tentang ide saya dan bagaimana saya menerapkannya ke dalam ekstensi Chrome.

Rencana

Saya telah menggunakan ekstensi Chrome Unsplash untuk sementara waktu yang memungkinkan saya memiliki gambar latar belakang Unsplash yang bagus di tab default saya. Saya kemudian menggantinya dengan ekstensi Chrome Muzli yang mengubah tab default menjadi umpan berita desain dan bidikan dari seluruh web.

Mari gunakan kedua ekstensi ini sebagai inspirasi untuk membangun sesuatu yang baru, tapi kali ini untuk pecinta film. Ide saya adalah menampilkan gambar latar belakang acak dari sebuah film setiap kali Anda membuka tab baru. Saat digulir, itu akan berubah menjadi umpan bagus dari film dan acara TV populer. Jadi mari kita mulai.

Langkah 1: Menyiapkan semuanya

Langkah pertama adalah membuat file manifes bernama manifest.json. Ini adalah file metadata dalam format JSON yang berisi properti seperti nama ekstensi, deskripsi, nomor versi, dan sebagainya. Dalam file ini kami memberi tahu Chrome apa yang akan dilakukan ekstensi, dan izin apa yang diperlukannya.

Untuk ekstensi film kita perlu memiliki izin untuk mengontrol activeTab , sehingga manifest.jsonfile kita terlihat seperti ini:

{ “manifest_version”: 2, “name”: “RaterFox”, “description”: “The most popular movies and TV shows in your default tab. Includes ratings, summaries and the ability to watch trailers.”, “version”: “1”, “author”: “Jake Prins”,
"browser_action": { "default_icon": "tab-icon.png", “default_title”: “Have a good day” },
“chrome_url_overrides” : { “newtab”: “newtab.html”},
 “permissions”: [“activeTab”]}

Seperti yang Anda lihat, kami katakan itu newtab.htmlakan menjadi file HTML yang harus dirender setiap kali tab baru dibuka. Untuk melakukan ini, kita perlu memiliki izin untuk mengontrol activeTab , jadi ketika pengguna mencoba menginstal ekstensi, mereka akan diperingatkan dengan semua izin yang diperlukan ekstensi.

Hal menarik lainnya di dalamnya manifest.jsonadalah tindakan browser. Dalam contoh ini kami menggunakannya untuk menyetel judul, tetapi ada lebih banyak opsi. Misalnya, untuk menampilkan munculan setiap kali Anda mengeklik ikon aplikasi di dalam bilah alamat, yang harus Anda lakukan adalah seperti ini:

“browser_action”: { “default_popup”: “popup.html”, },

Sekarang, popup.htmlakan ditampilkan di dalam jendela popup yang dibuat sebagai tanggapan atas klik pengguna pada tindakan browser. Ini adalah file HTML standar sehingga memberi Anda kebebasan mengatur apa yang ditampilkan popup. Taruh saja beberapa keajaiban Anda di dalam file bernama popup.html.

Langkah 2: Uji apakah berhasil

Langkah selanjutnya adalah membuat newtab.htmlfile dan memasukkan ' Hello world':

  Test   

Hello World!

Untuk menguji apakah itu berfungsi, kunjungi chrome://extensionsdi browser Anda dan pastikan bahwa kotak centang Mode pengembang di sudut kanan atas dicentang.

Klik Muat ekstensi yang belum dikemas dan pilih direktori tempat file ekstensi Anda berada. Jika extensionnya valid, maka extension tersebut akan langsung aktif sehingga Anda dapat membuka tab baru untuk melihat 'Hello world' Anda.

Langkah 3: Membuat segalanya menyenangkan

Sekarang setelah fitur pertama berfungsi, sekarang saatnya membuatnya bagus. Kita cukup mengatur gaya tab baru kita dengan membuat main.cssfile di direktori ekstensi kita dan memuatnya di newtab.htmlfile kita . Hal yang sama berlaku saat menyertakan file JavaScript untuk fungsi aktif apa pun yang ingin Anda sertakan. Dengan asumsi bahwa Anda telah membuat halaman web sebelumnya, Anda sekarang dapat menggunakan sihir Anda untuk menunjukkan kepada pengguna Anda apa pun yang Anda inginkan.

Menyelesaikan rencananya

Yang saya butuhkan lebih lanjut untuk menyelesaikan ekstensi film adalah HTML, CSS, dan JavaScript, jadi menurut saya tidak relevan untuk mendalami kode, tetapi saya ingin membahasnya dengan cepat.

Inilah yang saya lakukan:

Untuk ide saya, saya membutuhkan beberapa gambar latar belakang yang bagus, jadi dalam file JavaScript saya menggunakan API TMDb untuk mengambil beberapa film populer, mengambil gambar latar belakang dan meletakkannya dalam sebuah array. Setiap kali halaman memuatnya sekarang secara acak mengambil satu gambar dari larik itu dan menetapkannya sebagai latar belakang halaman. Untuk membuat halaman ini sedikit lebih menarik, saya juga menambahkan tanggal sekarang di pojok kanan atas. Dan untuk informasi lebih lanjut, ini memungkinkan pengguna untuk mengklik latar belakang yang mengarah untuk mengunjungi halaman IMDb film.

Saya mengganti layar dengan umpan film populer yang bagus saat pengguna mencoba menggulir ke bawah. Saya menggunakan API yang sama untuk membuat kartu film dengan gambar, judul, peringkat, dan jumlah suara. Kemudian, saat mengklik salah satu kartu itu, itu menunjukkan ringkasan dengan tombol untuk menonton cuplikan.

Hasil

Now with that little manifest.json file and just some HTML, CSS and JavaScript, every new tab that you open looks a lot more interesting:

Step 4: Publish your extension

When your first Chrome extension looks nice and works like it should, it’s time to publish it to the Chrome Store. Simply follow this link to go to your Chrome Web Store dashboard (you’ll be asked to sign in to your Google account if you’re not). Then click the Add new item button, accept the terms and you will go to the page where you can upload your extension. Now compress the folder that contains your project and upload that ZIP file.

After successfully uploading your file, you will see a form in which you should add some information about your extension. You can add an icon, a detailed description, upload some screenshots, and so on.

Make sure you provide some nice images to show off your project. The store can use these images to promote your groundbreaking project. The more images you provide, the more prominently your extension will be featured. You can preview how your extension looks inside the web store by clicking the Preview changes button. When you’re happy with the result, hit Publish changesand that’s it, your done!

Now go to the Chrome Web Store and search for your extension by its title (It might take some time before it’s up there). If you’re interested, you can find mine here.

The only thing left to do is get some users. So you might want to share a post about your life changing Chrome extension on social media. Tell your friends to check it out. Add it to ProductHunt. And don’t forget to share your project here in the comments. I’m curious to see what you came up with!

Conclusion

As a web developer, it’s very easy to create a Chrome extension in a short amount of time. All you need is some HTML, CSS, JavaScript and a basic knowledge of how to add functionality through some of the JavaScript APIs that Chrome exposes. Your initial setup can be published inside the Chrome Web Store within just 20 minutes. Building an extension that’s new, worthwhile or looks nice will take some more time. But it’s all up to you!

Use your creativity to come up with something interesting and if you ever get stuck, the excellent Chrome extension documentation can probably help you out.

So what are you waiting for? It’s time to start working on your own Chrome extension and turning your idea into reality.

Don’t forget to share your project in the comments and hit the clap button if this article was any useful to you. If you got some time and want to be a hero, give my extension a positive rating. That would be highly appreciated!

Got questions or feedback? Let me know in the comments!

Thanks for reading! Hope the information was helpfull. Follow me on Medium for more tech related articles or on Twitter and Instagram @jakeprins_nl.