为了不让同事看到我的屏幕，我写了一个 Chrome 插件
那天下午，我正在浏览一些到岛国前端技术文档，突然听到身后传来脚步声。我下意识地想要切换窗口，但已经来不及了——我的同事小张已经站在了我身后。"咦，你在看什么？"他好奇地问道。我尴尬地笑了笑，手忙脚乱地想要关闭页面。那一刻，我多么希望有一个快捷键，能瞬间让整个屏幕变得模糊，这样就不会有人看到我正在浏览的内容了。
于是乎我想：为什么不开发一个 Chrome 插件，让用户能够一键模糊整个网页呢？这样不仅能保护隐私，还能避免类似的尴尬情况。
开发过程
说干就干，我开始了 Web Blur 插件的开发。这个插件的核心功能很简单：
- 一键切换：使用快捷键（默认 Ctrl+B）快速开启/关闭模糊效果
- 可调节的模糊程度：根据个人喜好调整模糊强度
- 记住设置：自动保存用户的偏好设置
技术实现
1.首先，我们需要在 manifest.json 中声明必要的权限：
"manifest_version": 3,
"name": "Web Blur",
"version": "1.0",
"permissions": [
"activeTab",
"storage",
"commands"
],
"action": {
"default_popup": "popup.html",
"default_icon": {
"128": "images/icon.png"
}
},
"commands": {
"toggle-blur": {
"suggested_key": {
"default": "Ctrl+Shift+B"
},
"description": "Toggle blur effect"
}
}
}
2. 实现模糊效果
function applyBlur(amount) {
const style = document.createElement('style');
style.id = 'web-blur-style';
style.textContent = `
body {
filter: blur(${amount}px) !important;
transition: filter 0.3s ease;
}
`;
document.head.appendChild(style);
}
// 移除模糊效果
function removeBlur() {
const style = document.getElementById('web-blur-style');
if (style) {
style.remove();
}
}
3. 快捷键控制
if (command === 'toggle-blur') {
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
chrome.tabs.sendMessage(tabs[0].id, {action: 'toggleBlur'});
});
}
});
4. 用户界面
<button id="toggleBlur" class="toggle-button">
Toggle Blur
</button>
<div class="slider-container">
<label>Blur Amount:</label>
<input type="range" id="blurAmount" min="0" max="20" value="5">
<span id="blurValue">5px</span>
</div>
<div class="shortcut-info">
Current: Ctrl+Shift+B
<button id="changeShortcut">Change shortcut</button>
</div>
</div>
5. 设置持久化
function saveSettings(settings) {
chrome.storage.sync.set({settings}, () => {
console.log('Settings saved');
});
}
// 加载设置
function loadSettings() {
chrome.storage.sync.get(['settings'], (result) => {
if (result.settings) {
applySettings(result.settings);
}
});
}
以后可以愉快的学技术辣
作者：想想肿子会怎么做
来源：juejin.cn/post/7509042833152851978
来源：juejin.cn/post/7509042833152851978
