如何用CSS为Chrome标签页添加装饰性边框？

完全可以实现，核心是利用Chrome扩展的**内容脚本（Content Scripts）**向页面注入浮动边框元素，和Browser Pets的实现逻辑一致。以下是具体步骤和代码示例：

1. 配置扩展清单（manifest.json） #

使用Chrome扩展V3版本，声明内容脚本权限与匹配范围：

{
  "manifest_version": 3,
  "name": "标签页装饰边框",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["border.css"]
    }
  ],
  "permissions": ["storage"]
}

2. 编写内容脚本（content.js） #

创建边框元素并注入页面，支持读取用户自定义样式：

// 创建全局边框元素
const borderElement = document.createElement('div');
borderElement.id = 'custom-tab-border';
document.body.appendChild(borderElement);

// 从本地存储读取用户自定义的边框样式
chrome.storage.local.get(['borderColor', 'borderWidth'], (result) => {
  const borderColor = result.borderColor || '#ff4500';
  const borderWidth = result.borderWidth || '6px';
  borderElement.style.borderColor = borderColor;
  borderElement.style.borderWidth = borderWidth;
});

// 监听存储变化，实时更新样式
chrome.storage.onChanged.addListener((changes) => {
  if (changes.borderColor) {
    borderElement.style.borderColor = changes.borderColor.newValue;
  }
  if (changes.borderWidth) {
    borderElement.style.borderWidth = changes.borderWidth.newValue;
  }
});

3. 编写样式文件（border.css） #

设置边框定位与基础样式，确保不影响页面交互：

#custom-tab-border {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-style: solid;
  border-color: #ff4500; /* 默认颜色 */
  border-width: 6px; /* 默认宽度 */
  pointer-events: none; /* 允许点击穿透到页面 */
  z-index: 99999; /* 确保边框在页面最上层 */
}

额外扩展：添加用户设置界面 #

如果要让用户自定义边框样式，可新增popup页面，让用户输入颜色、宽度，点击保存后将数据存入chrome.storage.local，内容脚本会自动监听变化并更新样式。

内容的提问来源于stack exchange，提问作者N L