为了不让同事看到我的屏幕，我写了一个 Chrome 插件

那天下午，我正在浏览一些到岛国前端技术文档，突然听到身后传来脚步声。我下意识地想要切换窗口，但已经来不及了——我的同事小张已经站在了我身后。"咦，你在看什么？"他好奇地问道。我尴尬地笑了笑，手忙脚乱地想要关闭页面。那一刻，我多么希望有一个快捷键，能瞬间让整个屏幕变得模糊，这样就不会有人看到我正在浏览的内容了。

于是乎我想：为什么不开发一个 Chrome 插件，让用户能够一键模糊整个网页呢？这样不仅能保护隐私，还能避免类似的尴尬情况。

开发过程

说干就干，我开始了 Web Blur 插件的开发。这个插件的核心功能很简单：

1. 一键切换：使用快捷键（默认 Ctrl+B）快速开启/关闭模糊效果

2. 可调节的模糊程度：根据个人喜好调整模糊强度

3. 记住设置：自动保存用户的偏好设置

技术实现

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);
    }
  });
}

以后可以愉快的学技术辣