返回知识库

浏览器插件 · 扩展的组成

弹出页Extension Popup

弹出页是点工具栏图标才出现的小窗,一关掉就被销毁,状态全部清空。要留下的数据存进 chrome.storage;需要常开时改用侧边栏。

写一句草稿,关掉,再打开

点工具栏图标打开弹出页,在里面写一句草稿,再点一下网页正文。重新打开时,看草稿还在不在;再换保存方式和侧边栏对照。

知识点:弹出页活不过一次点击

刚才丢草稿和读回草稿的差别,就是这几条。

  • 弹出页是点工具栏图标才出现的小窗,点网页别处、切标签页都会让它关闭。
  • 关闭时整个弹出页被销毁,里面的变量和没保存的输入一起消失。
  • 要留下的数据写进 chrome.storage,重新打开时读回来。
  • 侧边栏不会因为点网页而关闭,适合一边看网页一边操作的长任务。

什么时候用弹出页、怎么验收

弹出页适合几秒钟就做完的事。

  • 适合:开关某个功能、看一眼状态、收藏当前页、快速设置。
  • 不适合:长表单、边看网页边写的笔记、需要一直显示的结果——改用侧边栏或网页内注入的界面。
  • 注意:宽高有限(大约 800×600 以内),别塞完整的后台页面。
  1. 提示词里写明:输入要自动存入 chrome.storage,打开时读回。
  2. 验收时写一半,点网页别处,再打开,看内容还在。
  3. 如果你发现自己总要边看网页边用它,让 AI 改成 side_panel。

正反例:同一个笔记弹出页

界面一样,差别只在数据存在哪。

正例输入即存 storage,打开时读回

用户写到一半去网页上查资料,回来点图标,草稿还在。

反例草稿只放在弹窗的变量里

用户点一下网页想复制一句话,弹窗关了,写的东西全没了,还以为是 bug。

快速自测

用户反馈:「在插件弹窗里填表,切去别的标签页查个号码,回来表就空了。」最合适的改法是?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。