DEV Community

Cover image for I Made a Chrome Extension. Slack Channels Grouping

Posted on • Updated on

I Made a Chrome Extension. Slack Channels Grouping

Too many channels make eyes suffering 😫
I made a Chrome extension that grouping channels nicely!


Install here


It grouping channels by hyphens and underscores.

  • animal-dog
  • animal_cat

It observe DOM updates, so it support channel creation and renaming.
If the tab is inactive, DOM observing is turned off.


In my team, there is rule of putting "prefix-" in channel name.
As the number of channels continues to increase, it has become hard to tell apart between "chat" and "club" 🤔

So I made it to make design as eye-friendly as possible.

About Development

I write about the following keywords.

  • webextension-toolbox
    • webpack
    • TypeScript
  • Page Visibility API
  • requestIdleCallback


webextension-toolbox is extension creation tool for Chrome, Firefox etc.
webextension-toolbox/webextension-toolbox - GitHub

You can easily output Chrome and Firefox extensions without thinking about cross-browser support.

Generate a template with the following command,

yarn global add yo generator-web-extension
yo web-extension

Start development,

yarn dev chrome

Output zip,

yarn build chrome

Just uploads to Chrome Web Store Dashboard.

It's easy as pie!


webextension-toolbox builds with webpack, but you can develop even if you have never touched webpack.
If you are familiar with webpack, you can easily extend it.


Recently I have been actively using TypeScript, and I used it.

If you are using typescript and webextension-toolbox, you need to create a file webextension-toolbox-config.js to overwrite the configuration.

module.exports = {
  webpack: (config, { dev, vendor }) => {
      test: /\.ts$/,
      loader: 'ts-loader'
    return config

The benefits of TypeScript are great if it is a large-scale extension.

Page Visibility API

This API observe whether the page is visible.
Page Visibility API - Web APIs | MDN

This extension observe DOM with MutationObserver. I don't want to keeping it working, so I use this API to control it.

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    // Stop observing
  } else {
    // Restart observing


This API performs processing when event loop is idle so that it does not block other processing.
This article nicely order about this API.
Using requestIdleCallback | Web | Google Developers

requestIdleCallback(() => {
  // execute
}, {
  timeout: 3000 // Forced execution if not executed after 3 seconds

This API is used to grouping channel list.


I knew webextension-toolbox for the first time, but it was very convenient and great.
You can create cross-browser extensions quickly, so try it! 😄

Top comments (0)