I Made a Chrome Extension. Slack Channels Grouping

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

Original	Grouped

Install here

• Chrome: Slack Channels Grouping - Chrome Web Store
• Firefox: Slack Channels Grouping – Get this Extension for 🦊 Firefox

Feature

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.

Why

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

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!

webpack

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.

TypeScript

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 }) => {
    config.resolve.extensions.push('.ts')
    config.module.rules.push({
      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
  }
}

requestIdleCallback

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.

Lastly

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! 😄