March 2020 – An Errant Programmer

If you ever work in a public space or around snooping people you may want some extra privacy on Slack. Here is a pretty simple solution to enable a blurred overlay when you mouse out of the application.

To add this functionality…

Enable Slack Developer Tools – You will only need to do this once
- Open a Command Prompt and run
  
  setx SLACK_DEVELOPER_MENU true
  
  1
  
  setx SLACK_DEVELOPER_MENU true
- I am told on a Mac it would be
  
  export SLACK_DEVELOPER_MENU=true
  
  1
  
  export SLACK_DEVELOPER_MENU=true
Restart Slack
Open Developer Tools
- From the application menu select View > Developer > Toggle Webapp DevTools
- Shortcut: Ctrl+Alt+I

Paste the following script into the Console tab – You will need to do this each time Slack restarts (unless I find a better way to implement this)

(function(){
	let overlay = document.createElement('div');
	overlay.setAttribute('id','privacy-overlay');
	overlay.style.cssText = 'position:absolute; height: 100%;width: 100%; z-index:999; display: none; background: rgba(255,255,255,0.2); backdrop-filter: blur(5px);';
	overlay.onmouseover = el =&gt; el.currentTarget.style.display = 'none';
	document.body.onmouseleave = el =&gt; document.getElementById('privacy-overlay').style.display = 'block';
	document.body.insertBefore(overlay, document.body.firstElementChild);
})();

(function(){

let overlay = document.createElement('div');

overlay.setAttribute('id','privacy-overlay');

overlay.style.cssText = 'position:absolute; height: 100%;width: 100%; z-index:999; display: none; background: rgba(255,255,255,0.2); backdrop-filter: blur(5px);';

overlay.onmouseover = el => el.currentTarget.style.display = 'none';

document.body.onmouseleave = el => document.getElementById('privacy-overlay').style.display = 'block';

document.body.insertBefore(overlay, document.body.firstElementChild);

})();

That’s it! Now when you mouse in and out of the window it should show and hide an overlay. If you don’t like it just restart the app.