Too many channels make eyes suffering 😫
I made a Chrome extension that grouping channels nicely!
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! 😄
Top comments (0)