Skip to main content

扩展内置页面

浏览器扩展包含几个内置页面,完成浏览器扩展本身的行为。他们包括以下几种 :

tip

开发内置页面的时候,请确保手工刷新浏览器扩展资源。因为,他们的运行环境,没有监听 web socket 的变化。

Popup Page 是我们开发浏览器扩展接触的第一个页面,他可以在用户点击浏览器扩展 icon 的时候弹出,触发。 在 plasmo 目录创建 popup.tsx 或者 popup/index.tsx 。 其中导出的 React dom结构,会展示到 Popup Page

参考示例 with-popup

Options Page

Options Page 一般用于扩展本身的配置,右键点击扩展 icon ,选择 选项,将打开对应的页面。 在 plasmo 目录创建 options.tsx 或者 options/index.tsx 。 其中导出的 React dom结构,会展示到 Options Page

参考示例 with-options

New Tab Page

这个页面是在浏览器中新建 Tab 页面的时候,出现的默认页面。 有些浏览器会展示默认的页面,默认首页 等。

tip

各个 扩展之间的 这个选项会互相覆盖。

plasmo 目录创建 newtab.tsx 或者 newtab/index.tsx 。 其中导出的 React dom结构,会展示到 New Tab Page

参考示例 with-newtab

Side Panel Page

侧面板允许扩展在侧面板中显示自己的UI,从而实现用户在不同标签页之间导航时可以保持打开状态,成为一个持久的用户界面元素。

warning

这个特性不能保证在基于 Chromium 的所有浏览器上完美工作,比如 Arc 无法使用,Brave 某些状况无法关闭。

创建一个sidepanel.tsx文件或一个sidepanel/index.tsx文件,Plasmo将负责其余的工作,以在侧面板中呈现UI。

参考示例 with-sidepanel

Dev Tools Page

这个页面会在浏览器调试 Panel 中展示。 在 plasmo 目录创建 devtools.tsx 或者 devtools/index.tsx

tip

这个和其他内置页面不太一样。创建 panlel 可能 需要 chrome.devtools 的相关 API 。

参考示例 with-devtools