Customize your browser with Chrome Extensions

Chrome for Developers · Beginner ·🌐 Frontend Engineering ·1y ago

Key Takeaways

The video demonstrates how to customize Chrome with extensions, including tab management, search, new tab page personalization, bookmark organization, and web development enhancements, using various Chrome extension APIs such as Chrome Tab Groups, Chrome Omnibox, and Chrome Dev Tools APIs.

Full Transcript

from the literal day it was born the web was meant to be customized decades later that hasn't changed one bit with web extensions you can make Chrome the browser that works just for you we all know the struggle too many tabs a cluttered toolbar a new tab page that's anything but inspiring but fear not fellow power users because extensions can help us tame the browser beast and create a truly personalized experience from top to bottom [Music] let's start at that very top it's a site that can quickly give me anxiety an overflowing tab count there's another of extensions and extension apis that you can build on top of like the Chrome tab groups extension API that let you take the already amazing tab sorting built into Chrome and customize it to be specific for your needs saving precious space and mental energy right below that tab bar is arguably the most important part of chrome the omnibox it's not just a place to type in URLs it's a powerful and extensible input that you can build on with your extension the Chrome omnibox API lets you create your own keyword shortcuts to act as a kind of quick launcher you can query backends as you type and populate live search results with the results you can make your own dictionary where you query a online dictionary just type in the word dict and you'll get all the results directly in line continuing down the browser let's revamp that boring new tab page with extensions you can completely override a number of pages built into Chrome with the Chrome URL overrides value in the Manifest Json file it lets you update things like the new tap page with any HTML you want whether it's a Pomodoro Timer an event calendar or inspirational quotes you can make a nice clean blank page even whatever you want you can make it your own extensions like momentum and new tab redirect you can replace the default new tab page with beautiful dashboards featuring to-do lists and even quick access launchers to your favorite websites but new tab page isn't the only option for Chrome URL overrides you can also create your own history and bookmark page viewers you can even use the Chrome bookmarks API to have deep detailed access to Chrome bookmarks allowing you to automatically add or remove bookmarks as you see fit being able to automatically sort and organize bookmarks as they come in across all my devices helps me keep track of everything I want to remember in Chrome extensions like raindrop IO and Evernote Web Clipper offer powerful bookmarking features that let you organize your bookmarks into folders adding tags or clip entire web page Pages for later references and for those who crave even more screen real estate extensions built with the Chrome side panel API let you have a secondary window side by side with your main one but we're not just web users right we're web developers and this is yet another place that extensions really shine extensions let you extend Chrome's absolutely essential Dev tools to speed up your workflow extensions can create their own panels directly in Dev tools and hook into all sorts of browser life cycle events this is possible because extensions have nearly full access to the incredibly powerful Chrome Dev tools protocol that's the back-end RPC framework that powers all of Dev tools so any network performance or really just any other event or information you see in Dev tools you can build an extension to read and visualize that data exactly how you want it's why angular react preact and view are just a few of the mini libraries that have their own custom Dev tools experience built on the Chrome Dev tools API as you can see the possibility and customizations are really endless with the right extension and extension apis you can transform Chrome into a truly personalized and Powerful tool those extension apis let you build your own extensions to solve any problem or enhance your workflow in truly unique ways suited just to you so explore the Chrome web store experiment with the existing extensions or Unleash Your creativity and build your own until next time happy customizing [Music]

Original Description

Chrome extensions empower you to customize your browser and boost your productivity. In this episode, we explore powerful extensions that: - Master tab management - Supercharge your search - Personalize your new tab page - Automate bookmark organization - Enhance your web development workflow Ready to take control of your browser? Watch now and discover the endless possibilities of Chrome extensions! Chapters: 0:00 - Introduction 0:38 - Taming Tabs 0:51 - Outstanding Omniboxes 1:20 - Creative Customizations 2:05 - Beautiful Bookmarks 2:41 - Delightful DevTools Resources: chrome.tabGroups API → https://goo.gle/3CDjpDl chrome.omnibox API → https://goo.gle/3Q0cOG2 Chrome extension override pages → https://goo.gle/4hC7O68 Momentum: New Tab Page Extension → https://goo.gle/4go0j1N New Tab Redirect: New Tab Page Extension → https://goo.gle/4hyldMU chrome.bookmarks API → https://goo.gle/42BQUAB Raindrop.io: Bookmarks Extension → https://goo.gle/4hcZ72x Evernote Web Clipper: Bookmarks Extension → https://goo.gle/3WHitVe Extending Chrome DevTools → https://goo.gle/4hkg5MB Angular DevTools: Devtools Extension → https://goo.gle/413AXRp React Developer Tools: Devtools Extension → https://goo.gle/3CAaIto Preact Developer Tools: Devtools Extension → https://goo.gle/3Q3vIMs Vue.js devtools: Devtools Extension → https://goo.gle/3Q02tKr Watch more Chrome Extensions → https://goo.gle/Chrome-Ext Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs #ChromeForDevelopers #Chrome Speaker: Patrick Kettner Products Mentioned: Chrome Extensions, Chrome
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Chrome for Developers · Chrome for Developers · 0 of 60

← Previous Next →
1 Polymer Performance Patterns (The Polymer Summit 2015)
Polymer Performance Patterns (The Polymer Summit 2015)
Chrome for Developers
2 Polymer Power Tools (The Polymer Summit 2015)
Polymer Power Tools (The Polymer Summit 2015)
Chrome for Developers
3 Chrome Dev Summit 2014 – Chrome Case Studies
Chrome Dev Summit 2014 – Chrome Case Studies
Chrome for Developers
4 Web Directions Code 2015 round up
Web Directions Code 2015 round up
Chrome for Developers
5 Maintainable Code - HTTP203
Maintainable Code - HTTP203
Chrome for Developers
6 iron-ajax… wat?! -- Polycasts #26
iron-ajax… wat?! -- Polycasts #26
Chrome for Developers
7 The Guardian - Supercharged
The Guardian - Supercharged
Chrome for Developers
8 ES2015 (next version of JavaScript), Totally Tooling Tips (S2 Ep1)
ES2015 (next version of JavaScript), Totally Tooling Tips (S2 Ep1)
Chrome for Developers
9 #AskPolymer: Rob answers all the questions ever -- Polycasts #27
#AskPolymer: Rob answers all the questions ever -- Polycasts #27
Chrome for Developers
10 The Future of JavaScript - HTTP203
The Future of JavaScript - HTTP203
Chrome for Developers
11 Data Binding 101 -- Polycasts #28
Data Binding 101 -- Polycasts #28
Chrome for Developers
12 The Guardian part 2 - Supercharged
The Guardian part 2 - Supercharged
Chrome for Developers
13 The Future of Web Audio: with Chris Wilson and Chris Lowis
The Future of Web Audio: with Chris Wilson and Chris Lowis
Chrome for Developers
14 Chrome 46: New motion-path animations, client hints and service worker improvements
Chrome 46: New motion-path animations, client hints and service worker improvements
Chrome for Developers
15 Sublime Snippets, Totally Tooling Tips (S2 Ep2)
Sublime Snippets, Totally Tooling Tips (S2 Ep2)
Chrome for Developers
16 #AskPolymer: How do you make the show? -- Polycasts #29
#AskPolymer: How do you make the show? -- Polycasts #29
Chrome for Developers
17 Critical Path CSS, Totally Tooling Tips (S2 Mini Tip #1)
Critical Path CSS, Totally Tooling Tips (S2 Mini Tip #1)
Chrome for Developers
18 Binding to Objects -- Polycasts #30
Binding to Objects -- Polycasts #30
Chrome for Developers
19 Player FM - Supercharged
Player FM - Supercharged
Chrome for Developers
20 Where’s the Designer? #AskPolymer -- Polycasts #31
Where’s the Designer? #AskPolymer -- Polycasts #31
Chrome for Developers
21 Jake Beats Wikipedia - HTTP203
Jake Beats Wikipedia - HTTP203
Chrome for Developers
22 Supercharged Observers! -- Polycasts #32
Supercharged Observers! -- Polycasts #32
Chrome for Developers
23 Jai's Web blog - Supercharged
Jai's Web blog - Supercharged
Chrome for Developers
24 Windows Command-line Tooling, Totally Tooling Tips (S2, Ep4)
Windows Command-line Tooling, Totally Tooling Tips (S2, Ep4)
Chrome for Developers
25 What about internationalization? #AskPolymer -- Polycasts #33
What about internationalization? #AskPolymer -- Polycasts #33
Chrome for Developers
26 Developing for Billions (Chrome Dev Summit 2015)
Developing for Billions (Chrome Dev Summit 2015)
Chrome for Developers
27 Google+ Performance Improvement Comparison
Google+ Performance Improvement Comparison
Chrome for Developers
28 Deploying HTTPS: The Green Lock and Beyond (Chrome Dev Summit 2015)
Deploying HTTPS: The Green Lock and Beyond (Chrome Dev Summit 2015)
Chrome for Developers
29 Progressive Web Apps (Chrome Dev Summit 2015)
Progressive Web Apps (Chrome Dev Summit 2015)
Chrome for Developers
30 Instant Loading with Service Workers (Chrome Dev Summit 2015)
Instant Loading with Service Workers (Chrome Dev Summit 2015)
Chrome for Developers
31 Increase Engagement with Web Push Notifications (Chrome Dev Summit 2015)
Increase Engagement with Web Push Notifications (Chrome Dev Summit 2015)
Chrome for Developers
32 Engaging with the Real World: Web Bluetooth and Physical Web (Chrome Dev Summit 2015)
Engaging with the Real World: Web Bluetooth and Physical Web (Chrome Dev Summit 2015)
Chrome for Developers
33 Asking for Permission: respectful, opinionated UI (Chrome Dev Summit 2015)
Asking for Permission: respectful, opinionated UI (Chrome Dev Summit 2015)
Chrome for Developers
34 Polymer - State of the Union (Chrome Dev Summit 2015)
Polymer - State of the Union (Chrome Dev Summit 2015)
Chrome for Developers
35 Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
Chrome for Developers
36 Introduction to RAIL (Chrome Dev Summit 2015)
Introduction to RAIL (Chrome Dev Summit 2015)
Chrome for Developers
37 DevTools in 2015: Authoring to the max (Chrome Dev Summit 2015)
DevTools in 2015: Authoring to the max (Chrome Dev Summit 2015)
Chrome for Developers
38 RAIL in the real world (Chrome Dev Summit 2015)
RAIL in the real world (Chrome Dev Summit 2015)
Chrome for Developers
39 #ChromeDevSummit talks are up - W00T! -- Polycast #34
#ChromeDevSummit talks are up - W00T! -- Polycast #34
Chrome for Developers
40 V8 Performance from the Driver's Seat (Chrome Dev Summit 2015)
V8 Performance from the Driver's Seat (Chrome Dev Summit 2015)
Chrome for Developers
41 Quantify and improve real-world RAIL (Chrome Dev Summit 2015)
Quantify and improve real-world RAIL (Chrome Dev Summit 2015)
Chrome for Developers
42 Owning your performance: RAIL (Chrome Dev Summit 2015)
Owning your performance: RAIL (Chrome Dev Summit 2015)
Chrome for Developers
43 HTTP/2 101 (Chrome Dev Summit 2015)
HTTP/2 101 (Chrome Dev Summit 2015)
Chrome for Developers
44 Leadership Panel (Chrome Dev Summit 2015)
Leadership Panel (Chrome Dev Summit 2015)
Chrome for Developers
45 Build Processes, Totally Tooling Tips (S2, Ep 5)
Build Processes, Totally Tooling Tips (S2, Ep 5)
Chrome for Developers
46 Accessibility (Chrome Dev Summit 2015)
Accessibility (Chrome Dev Summit 2015)
Chrome for Developers
47 Binding to Arrays -- Polycasts #35
Binding to Arrays -- Polycasts #35
Chrome for Developers
48 HTTP2 - HTTP203
HTTP2 - HTTP203
Chrome for Developers
49 Chrome 47: Splash Screens, requestIdleCallback and better desktop notifications (New in Chrome)
Chrome 47: Splash Screens, requestIdleCallback and better desktop notifications (New in Chrome)
Chrome for Developers
50 Call For Submissions - Supercharged
Call For Submissions - Supercharged
Chrome for Developers
51 Cross Device Testing, Totally Tooling Tips (S2 Ep6)
Cross Device Testing, Totally Tooling Tips (S2 Ep6)
Chrome for Developers
52 Testing AJAX with Web Component Tester -- Polycasts #37
Testing AJAX with Web Component Tester -- Polycasts #37
Chrome for Developers
53 Slack: Extended Xmas Special - Supercharged
Slack: Extended Xmas Special - Supercharged
Chrome for Developers
54 Browser testing with Travis & Sauce Labs -- Polycasts #38
Browser testing with Travis & Sauce Labs -- Polycasts #38
Chrome for Developers
55 Optimize for production with Vulcanize -- Polycasts #39
Optimize for production with Vulcanize -- Polycasts #39
Chrome for Developers
56 Highlights from Chrome Dev Summit 2015
Highlights from Chrome Dev Summit 2015
Chrome for Developers
57 Chrome 48: Custom buttons in notifications, DevTools Security panel, and Presentation mode
Chrome 48: Custom buttons in notifications, DevTools Security panel, and Presentation mode
Chrome for Developers
58 Crisper: Protecting your Polymer app with CSP -- Polycasts #40
Crisper: Protecting your Polymer app with CSP -- Polycasts #40
Chrome for Developers
59 How do I use Sass with Polymer? #AskPolymer -- Polycasts #41
How do I use Sass with Polymer? #AskPolymer -- Polycasts #41
Chrome for Developers
60 Colors – DevTools Tonight #0 (Pilot)
Colors – DevTools Tonight #0 (Pilot)
Chrome for Developers

This video teaches how to customize Chrome with extensions to boost productivity and enhance web development workflow. It covers various Chrome extension APIs and demonstrates how to use them to solve specific problems.

Key Takeaways
  1. Explore the Chrome Web Store for existing extensions
  2. Use the Chrome Tab Groups API to customize tab management
  3. Utilize the Chrome Omnibox API to create custom keyword shortcuts
  4. Override the new tab page with custom HTML using Chrome URL Overrides
  5. Automate bookmark organization with the Chrome Bookmarks API
  6. Enhance web development workflow with Chrome Dev Tools API
💡 The Chrome extension APIs provide a powerful way to customize and extend the browser, allowing users to solve specific problems and enhance their workflow in unique ways.

Related Reads

📰
Inside the Wayfair Frontend SDE-2 Interview: A Complete Breakdown
Learn how to prepare for a Frontend SDE-2 interview at Wayfair, including online assessments, machine coding, and system design.
Medium · Programming
📰
I Spent Two Years Maintaining a React SPA. HTMX Rebuilt It in a Week
Learn how HTMX rebuilt a React SPA in a week, replacing 2 years of maintenance work, and discover the benefits of this alternative approach
Medium · Programming
📰
The 5 Levels of Front End Engineering (And Where Most Developers Get Stuck)
Learn the 5 levels of front end engineering to improve your skills and avoid getting stuck in a career rut
Medium · Programming
📰
Browser-Based PDF Editing with Vue 3 and pdf-lib
Learn to build a browser-based PDF editor using Vue 3 and pdf-lib, enabling users to edit PDFs directly in the browser
Dev.to · sunshey

Chapters (6)

Introduction
0:38 Taming Tabs
0:51 Outstanding Omniboxes
1:20 Creative Customizations
2:05 Beautiful Bookmarks
2:41 Delightful DevTools
Up next
How To Build A Twitter Clone - React Next JS - Appwrite Crash Course
Adrian Twarog
Watch →