The final product for this tutorial is in Commit 4. If this is your first time writing a browser extension, congratulations, and I hope you want to go build some more! I definitely recommend checking out the API index for Google Chrome to see the many other kinds of APIs your browser extensions can work with! 🎊 This is because "I'll leave that, and brainstorming other ideas on improving user experience, as a challenge to do I encourage you to keep experimenting with this app and the chrome.tabs API, but for now, we've got a sweet MVP (minimum viable product)! Though one thing you might notice is a little off is that if, say, and are in your top bar, Twitter will come first in the rearranged tabs, even though Google alphabetically comes before Twitter. Reload the extension just one more time in chrome://extensions, click its icon, and your tabs should all now be rearranged in alphabetical order by URL! If you are following along in this tutorial, make a folder titled tab-sorter, put a folder under it called app, and inside the app folder, add the file manifest.json with this
#CHROME EXTENSION SET ICON CODE#
A manifest is a JSON file, and it's sort of like "the blueprint of the app", telling you things like what picture to use as your extension's icon, which code the extension runs, and which parts of Chrome the app needs access to, such as web history or bookmarks. The first thing every browser extension needs is a manifest. Extensions should also provide a 48x48 icon, which is used in the extensions management page (chrome://extensions). You should always provide a 128x128 icon it's used during installation and by the Chrome Web Store. It is geared toward people who are getting started with writing browser extensions. One or more icons that represent the extension, app, or theme. This tutorial assumes understanding of the basics of JavaScript, and it's recommended to know about callback functions and the method.
That way, if you end up with a whole lot of tabs open from a bunch of different websites, you can use this extension to put all the tabs from the same site together in Chrome's top bar so they're easier to navigate.
What I really like about them is that all you need in order to get started building extensions is the stuff you make webpages with, and then by throwing in browser APIs, you can make really useful apps!įor this tutorial, we're going to make a Chrome extension that rearranges the tabs in your browser so they're in order by URL. In fact, they were my own on-ramp to frontend web development. Browser extensions are a cool way to build on top of the basic parts of frontend web development: HTML, CSS, and JavaScript.
0 kommentar(er)
