我之前也折腾过类似的需求，确实Chrome官方API里没有直接提供修改原生标签栏布局的接口，不过我们可以通过自定义UI+Chrome标签API来模拟实现横向标签的效果，下面是具体的思路和代码示例：

核心思路 #

Chrome的原生标签栏属于浏览器级别的UI，扩展没有权限直接修改它的布局，但我们可以在网页顶部创建一个自定义的横向标签栏，然后通过chrome.tabs系列API同步标签的新增、切换、关闭等状态，让这个自定义栏完全替代原生标签栏的核心功能。

具体实现步骤 #

1. 配置扩展清单文件 #

首先在manifest.json中申请必要的权限，确保能访问标签数据和注入页面样式脚本：

{
  "manifest_version": 3,
  "name": "横向标签栏",
  "version": "1.0",
  "permissions": ["tabs", "activeTab"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["style.css"]
    }
  ]
}

2. 编写横向标签栏样式 #

用CSS实现固定在页面顶部的横向标签布局：

/* style.css */
.custom-tab-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 42px;
  background-color: #f5f5f5;
  display: flex;
  gap: 6px;
  padding: 4px 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 99999;
}

.custom-tab {
  flex: 1;
  min-width: 140px;
  max-width: 220px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.2s;
}

.custom-tab.active {
  background-color: #4285f4;
  color: #fff;
  border-color: #3367d6;
}

.tab-close-btn {
  font-size: 18px;
  opacity: 0.6;
}

.tab-close-btn:hover {
  opacity: 1;
}

/* 给页面内容添加顶部内边距，避免被标签栏遮挡 */
body {
  padding-top: 50px !important;
}

3. 同步标签数据到自定义UI #

在content.js中实现标签的渲染和状态同步：

// content.js
// 创建标签栏容器
function initTabBar() {
  const tabBar = document.createElement('div');
  tabBar.className = 'custom-tab-bar';
  document.body.prepend(tabBar);
  return tabBar;
}

// 渲染当前窗口的所有标签
async function renderTabs(tabBar) {
  tabBar.innerHTML = '';
  const tabs = await chrome.tabs.query({ currentWindow: true });

  tabs.forEach(tab => {
    const tabItem = document.createElement('div');
    tabItem.className = `custom-tab ${tab.active ? 'active' : ''}`;
    tabItem.dataset.tabId = tab.id;

    // 标签标题
    const title = document.createElement('span');
    title.textContent = tab.title || '新标签页';

    // 关闭按钮
    const closeBtn = document.createElement('span');
    closeBtn.className = 'tab-close-btn';
    closeBtn.textContent = '×';
    closeBtn.addEventListener('click', (e) => {
      e.stopPropagation();
      chrome.tabs.remove(tab.id);
    });

    // 切换标签
    tabItem.addEventListener('click', () => {
      chrome.tabs.update(tab.id, { active: true });
    });

    tabItem.appendChild(title);
    tabItem.appendChild(closeBtn);
    tabBar.appendChild(tabItem);
  });
}

// 初始化并监听标签变化
const tabBar = initTabBar();
renderTabs(tabBar);

// 监听标签的各类操作，实时更新UI
chrome.tabs.onCreated.addListener(() => renderTabs(tabBar));
chrome.tabs.onRemoved.addListener(() => renderTabs(tabBar));
chrome.tabs.onActivated.addListener(() => renderTabs(tabBar));
chrome.tabs.onUpdated.addListener(() => renderTabs(tabBar));

额外说明 #

• 这个方案是在网页层面添加自定义标签栏，无法直接隐藏Chrome原生标签栏（扩展没有浏览器级别的UI修改权限），如果需要更接近原生的体验，可以让用户手动开启Chrome的实验性隐藏标签栏功能（通过chrome://flags/#compact-navigation）
• 可以根据需求扩展功能，比如添加标签拖拽排序、固定标签、标签分组等，这些都可以通过chrome.tabsAPI配合DOM操作实现
• 要注意不同网站的样式冲突，必要时可以给自定义标签栏的CSS选择器添加更强的权重

内容的提问来源于stack exchange，提问作者Ly.O