I Made a Chrome Extension. Slack Channels Grouping
Tags: javascript, slack, webpack
Published: 2019-05-28 15:22:51


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

<table>
<tr>
<td><img src="https://thepracticaldev.s3.amazonaws.com/i/o0cwx4ezcghh3sznc02d.png" width="70%" /></td>
<td><img src="https://thepracticaldev.s3.amazonaws.com/i/k83qlcms7p62pdkrcgv2.png" width="70%" /></td>
</tr>
<tr>
<td><center>Original</center></td>
<td><center>Grouped</center></td>
</tr>
</table>

Install here

- Chrome: [Slack Channels Grouping - Chrome Web Store](https://chrome.google.com/webstore/detail/slack-channels-grouping/lcbnhfianneihfgkmfncnhpkpghedbkm?authuser=0)
- Firefox: [Slack Channels Grouping – Get this Extension for 🦊 Firefox](https://addons.mozilla.org/firefox/addon/slack-channels-grouping/)



# 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" :thinking:

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](https://github.com/webextension-toolbox/webextension-toolbox)

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

Generate a template with the following command,

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

Start development,

```shell
yarn dev chrome
```

Output zip,

```shell
yarn build chrome
```

Just uploads to [Chrome Web Store Dashboard](https://chrome.google.com/webstore/devconsole/).

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.

```js
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](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API)

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

```js
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](https://developers.google.com/web/updates/2015/08/using-requestidlecallback)

```js
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! :smile: