--- title: Best Google Chrome posts of 2022 | daily.dev description: The most upvoted Google Chrome posts of 2022, curated by the daily.dev community. canonical: https://daily.dev/tags/google-chrome/best-of/2022 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/google-chrome/best-of/2022 og:type: website og:site_name: daily.dev og:title: Best Google Chrome posts of 2022 | daily.dev og:description: The most upvoted Google Chrome posts of 2022, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of Google Chrome — 2022 1. 1 [](/posts/speech-recognition-with-javascript-p3djbooza "Speech Recognition with JavaScript") Article Community Picks · 4y Speech Recognition with JavaScript Speech recognition API was added to the specs and we got partial support on Chrome, Safari, Baidu, Android webview, iOS safari, samsung internet and Kaios browsers (see browser support in detail) The implementation I made currently supports English and Spanish just to showcase. 336 11 2. 2 [](/posts/how-to-debug-like-a-pro-d42mlrzmq "How to Debug Like a Pro") Article JavaScript in Plain English · 4y How to Debug Like a Pro Being a web developer one must be aware of some awesome debugging techniques. To be honest, I have been using console.log() along with debugger to debug my code, but debugging is not limited to these two. 193 8 3. 3 [](/posts/what-is-cors--b2dewy-13 "What is CORS?") Article DEV · 4y What is CORS? Cross-Origin Resource Sharing (CORS) is an HTTP-based security mechanism controlled and enforced by the client. It allows a service to indicate any origin other than its own from which the client can request resources. A request may be blocked by CORS policy not only because of the incorrect origin, but also incorrect HTTP header, HTTP method or Cookie header. How to fix CORS error? 175 13 4. 4 [](/posts/8-reasons-to-ditch-chrome-and-switch-to-firefox-z5i7yuxdt "8 reasons to ditch Chrome and switch to Firefox") Article Hacker News · 4y 8 reasons to ditch Chrome and switch to Firefox Using Firefox can boost your PC’s performance, better protect you on the web, and also make life more convenient. It offers built-in features that don’t exist in Chrome or otherwise require third-party add-ons. Firefox also stops cryptominers from accessing your device, aka cryptojacking. 123 20 5. 5 [](/posts/i-ve-started-using-mozilla-firefox-and-now-i-can-never-go-back-to-google-chrome-ih4hbhbuz "I've started using Mozilla Firefox and now I can never go back to Google Chrome") Article Community Picks · 4y I've started using Mozilla Firefox and now I can never go back to Google Chrome Google Chrome has an array of AdBlock extensions that keeps your data out of the hands of marketing firms. Mozilla Firefox has far more than that and a sizable amount is devoted to blocking the vast array of internet trackers used by most sites. Unlike Chrome, Firefox is extremely anti-tracking to the point that outside forces (whether work or school) are unable to install tracking extensions and programs into the browser. 109 21 6. 6 [](/posts/bito-ai---a-swiss-army-knife-in-your-ide-that-can-10x-your-dev-life-ntddfx-rl "Bito AI - A Swiss Army knife in your IDE that can 10x your dev life") Article Product Hunt · 4y Bito AI - A Swiss Army knife in your IDE that can 10x your dev life A Swiss Army knife in your IDE can 10x your dev life. Free Bito’s AI Assistant can help you write code, understand syntax, write test cases, explain code, check security, and even explain high level concepts. 92 13 7. 7 [](/posts/modern-web-debugging-in-chrome-devtools-sgvkkozcf "Modern web debugging in Chrome DevTools") Article Chrome Developers · 4y Modern web debugging in Chrome DevTools Chrome DevTools has an extra setting enabled by default: Automatically add known third-party scripts to ignore list. With this setting enabled, DevTools hides any file or folder that a framework or build tool has marked as to ignore. This is a preview feature available in Chrome Canary from version 106. 92 4 8. 8 [](/posts/json-hero-chrome-extension---a-beautiful-json-explorer-packed-with-features-kukr2rbzi "JSON Hero Chrome extension - A beautiful JSON explorer packed with features") Article Product Hunt · 4y JSON Hero Chrome extension - A beautiful JSON explorer packed with features The new JSON Hero Chrome extension lets you easily use JSON Hero from Chrome for plain JSON blobs. Or extract and open Firestore documents, Github files, and Open Graph metadata. And since JSON Hero is open source, you can even point to your own instance of the service. 86 5 9. 9 [](/posts/tailwind-cheat-sheet---your-easy-access-to-tailwind-s-classes-73znln7nu "Tailwind Cheat Sheet - Your easy access to Tailwind's classes") Article Product Hunt · 4y Tailwind Cheat Sheet - Your easy access to Tailwind's classes Chrome extension to easily access Tailwind's classes. The extension provides following features: Easily accessible tailwind classes. Click on the class to copy the same to clipboard. Search for classes using the search function in Tailwind. Open Source. Back to Mail Online home. back to the page you came from. 85 4 10. 10 [](/posts/css-border-animations-zbkxiwzn9 "CSS border animations") Article web.dev · 4y CSS border animations There are a few methods available to set a border on an element: border, outline, and box-shadow. Each approach comes with its own advantages and disadvantages, especially when it comes to animating the borders. The main reason to not use a proper CSS border is for animation purposes. The border-image does not follow the border-radius. does not following the border radius. 83 3 11. 11 [](/posts/mikeroyal-self-hosting-guide-self-hosting-guide-learn-all-about-locally-hosting-on-premises-priv-ew-m8pbvf "mikeroyal/Self-Hosting-Guide: Self-Hosting Guide. Learn all about locally hosting(on premises & private web servers) and managing software applications by yourself or your organization.") Article Pointer · 4y mikeroyal/Self-Hosting-Guide: Self-Hosting Guide. Learn all about locally hosting(on premises & private web servers) and managing software applications by yourself or your organization. Most self-hosted software can be installed using Docker, a packaging system which allows software to bundle their configuration and dependencies. Shipwright is a WebUI to generate templates for Yacht, Portainer, Docker-Compose, and Unraid. Dozzle is a small lightweight application with a web based interface to monitor Docker logs. Diun is a tool that receive notifications when a Docker image is updated. 82 4 12. 12 [](/posts/why-firefox-deserves-its-sad-decline--kiygfpvkn "Why Firefox Deserves Its Sad Decline…") Article gitconnected · 4y Why Firefox Deserves Its Sad Decline… Mozilla Firefox was the very first web browser to popularize the idea of “tabs”(Thanks chrome) It was the first browser to start its own download manager, independent of the operating system. In June 2008, Firefox set the world record for having the most “unique downloads in one day” 82 38 13. 13 [](/posts/how-to-use-chrome-as-a-code-editor-and-debugger-fciz4ye05 "How to use Chrome as a Code Editor and Debugger") Article asayer · 4y How to use Chrome as a Code Editor and Debugger Chrome is a great browser to use for development. It has a number of tools that can be used to improve your code. The following sections describe how to use Chrome’s editing and debugging facilities. We also show you how to make changes to your code that are not permanent. 78 2 14. 14 [](/posts/a-complete-guide-to-debugging-javascript-in-chrome-5kwwbq-aq "A Complete Guide to Debugging Javascript in Chrome") Article Hashnode · 4y A Complete Guide to Debugging Javascript in Chrome Chrome DevTools is a comprehensive developer toolkit with various web authoring and debugging tools. It is built directly into the Chrome browser and gives developers a deeper understanding of their applications. This article teaches you how to debug JavaScript code using the Chrome Dev tools. 77 15. 15 [](/posts/how-to-debug-better-with-chrome-gbykxrsyy "How to Debug Better with Chrome") Article Hashnode · 4y How to Debug Better with Chrome Google Chrome is probably the most widely used and popular web browser among developers. It has gradually become the preferred web browser for most developers to test and debug their websites and web apps. Google Chrome provides developers with the ability to debug most web applications with the built-in developer tools (aka DevTools) within the browser. 70 6 16. 16 [](/posts/best-chrome-extensions-to-boost-github-ze13s0k8x "Best Chrome Extensions to boost GitHub") Article Hashnode · 4y Best Chrome Extensions to boost GitHub Chrome extensions are software packages that introduce additional functionalities to your Chrome browser. They enable you to personalize your web-browsing experience by adding features with a single mouse click. Since GitHub is one of the most comprehensive platforms for developers, this roundup will cover some of the best and most useful GitHub Chrome extensions. 69 17 17. 17 [](/posts/building-chrome-extensions-for-beginners----part-1-theory-vexr4tbyw "Building Chrome Extensions for Beginners -- Part 1: Theory") Article asayer · 4y Building Chrome Extensions for Beginners -- Part 1: Theory The primary goal of this series is to introduce the basic concepts of Chrome Extensions. At the end of the series, you will have a Pomodoro timer extension built with Javascript. To build any Chrome extension, we must rely on the Chrome developers’ documentation. This is the single source of truth for anything extension related. 61 18. 18 [](/posts/how-to-create-your-own-google-chrome-extension--dyry-t1n "How to Create Your Own Google Chrome Extension") Article freeCodeCamp · 5y How to Create Your Own Google Chrome Extension A chrome extension is a program that is installed in the Chrome browser. You can build one easily using web technologies like HTML, CSS, and JavaScript. We will be looking into how to create this extension in this blog post. The complete source code of this project can be found on GitHub. 53 3 19. 19 [](/posts/drag-and-drop-events-in-javascript-ap796vjno "Drag-and-drop events in JavaScript") Article asayer · 4y Drag-and-drop events in JavaScript The HTML Drag and Drop API is the API that provides us with drag-and-drop functionality in the browser. In this article, we will take a quick look at how it works so you can use it for your next big project. 50 2 20. 20 [](/posts/how-to-automate-your-linux-desktop-bfjjvxzvc "How to Automate Your Linux Desktop") Article Hacker Noon · 4y How to Automate Your Linux Desktop In this tutorial, we will write a shell script and use X11 utilities to automate our Linux desktop. The objective of the article is to automatically set up our daily work environment with a single command. When I run the script, it will open the mail client in one workspace and open Reddit and Twitter websites in the chrome browser. 48 2 21. 21 [](/posts/new-in-chrome-104-3t-fhj1c3 "New in Chrome 104") Article Chrome Developers · 4y New in Chrome 104 With Region Capture, a web app can define the specific area of the screen it wants to share. Shared Element Transitions uses CSS Animations, so you can change from a fade in effect, to slide in, or whatever you want. 46 7 22. 22 [](/posts/new-in-chrome-100-mtw0i37ag "New in Chrome 100") Article Chrome Developers · 5y New in Chrome 100 Chrome 100 has a three digit version number. Multi-Screen Window Placement API makes it possible to enumerate the displays connected to a user's machine. Chrome 100 will be the last version to support an unreduced User-Agent string by default. Starting in Chrome 101, the user agent will be gradually reduced. 46 2 23. 23 [](/posts/css-style-queries-wmrma8pjm "CSS Style Queries") Article Ahmad Shadeed · 4y CSS Style Queries The Chrome team released experimental support for a new proposed CSS spec, style queries. In short, they let us query the style of a container, rather than the size only. This can be helpful in cases where querying the container size isn’t enough. 44 1 24. 24 [](/posts/sigmaos-raises-4-million-to-build-a-browser-for-productivity-nerds-bmmroldtk "SigmaOS raises $4 million to build a browser for productivity nerds") Article TechCrunch · 4y SigmaOS raises $4 million to build a browser for productivity nerds London-based startup SigmaOS is building a Mac browser for productivity nerds. The company has raised $4 million in seed funding led by LocalGlobe and participation from Y Combinator, 7percent Ventures, Moonfire Ventures, Shine VC, TrueSight Ventures, Pioneer Fund, and Venture Together. 39 5 25. 25 [](/posts/chikamichi---chrome-extension-that-enables-fuzzy-search-for-anything-eq8xxuqfm "Chikamichi - Chrome extension that enables fuzzy search for anything") Article Product Hunt · 5y Chikamichi - Chrome extension that enables fuzzy search for anything 36 3 [See all Google Chrome archives](/tags/google-chrome/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/google-chrome/best-of/2022#page","url":"https://daily.dev/tags/google-chrome/best-of/2022","name":"Best Google Chrome Posts of 2022","description":"The most upvoted Google Chrome posts of 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/google-chrome/best-of/2022#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/speech-recognition-with-javascript-p3djbooza","name":"Speech Recognition with JavaScript"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/how-to-debug-like-a-pro-d42mlrzmq","name":"How to Debug Like a Pro"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/what-is-cors--b2dewy-13","name":"What is CORS?"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/8-reasons-to-ditch-chrome-and-switch-to-firefox-z5i7yuxdt","name":"8 reasons to ditch Chrome and switch to Firefox"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/i-ve-started-using-mozilla-firefox-and-now-i-can-never-go-back-to-google-chrome-ih4hbhbuz","name":"I've started using Mozilla Firefox and now I can never go back to Google Chrome"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/bito-ai---a-swiss-army-knife-in-your-ide-that-can-10x-your-dev-life-ntddfx-rl","name":"Bito AI - A Swiss Army knife in your IDE that can 10x your dev life"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/modern-web-debugging-in-chrome-devtools-sgvkkozcf","name":"Modern web debugging in Chrome DevTools"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/json-hero-chrome-extension---a-beautiful-json-explorer-packed-with-features-kukr2rbzi","name":"JSON Hero Chrome extension - A beautiful JSON explorer packed with features"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/tailwind-cheat-sheet---your-easy-access-to-tailwind-s-classes-73znln7nu","name":"Tailwind Cheat Sheet - Your easy access to Tailwind's classes"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/css-border-animations-zbkxiwzn9","name":"CSS border animations"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/mikeroyal-self-hosting-guide-self-hosting-guide-learn-all-about-locally-hosting-on-premises-priv-ew-m8pbvf","name":"mikeroyal/Self-Hosting-Guide: Self-Hosting Guide. Learn all about locally hosting(on premises & private web servers) and managing software applications by yourself or your organization."},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/why-firefox-deserves-its-sad-decline--kiygfpvkn","name":"Why Firefox Deserves Its Sad Decline…"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/how-to-use-chrome-as-a-code-editor-and-debugger-fciz4ye05","name":"How to use Chrome as a Code Editor and Debugger"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/a-complete-guide-to-debugging-javascript-in-chrome-5kwwbq-aq","name":"A Complete Guide to Debugging Javascript in Chrome"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/how-to-debug-better-with-chrome-gbykxrsyy","name":"How to Debug Better with Chrome"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/best-chrome-extensions-to-boost-github-ze13s0k8x","name":"Best Chrome Extensions to boost GitHub"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/building-chrome-extensions-for-beginners----part-1-theory-vexr4tbyw","name":"Building Chrome Extensions for Beginners -- Part 1: Theory"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/how-to-create-your-own-google-chrome-extension--dyry-t1n","name":"How to Create Your Own Google Chrome Extension"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/drag-and-drop-events-in-javascript-ap796vjno","name":"Drag-and-drop events in JavaScript"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/how-to-automate-your-linux-desktop-bfjjvxzvc","name":"How to Automate Your Linux Desktop"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/new-in-chrome-104-3t-fhj1c3","name":"New in Chrome 104"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/new-in-chrome-100-mtw0i37ag","name":"New in Chrome 100"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/css-style-queries-wmrma8pjm","name":"CSS Style Queries"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/sigmaos-raises-4-million-to-build-a-browser-for-productivity-nerds-bmmroldtk","name":"SigmaOS raises $4 million to build a browser for productivity nerds"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/chikamichi---chrome-extension-that-enables-fuzzy-search-for-anything-eq8xxuqfm","name":"Chikamichi - Chrome extension that enables fuzzy search for anything"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"Google Chrome","item":"https://daily.dev/tags/google-chrome"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/google-chrome/best-of"},{"@type":"ListItem","position":5,"name":"2022"}]}]} ```