扩展内置页面
浏览器扩展包含几个内置页面,完成浏览器扩展本身的行为。他们包括以下几种 :
开发内置页面的时候,请确保手工刷新浏览器扩展资源。因为,他们的运行环境,没有监听 web socket
的 变化。
Popup Page
Popup Page
是我们开发浏览器扩展接触的第一个页面,他可以在用户点击浏览器扩展 icon 的时候弹出,触发。
在 plasmo
目录创建 popup.tsx
或者 popup/index.tsx
。
其中导出的 React dom
结构,会展示到 Popup Page
。
Options Page
Options Page
一般用于扩展本身的配置,右键点击扩展 icon ,选择 选项,将打开对应的页面。
在 plasmo
目录创建 options.tsx
或者 options/index.tsx
。
其中导出的 React dom
结构,会展示到 Options Page
。
New Tab Page
这个页面是在浏览器中新建 Tab 页面的时候,出现的默认页面。 有些浏览器会展示默认的页面,默认首页 等。
各个 扩展之间的 这个选项会互相覆盖。
在 plasmo
目录创建 newtab.tsx
或者 newtab/index.tsx
。
其中导出的 React dom
结构,会展示到 New Tab Page
。
Side Panel Page
侧面板允许扩展在侧面板中显示自己的UI,从而实现用户在不同标签页之间导航时可以保持打开状态,成为一个持久的用户界面元素。
这个特性不能保证在基于 Chromium 的所有浏览器上完美工作,比如 Arc 无法使用,Brave 某些状况无法关闭。
创建一个sidepanel.tsx文件或一个sidepanel/index.tsx文件,Plasmo将负责其余的工作,以在侧面板中呈现UI。
Dev Tools Page
这个页面会在浏览器调试 Panel 中展示。
在 plasmo
目录创建 devtools.tsx
或者 devtools/index.tsx
。
这个和其他内置页面不太一样。创建 panlel 可能 需要 chrome.devtools
的相关 API 。