返回知识库

浏览器插件 · 认识扩展

浏览器扩展Browser Extension

浏览器扩展装在浏览器里,能在用户打开的别人的网页上读取和修改内容;普通网页只能管自己的域名,这就是要做扩展的理由。

先在别人的文章里收藏一句话

需求是:读者在任何文章页上划词就能收藏。默认交付形态是网页,先在 news.example 的文章里试一次,再换成扩展,最后去浏览器设置页看看边界。

交付形态
https://news.example/article/42工具栏:没有扩展
别人的网站 · news.example

为什么扩展能做网页做不到的事

浏览器扩展可以在你打开的任何网页里运行。

普通网页只能管好自己域名下的页面。

收藏夹 0 条 · 存在 notes.app 自己的页面里

当前交付形态是网页。下一步:点句子旁的「划选并收藏」,看文章有没有变化。

知识点:扩展住在浏览器里

面板里的失败标记、高亮和徽标已经演过,这里只给命名。

  • 扩展装在浏览器里,能在用户打开的别人的网页上读取和修改内容。
  • 普通网页只能管自己域名下的页面,碰不到其他标签页里的网站。
  • 扩展要用户主动安装,图标出现在工具栏;它不像网址那样点开就能用。
  • 浏览器设置页(chrome://)和应用商店页面受保护,扩展在那里不运行。

什么时候做扩展、怎么开始

先问一句:这件事是不是必须发生在别人的网页上?

  • 适合:划词翻译、网页高亮、比价、表单自动填写、给某个网站加按钮。
  • 不适合:功能只在你自己的网站里发生,做网页更简单,发个链接就能用。
  • 要考虑:用户得先安装;手机上的 Chrome 基本不支持扩展,主要是电脑端。
  1. 跟 AI 说清楚要在哪些网站上做什么改动。
  2. 要求用 Manifest V3 写,权限越少越好。
  3. 在 chrome://extensions 本地加载,打开目标网站验收。
  4. 想给别人用,再走商店上架审核。

正反例:同一个划词收藏需求

目标一样,只差交付形态。

正例做成扩展,只在文章页上运行

读者在 news.example 里选中文字就能收藏,收藏夹徽标跟着变。

反例做成网页,让读者复制粘贴过来

网页碰不到别人的文章,读者每次都要切标签页、手动复制。需求本身没被满足。

快速自测

你想做一个「在自己的博客里加一个点赞按钮」的功能。该做成什么?

继续查证

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

下一步学

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

看看真实的项目蓝图里,浏览器扩展是怎么被用上的。