DEV Community

Koji (he/him)
Koji (he/him)

Posted on

11 Chrome Extensions I Can't Live without

OneTab

I love this since I open so many tabs everyday and need a way to keep some of them. OneTab is very useful!

https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall?hl=en

Save up to 95% memory and reduce tab clutter
Whenever you find yourself with too many tabs, click the OneTab icon to convert all of your tabs into a list. When you need to access the tabs again, you can either restore them individually or all at once.

When your tabs are in the OneTab list, you will save up to 95% of memory because you will have reduced the number of tabs open in Google Chrome.

Wappalyzer

Generally I use Wappalyzer to check websites I'm interested in. Mostly check what kind of frontend tech stacks are used.

https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=en

Identify web technologies
Wappalyzer is a technology profiler that shows you what websites are built with.

Find out what CMS a website is using, as well as any framework, ecommerce platform, JavaScript libraries and many more.

Wappalyzer is more than a CMS detector or framework detector: it uncovers more than a thousand technologies in dozens of categories such as programming languages, analytics, marketing tools, payment processors, CRM, CDN and others.

React Developer Tools

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

Adds React debugging tools to the Chrome Developer Tools. Created from revision 67b7a00b3 on 10/19/2021.
React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.

You will get two new tabs in your Chrome DevTools: "⚛️ Components" and "⚛️ Profiler".

The Components tab shows you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering.

By selecting one of the components in the tree, you can inspect and edit its current props and state in the panel on the right. In the breadcrumbs you can inspect the selected component, the component that created it, the component that created that one, and so on.

ColorPick Eyedropper

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en

A zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more.
If you feel the need to alert the developer about a bug use the feedback forum instead of writing a review.

ColorPick needs permission on all websites so that it is at the ready when you need it. In order to use the tabs API this permission is required. Color pick does not abuse this permission and is highly configurable. You can always review the source code yourself, which is available online here https://github.com/qufighter/ColorPick PRs welcome!

Please note that colors are picked from a snapshot of the page that is updated only when you scroll. To take a new snapshot press r or use the re-snap button. Sometimes if you just changed tabs, you may see a snapshot error - this is an intentional security feature. Press R or scroll to correct this, or exit color pick and try again.

Metamask

https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en

An Ethereum Wallet in your Browser
MetaMask is an extension for accessing Ethereum enabled distributed applications, or "Dapps" in your browser!

The extension injects the Ethereum web3 API into every website's javascript context, so that dapps can read from the blockchain.

MetaMask also lets the user create and manage their own identities (via private keys, local client wallet and hardware wallets like Trezor™), so when a Dapp wants to perform a transaction and write to the blockchain, the user gets a secure interface to review the transaction, before approving or rejecting it.

daily.dev

daily.dev is super useful to check tech news quickly.

https://chrome.google.com/webstore/detail/dailydev-the-homepage-dev/jlmpjdjjbgclbocgajdjefcidcncaied?hl=en

Get a feed of the hottest developer news personalized to you.
Hi there busy developer 👋

daily.dev is the fastest growing online community for developers to stay updated on the best developer news. Get all the content you love in one place collected from +400 sources.

In other words, stop wasting time searching for high-quality articles. Just install daily.dev, open a new tab, and you're all set.

Phantom

Recently, I check projects that are related to Solana.

https://chrome.google.com/webstore/detail/phantom/bfnaelmomeimhlpmgjnjophhpkkoljpa?hl=en

A crypto wallet reimagined for DeFi & NFTs
Phantom is an extension for accessing distributed applications deployed on the Solana blockchain.

The extension injects an object into every website's javascript context so that decentralized applications can interact with your wallet, and you can interact with the application.

Phantom also lets users create and manage their own identities (via private keys, mnemonics, and hardware wallets like Ledger), so when a decentralized application wants to perform a transaction and write to the blockchain, the user gets a secure interface to review the transaction, before approving or rejecting.

Because it adds functionality to the normal browser context, Phantom requires the permission to read and write to any webpage. Security is taken very seriously, and the Phantom code has been audited by top auditing firms.

Awesome Screenshot & Screen Recorder

Awesome Screenshot is very useful to take a screenshot from a website. Basically, I use this to take an entire screenshot of a website. However, I don't use screen recorder.

https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=en-US

Awesome Screen Recorder & Video Editor, Full page screen capture & Annotation tool
Capture your screen with Awesome Screenshot & Screen Recorder, a powerful tool for screen sharing, used by millions of users. Save screen recordings & screenshots to awesomescreenshot.com and share your videos and images instantly with unique shareable links.

The two-tab popup menu allows you to switch between screen recording and screen capture easily.
Want to share your screen for cases like reporting technical issue, making product demo or how-to tutorials? Set the Record tab as the primary tab in Options and start recording whenever needed.

JSON Viewer

I cannot check Json data without JSON Viewer lol.

https://chrome.google.com/webstore/detail/json-viewer/aimiinbnnkboelefkjlenlgimcabobli?hl=en-US

Validates and makes JSON documents easy to read. Open source.
JSONViewer port for Chrome is an updated version of Gildas' JSOnView extension.

Features:

  • Syntax highlighting
  • Collapsible trees, with indent guides amd items count
  • Clickable URL's
  • JSON & JSONP support
  • Toggle between raw and parsed JSON
  • Works on any valid JSON page even on local files too (if you enable this in chrome://extensions)

uBlock Origin

https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm?hl=en-US

Finally, an efficient blocker. Easy on CPU and memory.
IMPORTANT: uBlock Origin is completely unrelated to the site "ublock.org".
uBlock Origin is not an "ad blocker", it's a wide-spectrum content blocker with CPU and memory efficiency as a primary feature.

Scraper

Scraper is very useful to get data very quickly.
If I need data from a couple of tables on a website and don't want to write code for them, Scraper is very useful.
For example, cryptocurrencies' price and some information.

https://chrome.google.com/webstore/detail/scraper/mbigbapnjcgaffohmbkdlecaccepngjd?hl=en

Scraper gets data out of web pages and into spreadsheets.
Scraper is a very simple (but limited) data mining extension for facilitating online research when you need to get data into spreadsheet form quickly. It is intended as an easy-to-use tool for intermediate to advanced users who are comfortable with XPath.

Discussion (0)