从开发到上架：plasmo 与 cursor 助力浏览器插件发布应用商店全流程解析

代码小学僧
1,083 阅读5分钟

前言

在上班闲聊群里，群友分享了很多有趣的浏览器收藏夹网站。我注意到自己也收藏了不少精品小众网站，但这些网站在搜索引擎中的收录和权重较低。所以我在想，是否有一个插件或工具，可以基于浏览器收藏夹进行搜索呢？

后来和同桌的同事讨论了下，发现搜索引擎自带的高级搜索功能，特别是搜索运算符，允许我们指定在某些网站内搜索关键词。很多论坛的搜索功能就是基于这种方式实现的，比如用 '关键词 site:论坛地址'。我们还可以通过结合 'OR' 运算符，将多个网站地址拼接在一起。谷歌和必应都支持这种搜索方式。

button site:example.com OR site:example2.com

制作浏览器插件

因此，我们只需要实现一个简洁的界面，方便用户勾选收藏夹中的网址，然后通过代码将关键词与选中的网址拼接成查询链接，理论上是可行的，接下来开始实践！

之前就听说过 plasmo 浏览器插件开发的脚手架，方便快速开发浏览插件，本次开发就使用一下。具体使用细节可以参考官方文档和其他优质文章，总的来说，plasmo 封装了一些约定，按照这些约定来开发就很方便，非常实用。

这里是成品的样子 插件已审核通过 下载地址

demo.png

使用 tailwind + shadcn 写的 UI 界面, 大家做的时候可以使用官方的 tailwind quickStart 模版

开发过程也非常简单 使用 cursor 的 @Doc 功能把 plasmo 的文档提供给 cursor，或者是在根目录创建一个 cursorrules 文件说明项目使用到的框架与写法要求。之后就可以开始愉快的拷打 AI 了 😆

image.png

主要的目标就是拼一个类似 [关键词] site:xxx1.com OR site:xxx2.com的链接，主要代码如下

const handleSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter" && !isComposing && searchKeyword.trim()) {
      const searchUrl = constructSearchUrl(
        searchKeyword,
        new Set(selectedUrls),
        searchEngine
      )
      window.open(searchUrl, "_blank")
    }
  }
  
export const constructSearchUrl = (
  keyword: string,
  selectedUrls: Set<string>,
  engine: "google" | "bing"
): string => {
  const siteQuery = Array.from(selectedUrls)
    .map((url) => {
      const domain = new URL(url).hostname
      return `site:${domain}`
    })
    .join(" OR ")
  const searchQuery = `${keyword} ${siteQuery}`
  return engine === "google"
    ? `https://www.google.com/search?q=${encodeURIComponent(searchQuery)}`
    : `https://www.bing.com/search?q=${encodeURIComponent(searchQuery)}`
}

还有就是插件点击出现的这部分叫 popup，他每次出现都是重新加载的，所以要持久化的记录勾选状态，展开收起的节点之类的就需要存一下，之前的一个版本是 useState + localforage 存一下，打开的时候再复原。后面发现可以用 plasmo 提供的 useStorage 替代原来的 useState + useStorage 组合 需要复原状态的都用 useStorage 来写。

chrome 插件存储区域区分

默认的存储是存在 chrome 的 sync，当我存全部标签页的时候会报错，就需要改成

const storage = new Storage({
    area: "local"
})

const [selectedUrls, setSelectedUrls] = useStorage<string[]>(
    {
      key: "selectedUrls",
      instance: storage
    },
    []
)

调试在 devtool 发现了插件存储的分组 之前都没留意过 查看和修改扩展程序存储空间

select-context_1920.png

打包上线 + 注册开发者账号

如果你制作的浏览器插件是给公司内部人员使用的话可以直接 pnpm build && pnpm package 打包出个 zip 文件发给要用的同事就好了。

要是想要上架到谷歌浏览器插件商店，让更多人使用到你制作的插件，需要注册开发者账号(5美元)后再提交审核。 注册账号支付的 5 美元需要用到海外信用卡或者 visa 卡支付，我没有😰，后面找到的途径是开通虚拟信用卡花了 80 元。

注册成功后上传打包好的 zip 文件，这里是参考了这篇文章的流程 w2solo.com/topics/5378

插件的 logo 我是用 AI 生成的，填写资料的过程中上传插件截图需要 1280x800 或 640x400 像素，我用截图工具调整到了这个宽高后还是不行。（弄了十几分钟 🤡）后面找到方法就是把截图拖到 figma 之类的软件，点击图片在右侧调整好到 1280x800 再导出就符合标准可以上传成功了。

然后插件功能介绍可以用 cursor @codebase 功能让他来写一个，写个中英双语的，写完自己再小修一下，他有的时候吹的太离谱😅。

要所有必填项都填好提交审核按钮才可以点击，第一次提审后过了一天被拒绝了，因为隐私政策：提供隐私政策 URL，说明数据收集和使用情况 这一项我填的无。被拒绝后搜了下原来要填写一个比较详细的声明文档，还需要是 url 地址可访问。

在网上找到了一键生成的网站，填写软件名称，联系邮箱地址，然后生成 txt 文件或者 html，想要部署的话需要交 5 块钱😂，那我必不可能交钱的，就下载 html 后用 netify 部署了个静态网站，填写了部署后的 url 链接再次提审，目前审核中。还有看到网友分享可以用腾讯文档的分享网页功能，也能生成一个 url。

待补充功能

其实我最开始想要的功能是在日常谷歌搜索的时候可以根据我全部收藏夹中的网站查询下这个关键词类似下图这样。我收藏了一些 tailwind 组件库的网站，我搜 button 关键词的时候，左侧是搜索引擎自己的界面，右侧的数据就是 button site:xxx.com OR (拼接上我所有的收藏网站)，然后吧结果呈现出来。

demo2.png

后面发现一个问题，在收藏网站较少的情况下能正常使用，但是收藏网站较多的时候好像 site 搜索失效了在 bing不行，查询结果返回的都是收藏的站点 ，谷歌倒是正常。而且生成的链接超级长，搜索引擎不会接受那么长的查询条件，所以目前这个方法不行，小伙伴们有什么新的想法可以评论区交流下哈。

源码

源码地址: github.com/LLmoskk/boo…

avatar
文章
阅读
粉丝