DEV Community

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

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!

Original
Grouped

Install here

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
Enter fullscreen mode Exit fullscreen mode

Start development,

yarn dev chrome
Enter fullscreen mode Exit fullscreen mode

Output zip,

yarn build chrome
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

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
})
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)