浏览器扩展页面开发指南

扩展页面是浏览器原生支持的特殊页面类型，包括弹出窗口、选项页面、侧边栏面板、新标签页以及开发者工具页面等。这些页面为扩展提供了丰富的用户交互界面。

⚠️

重要提示： 创建新的扩展页面后，请手动刷新扩展以使更改生效。在某些情况下，运行时可能无法自动检测到页面文件的变更。

弹出窗口页面

弹出窗口是浏览器扩展中最常见的页面类型，当用户点击工具栏中的扩展图标时会以小对话框形式显示。

创建弹出窗口

创建一个 popup.tsx 文件或 popup/index.tsx 文件，并导出一个默认的 React 组件：

popup.tsx


function Popup() {
  return (
    <div style={{ padding: 16, minWidth: 300 }}>
      <h2>欢迎使用我的扩展</h2>
      <p>这是一个简单的弹出窗口示例</p>
    </div>
  )
}
 
export default Popup

创建完成后，您的弹出窗口即可立即使用 🚀！

完整示例请参考 with-popup

选项页面

选项页面为用户提供了扩展设置和配置的专用界面。

创建选项页面

创建一个 options.tsx 或 options/index.tsx 文件：

options.tsx


function Options() {
  return (
    <div style={{ padding: 20 }}>
      <h1>扩展设置</h1>
      <p>在这里配置您的扩展选项</p>
    </div>
  )
}
 
export default Options

具体实现示例请参考 with-options-ui

新标签页页面

新标签页页面可以替换浏览器的默认新标签页，为用户提供定制化的浏览体验。

创建新标签页

创建一个 newtab.tsx 文件或 newtab/index.tsx 文件：

newtab.tsx


function NewTab() {
  return (
    <div style={{ textAlign: 'center', padding: 50 }}>
      <h1>欢迎使用我的新标签页</h1>
      <p>享受定制化的浏览体验</p>
    </div>
  )
}
 
export default NewTab

Plasmo 会自动处理所有必要的配置，让您的新标签页正常运行 🤘！

完整示例请参考 with-newtab

侧边栏面板

侧边栏面板允许扩展在浏览器侧边栏中显示持久化的用户界面，与用户的浏览活动形成互补。

创建侧边栏面板

创建一个 sidepanel.tsx 文件或 sidepanel/index.tsx 文件：

sidepanel.tsx


function SidePanel() {
  return (
    <div style={{ padding: 16 }}>
      <h3>扩展侧边栏</h3>
      <p>这里可以显示实时信息或快捷操作</p>
    </div>
  )
}
 
export default SidePanel

Plasmo 会自动配置并在侧边栏中渲染您的界面。

完整示例请参考 with-sidepanel

开发者工具页面

开发者工具页面是专为开发者设计的调试和分析界面，在用户打开扩展的开发者工具时显示。

创建开发者工具页面

创建一个 devtools.tsx 文件或 devtools/index.tsx 文件：

devtools.tsx


function DevTools() {
  return (
    <div style={{ padding: 16 }}>
      <h2>扩展开发者工具</h2>
      <p>这里可以显示调试信息和性能数据</p>
    </div>
  )
}
 
export default DevTools

Plasmo 会自动处理所有配置细节！

完整示例请参考 with-devtools

最佳实践建议

💡

用户体验： 保持扩展页面的简洁性和响应速度，避免过度复杂的界面设计影响用户体验。

⚠️

性能考虑： 注意控制扩展页面的资源使用，避免影响浏览器整体性能，特别是在低性能设备上。

🚀

测试建议： 在不同浏览器和屏幕尺寸下测试您的扩展页面，确保良好的兼容性和响应式设计。

页面间通信

不同扩展页面之间可以通过以下方式进行通信：

消息传递 API：使用 chrome.runtime.sendMessage 和 chrome.runtime.onMessage
存储 API：通过 chrome.storage 共享数据状态
广播通信：利用 chrome.runtime 的事件系统

通过合理设计扩展页面架构，您可以构建出功能丰富、用户体验优秀的浏览器扩展。