汤不热吧Chrome浏览器在Manifest V3时代引入了Side Panel API，允许扩展在浏览器右侧的侧边栏中展示自定义UI。这一功能为开发者提供了全新的交互范式——不同于Popup的瞬时弹出，Side Panel可以持久显示、跨页面保持状态，同时不占用网页内容空间。本文将全面讲解Side Panel API的核心概念、开发实践、多视图切换、状态持久化以及与Content Script和Service Worker的协作模式。
一、Side Panel API概述与核心概念
Side Panel API是Chrome 114版本正式稳定的MV3 API，它允许扩展在浏览器侧边栏中显示HTML页面。与传统的Popup相比，Side Panel具有以下本质区别：
| 特性 | Popup | Side Panel |
|---|---|---|
| 显示方式 | 点击图标弹出，点击外部关闭 | 在侧边栏持久显示 |
| 生命周期 | 每次打开重新加载 | 可跨导航保持存活 |
| 屏幕空间 | 小窗口，空间有限 | 占据整个侧边栏，约300-400px宽 |
| 用户控制 | 被动弹出 | 用户主动开启/关闭 |
| 多视图 | 不支持 | 支持通过path切换不同页面 |
Side Panel的核心价值在于它提供了一个持久化的、不干扰主内容的交互空间。这非常适合以下场景：AI助手对话面板、阅读标注工具、页面信息提取器、任务管理面板、实时翻译工具等。
二、Manifest配置与权限声明
使用Side Panel API首先需要在manifest.json中声明权限和配置面板。以下是完整的manifest配置示例：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
"manifest_version": 3,
"name": "Side Panel Demo",
"version": "1.0.0",
"permissions": [
"sidePanel",
"activeTab",
"storage"
],
"side_panel": {
"default_path": "sidepanel/index.html"
},
"background": {
"service_worker": "background.js"
},
"action": {
"default_title": "Open Side Panel"
},
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}
关键配置说明：
- sidePanel权限：必须声明，否则所有Side Panel API调用都会失败
- side_panel.default_path：指定侧边栏默认加载的HTML页面路径，这是必填项
- action：建议配置，用户可以通过点击扩展图标来打开侧边栏
值得注意的是，
1 | side_panel.default_path |
指向的HTML页面运行在独立的扩展上下文中，它拥有与Popup相同的权限——可以访问所有chrome.* API（前提是已声明对应权限）。
三、通过Service Worker控制Side Panel
Side Panel API的编程式控制都在Service Worker中完成。Chrome提供了三个核心方法来管理侧边栏的行为：
3.1 点击图标打开侧边栏
最常见的交互模式是用户点击扩展图标时打开侧边栏，而非弹出Popup。实现方式是在Service Worker中监听action点击事件：
2
3
4
5
6
7
8
9
10
11
12
// 方式一：全局设置，点击图标始终打开侧边栏
chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
// 方式二：在特定条件下打开侧边栏
chrome.action.onClicked.addListener(async (tab) => {
// 只在特定网站上打开侧边栏
if (tab.url && tab.url.includes('github.com')) {
await chrome.sidePanel.open({ tabId: tab.id });
}
});
两种方式的区别在于：
1 | setPanelBehavior |
是全局行为设置，一旦启用，点击扩展图标将始终打开侧边栏而非Popup；而
1 | chrome.sidePanel.open() |
则是编程式控制，可以在任何时机调用，支持条件判断。
3.2 动态切换面板内容
Side Panel支持通过
1 | setOptions |
动态切换显示的HTML页面，这为多视图应用提供了基础：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 根据当前页面切换不同的侧边栏视图
chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
if (changeInfo.status === 'complete' && tab.url) {
const url = new URL(tab.url);
if (url.hostname === 'github.com') {
await chrome.sidePanel.setOptions({
tabId,
path: 'sidepanel/github.html'
});
} else if (url.hostname === 'stackoverflow.com') {
await chrome.sidePanel.setOptions({
tabId,
path: 'sidepanel/stackoverflow.html'
});
} else {
await chrome.sidePanel.setOptions({
tabId,
path: 'sidepanel/index.html'
});
}
}
});
注意
1 | tabId |
参数——当传入tabId时，设置的选项仅对该标签页生效，不同标签页可以显示不同的侧边栏内容。如果不传tabId，则为全局默认设置。
3.3 编程式打开与关闭
除了用户手动操作，扩展也可以通过代码主动打开侧边栏：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 在特定事件触发时打开侧边栏
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.type === 'OPEN_SIDE_PANEL') {
// 方式1：在特定标签页打开
chrome.sidePanel.open({ tabId: message.tabId });
// 方式2：在特定窗口打开（Chrome 116+）
// chrome.sidePanel.open({ windowId: message.windowId });
}
});
// Context Menu触发打开
chrome.contextMenus.create({
id: 'open-side-panel',
title: '在侧边栏中打开',
contexts: ['selection']
});
chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === 'open-side-panel') {
chrome.sidePanel.open({ tabId: tab.id });
}
});
四、Side Panel页面开发实践
Side Panel的HTML页面本质上是一个标准的扩展页面，拥有完整的DOM环境和Chrome API访问权限。下面构建一个完整的AI阅读助手侧边栏：
4.1 页面结构设计
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阅读助手</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="panel-container">
<header class="panel-header">
<h1>📖 阅读助手</h1>
<nav class="view-tabs">
<button class="tab active" data-view="summary">摘要</button>
<button class="tab" data-view="notes">笔记</button>
<button class="tab" data-view="settings">设置</button>
</nav>
</header>
<main class="panel-content">
<section id="summary-view" class="view active">
<div class="page-info">
<h2 id="page-title">加载中...</h2>
<p id="page-url"></p>
</div>
<div id="summary-content" class="content-area">
<p class="placeholder">点击"生成摘要"按钮分析当前页面</p>
</div>
<button id="btn-summarize" class="primary-btn">
生成摘要
</button>
</section>
<section id="notes-view" class="view">
<div id="notes-list"></div>
<div class="note-input">
<textarea id="note-text" placeholder="添加笔记..."></textarea>
<button id="btn-add-note">保存</button>
</div>
</section>
<section id="settings-view" class="view">
<div class="setting-item">
<label>摘要语言</label>
<select id="summary-lang">
<option value="zh">中文</option>
<option value="en">English</option>
</select>
</div>
<div class="setting-item">
<label>自动摘要</label>
<input type="checkbox" id="auto-summarize">
</div>
</section>
</main>
</div>
<script src="sidepanel.js"></script>
</body>
</html>
4.2 侧边栏JavaScript逻辑
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
// 视图切换逻辑
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
const viewId = tab.dataset.view;
// 切换tab激活状态
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
tab.classList.add('active');
// 切换视图显示
document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
document.getElementById(`${viewId}-view`).classList.add('active');
// 保存当前视图状态
chrome.storage.local.set({ lastView: viewId });
});
});
// 获取当前标签页信息
async function getCurrentTab() {
const [tab] = await chrome.tabs.query({
active: true,
currentWindow: true
});
return tab;
}
// 生成摘要
async function generateSummary() {
const tab = await getCurrentTab();
if (!tab) return;
document.getElementById('page-title').textContent = tab.title || '无标题';
document.getElementById('page-url').textContent = tab.url || '';
// 向Content Script请求页面内容
const response = await chrome.tabs.sendMessage(tab.id, {
type: 'EXTRACT_CONTENT'
});
if (response && response.content) {
// 调用摘要生成API或本地处理
const summary = await processContent(response.content);
document.getElementById('summary-content').innerHTML =
`<div class="summary-text">${summary}</div>`;
// 保存到storage
await chrome.storage.local.set({
[`summary_${tab.id}`]: {
title: tab.title,
url: tab.url,
summary,
timestamp: Date.now()
}
});
}
}
// 笔记管理
async function loadNotes() {
const tab = await getCurrentTab();
if (!tab) return;
const data = await chrome.storage.local.get(`notes_${tab.id}`);
const notes = data[`notes_${tab.id}`] || [];
const listEl = document.getElementById('notes-list');
listEl.innerHTML = notes.map((note, i) => `
<div class="note-item">
<p>${note.text}</p>
<span class="note-time">${new Date(note.timestamp).toLocaleString()}</span>
<button class="btn-delete" data-index="${i}">删除</button>
</div>
`).join('');
}
async function addNote() {
const tab = await getCurrentTab();
if (!tab) return;
const text = document.getElementById('note-text').value.trim();
if (!text) return;
const key = `notes_${tab.id}`;
const data = await chrome.storage.local.get(key);
const notes = data[key] || [];
notes.push({ text, timestamp: Date.now() });
await chrome.storage.local.set({ [key]: notes });
document.getElementById('note-text').value = '';
loadNotes();
}
// 恢复上次视图状态
chrome.storage.local.get('lastView', (data) => {
if (data.lastView) {
const tab = document.querySelector(`[data-view="${data.lastView}"]`);
if (tab) tab.click();
}
});
// 事件绑定
document.getElementById('btn-summarize').addEventListener('click', generateSummary);
document.getElementById('btn-add-note').addEventListener('click', addNote);
// 初始化
loadNotes();
五、与Content Script的深度协作
Side Panel的最大优势是可以与页面内容深度交互。与Popup不同，Side Panel在用户浏览页面时持续可见，因此可以实时响应页面变化。以下是完整的协作模式：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
// 监听来自Side Panel的请求
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
switch (message.type) {
case 'EXTRACT_CONTENT':
const content = extractPageContent();
sendResponse({ content });
break;
case 'HIGHLIGHT_TEXT':
highlightText(message.text, message.color);
sendResponse({ success: true });
break;
case 'SCROLL_TO_ELEMENT':
scrollToElement(message.selector);
sendResponse({ success: true });
break;
}
return true; // 保持消息通道开启（异步响应）
});
// 提取页面核心内容
function extractPageContent() {
// 移除脚本和样式标签
const clone = document.body.cloneNode(true);
clone.querySelectorAll('script, style, noscript').forEach(el => el.remove());
return {
title: document.title,
url: location.href,
text: clone.innerText.substring(0, 5000), // 限制长度
headings: Array.from(document.querySelectorAll('h1, h2, h3')).map(h => ({
level: h.tagName,
text: h.textContent.trim()
})),
links: Array.from(document.querySelectorAll('a[href]')).slice(0, 50).map(a => ({
text: a.textContent.trim(),
href: a.href
}))
};
}
// 文本高亮
function highlightText(text, color = '#ffeb3b') {
const range = document.createRange();
const walker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_TEXT,
null
);
while (walker.nextNode()) {
const node = walker.currentNode;
const index = node.textContent.indexOf(text);
if (index !== -1) {
range.setStart(node, index);
range.setEnd(node, index + text.length);
const mark = document.createElement('mark');
mark.style.backgroundColor = color;
mark.className = 'extension-highlight';
range.surroundContents(mark);
break;
}
}
}
// 主动向Side Panel推送页面变化
const observer = new MutationObserver(() => {
chrome.runtime.sendMessage({
type: 'PAGE_UPDATED',
title: document.title,
url: location.href
});
});
observer.observe(document.body, {
childList: true,
subtree: true
});
在Side Panel中接收Content Script推送的消息：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 监听页面更新
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.type === 'PAGE_UPDATED') {
document.getElementById('page-title').textContent = message.title;
document.getElementById('page-url').textContent = message.url;
// 如果设置了自动摘要，自动重新生成
chrome.storage.local.get('autoSummarize', (data) => {
if (data.autoSummarize) {
generateSummary();
}
});
}
});
// 监听标签页切换，更新侧边栏内容
chrome.tabs.onActivated.addListener(async (activeInfo) => {
const tab = await chrome.tabs.get(activeInfo.tabId);
document.getElementById('page-title').textContent = tab.title || '';
document.getElementById('page-url').textContent = tab.url || '';
loadNotes();
});
六、多视图架构与路由系统
对于复杂的侧边栏应用，单页面加DOM切换可能不够优雅。我们可以利用
1 | sidePanel.setOptions |
的path参数实现类似SPA路由的效果，或者用更精细的前端路由控制：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
class SidePanelRouter {
constructor() {
this.routes = {};
this.currentRoute = null;
}
register(path, handler) {
this.routes[path] = handler;
}
navigate(path, params = {}) {
if (this.currentRoute === path) return;
// 调用离开钩子
if (this.currentRoute && this.routes[this.currentRoute]?.onLeave) {
this.routes[this.currentRoute].onLeave();
}
this.currentRoute = path;
// 调用进入钩子
if (this.routes[path]?.onEnter) {
this.routes[path].onEnter(params);
}
// 更新导航状态
document.querySelectorAll('[data-route]').forEach(el => {
el.classList.toggle('active', el.dataset.route === path);
});
// 保存路由状态
chrome.storage.session.set({ currentRoute: path });
}
}
// 使用示例
const router = new SidePanelRouter();
router.register('home', {
onEnter: () => {
document.getElementById('view-home').style.display = 'block';
loadDashboard();
},
onLeave: () => {
document.getElementById('view-home').style.display = 'none';
}
});
router.register('detail', {
onEnter: (params) => {
document.getElementById('view-detail').style.display = 'block';
loadDetail(params.id);
},
onLeave: () => {
document.getElementById('view-detail').style.display = 'none';
}
});
router.register('settings', {
onEnter: () => {
document.getElementById('view-settings').style.display = 'block';
loadSettings();
},
onLeave: () => {
document.getElementById('view-settings').style.display = 'none';
}
});
// 初始化路由
chrome.storage.session.get('currentRoute', (data) => {
router.navigate(data.currentRoute || 'home');
});
七、状态持久化策略
Side Panel的核心优势之一是跨页面导航时保持状态。Chrome提供了多种存储方案，我们需要根据数据特性选择合适的策略：
| 存储方案 | 作用域 | 持久性 | 适用场景 |
|---|---|---|---|
| chrome.storage.session | 扩展生命周期 | 浏览器关闭即丢失 | 临时UI状态、路由、表单草稿 |
| chrome.storage.local | 设备级 | 永久 | 用户设置、笔记、摘要缓存 |
| chrome.storage.sync | 跨设备同步 | 永久 | 用户偏好、主题设置 |
| 内存变量 | 页面生命周期 | Side Panel关闭即丢失 | 实时计算结果、滚动位置 |
最佳实践是分层存储：关键设置用sync，业务数据用local，临时状态用session：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
class StateManager {
constructor() {
this.memoryCache = new Map();
}
// 持久设置（跨设备同步）
async getSetting(key) {
const data = await chrome.storage.sync.get(key);
return data[key];
}
async setSetting(key, value) {
await chrome.storage.sync.set({ [key]: value });
}
// 业务数据（本地持久）
async getData(key) {
const data = await chrome.storage.local.get(key);
return data[key];
}
async setData(key, value) {
await chrome.storage.local.set({ [key]: value });
}
// 临时状态（会话级）
async getSessionState(key) {
const data = await chrome.storage.session.get(key);
return data[key];
}
async setSessionState(key, value) {
await chrome.storage.session.set({ [key]: value });
}
// 内存缓存（最快，但不持久）
getCache(key) {
return this.memoryCache.get(key);
}
setCache(key, value) {
this.memoryCache.set(key, value);
}
// 保存完整的应用状态快照
async saveSnapshot() {
const snapshot = {
scrollPositions: {},
formDrafts: {},
expandedSections: {},
timestamp: Date.now()
};
// 收集各区域滚动位置
document.querySelectorAll('.scrollable').forEach(el => {
snapshot.scrollPositions[el.id] = el.scrollTop;
});
// 收集表单草稿
document.querySelectorAll('input, textarea').forEach(el => {
if (el.value) {
snapshot.formDrafts[el.id] = el.value;
}
});
await chrome.storage.session.set({ appSnapshot: snapshot });
}
// 恢复状态快照
async restoreSnapshot() {
const data = await chrome.storage.session.get('appSnapshot');
const snapshot = data.appSnapshot;
if (!snapshot) return;
// 恢复滚动位置
Object.entries(snapshot.scrollPositions).forEach(([id, pos]) => {
const el = document.getElementById(id);
if (el) el.scrollTop = pos;
});
// 恢复表单草稿
Object.entries(snapshot.formDrafts).forEach(([id, value]) => {
const el = document.getElementById(id);
if (el) el.value = value;
});
}
}
const state = new StateManager();
// 定期自动保存（每30秒）
setInterval(() => state.saveSnapshot(), 30000);
// 页面卸载前保存
window.addEventListener('beforeunload', () => {
state.saveSnapshot();
});
八、样式设计与响应式适配
Side Panel的宽度由浏览器控制，通常在300-400px之间，用户可以拖拽调整。CSS设计需要充分考虑这一约束：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
:root {
--sp-bg: #ffffff;
--sp-text: #1a1a1a;
--sp-border: #e0e0e0;
--sp-primary: #1a73e8;
--sp-surface: #f8f9fa;
--sp-radius: 8px;
}
@media (prefers-color-scheme: dark) {
:root {
--sp-bg: #202124;
--sp-text: #e8eaed;
--sp-border: #3c4043;
--sp-primary: #8ab4f8;
--sp-surface: #292a2d;
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 13px;
line-height: 1.5;
color: var(--sp-text);
background: var(--sp-bg);
overflow-x: hidden;
}
.panel-container {
display: flex;
flex-direction: column;
height: 100vh;
}
.panel-header {
padding: 12px 16px;
border-bottom: 1px solid var(--sp-border);
flex-shrink: 0;
}
.panel-header h1 {
font-size: 16px;
margin-bottom: 8px;
}
.view-tabs {
display: flex;
gap: 4px;
}
.tab {
flex: 1;
padding: 6px 8px;
border: none;
background: transparent;
color: var(--sp-text);
border-radius: var(--sp-radius);
cursor: pointer;
font-size: 12px;
transition: background 0.2s;
}
.tab:hover {
background: var(--sp-surface);
}
.tab.active {
background: var(--sp-primary);
color: white;
}
.panel-content {
flex: 1;
overflow-y: auto;
padding: 16px;
}
.view {
display: none;
}
.view.active {
display: block;
}
.primary-btn {
width: 100%;
padding: 10px;
background: var(--sp-primary);
color: white;
border: none;
border-radius: var(--sp-radius);
font-size: 14px;
cursor: pointer;
transition: opacity 0.2s;
}
.primary-btn:hover {
opacity: 0.9;
}
.note-item {
padding: 8px 12px;
margin-bottom: 8px;
background: var(--sp-surface);
border-radius: var(--sp-radius);
border-left: 3px solid var(--sp-primary);
}
.setting-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--sp-border);
}
九、调试技巧与常见问题
9.1 调试Side Panel
Side Panel页面可以通过右键点击面板内容，选择”检查”来打开DevTools。这与调试Popup类似，但有一个重要区别：Side Panel的DevTools在面板关闭时不会断开连接，这对于调试持久化逻辑非常有用。
在Service Worker中，你可以通过以下方式验证Side Panel状态：
2
3
4
5
6
7
// 检查当前面板行为设置
chrome.sidePanel.getPanelBehavior().then(console.log);
// 检查特定标签页的面板选项
chrome.sidePanel.getOptions({ tabId: 1 }).then(console.log);
9.2 常见问题与解决方案
问题1：点击图标没有打开Side Panel
- 检查是否声明了
1sidePanel
权限
- 检查
1side_panel.default_path
是否指向存在的文件
- 确认调用了
1setPanelBehavior({ openPanelOnActionClick: true })
或使用了
1sidePanel.open() - 如果同时设置了popup，popup会优先——确保manifest中没有
1action.default_popup
问题2：Side Panel内容在不同标签页间共享
默认情况下，所有标签页共享同一个Side Panel实例。如果需要标签页级别的隔离，可以使用
1 | setOptions({ tabId }) |
设置不同标签页显示不同的path，或者在JavaScript中根据当前标签页动态切换内容。
问题3：Side Panel闪烁或重新加载
这通常是因为
1 | setOptions |
的path参数变化导致页面重新加载。解决方法：保持path不变，通过消息传递在同一个页面内切换内容，而非切换path。
9.3 性能优化建议
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 使用requestAnimationFrame批量更新
function batchUpdate(updates) {
requestAnimationFrame(() => {
updates.forEach(fn => fn());
});
}
// 节流消息监听，避免页面MutationObserver过频推送
let lastUpdateTime = 0;
const THROTTLE_MS = 500;
chrome.runtime.onMessage.addListener((message) => {
if (message.type === 'PAGE_UPDATED') {
const now = Date.now();
if (now - lastUpdateTime < THROTTLE_MS) return;
lastUpdateTime = now;
updatePanelInfo(message);
}
});
// 使用chrome.storage.onChanged监听代替轮询
chrome.storage.onChanged.addListener((changes, area) => {
if (area === 'local' && changes.notes) {
renderNotes(changes.notes.newValue);
}
});
十、发布前检查清单
在提交Chrome Web Store之前，确保以下各项全部通过：
- manifest.json中声明了
1sidePanel
权限和
1side_panel配置
- 所有Side Panel页面的HTML、CSS、JS文件包含在扩展包中
- Content Script正确注入且不与Side Panel产生通信死锁
- 深色模式下UI显示正常
- 在不同宽度（280px-500px）下面板布局正确
- 面板关闭再打开后状态正确恢复
- 导航到不同页面后面板内容正确更新
- 无console报错和未处理的Promise rejection
- Service Worker休眠后Side Panel功能正常恢复
Side Panel API为Chrome扩展开发带来了全新的交互范式。与Popup的瞬时性不同，Side Panel的持久显示特性使得它特别适合需要持续交互的工具类扩展。通过合理的状态管理、与Content Script的深度协作以及精细的样式适配，开发者可以构建出体验媲美原生应用的侧边栏工具。随着Chrome持续完善该API（未来可能支持更多面板定制能力），Side Panel有望成为Chrome扩展开发的主流UI模式。