我上线了用 AI 写的浏览器插件—浏览器插件发布上线保姆级教程

✨前言

Hi，我是松柏！

前几天我分享了自己用 AI 做的一个用于书签管理的浏览器小插件，也是比较受大家欢迎，在我公众号没什么粉丝基础的情况下加一起有6000多的阅读：

那既然这样，我就想着不如把这个插件上线了，这样大家用起来更方便一些，现在已经可以在火狐浏览器的插件市场直接搜索安装使用啦：

火狐：https://addons.mozilla.org/zh-CN/firefox/addon/bookmark-genie

Edge 还在审核中(时间11-09)：

（Google 浏览器发布插件要付 5 美刀😭，就没上线）

因为我也是第一次上线浏览器插件，所以就把插件上线的详细流程以及容易踩的一些坑记录了下来，通过这篇文章分享给大家，快收藏起来⭐️以备不时之需吧。

点赞关注，我们发车啦！

发布流程

火狐

“如果有页面打不开，可以尝试换一下网络

1、注册账号

首先来到插件市场，点击右上角的登录：

接着就是正常的注册账号流程，大家按需注册即可：

2、提交插件

注册成功之后，我们回到插件市场，然后进入开发者中心：

然后选择 提交新附加组件：

为了省事的话，可以直接选择 在此网站上：

选择打包后的文件：

这里有两个注意事项：

1）因为在开发时，我们遵守的时 google 浏览器的标准，这些标准在火狐浏览器不被完全支持或者兼容，所以我们需要修改部分 manifest.json 的配置，大家发布的时候可以参考我修改后的配置文件：

{
  "manifest_version": 2,
"name": "书签精灵",
"version": "0.0.1",
"description": "使用 AI 智能搜索书签",
"permissions": [
    "bookmarks",
    "storage",
    "activeTab",
    "tabs"
  ],
"background": {
    "scripts": ["background/background.js"],
    "persistent": false
  },
"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content/content.js"],
      "run_at": "document_end"
    }
  ],
"browser_action": {
    "default_popup": "src/popup/index.html",
    "default_title": "书签精灵",
    "default_icon": {
      "16": "icons/icon.png",
      "32": "icons/icon.png",
      "48": "icons/icon.png",
      "128": "icons/icon.png"
    }
  },
"icons": {
    "16": "icons/icon.png",
    "32": "icons/icon.png",
    "48": "icons/icon.png",
    "128": "icons/icon.png"
  },
"commands": {
    "open-ai-chat": {
      "suggested_key": {
        "default": "Ctrl+K",
        "mac": "Command+K"
      },
      "description": "打开书签精灵"
    }
  },
"web_accessible_resources": [
    "assets/*"
  ],
"browser_specific_settings": {
    "gecko": {
      "id": "2268143474@qq.com",
      "data_collection_permissions": {
        "required": ["none"]
      }
    }
  }
}

2）打包时，一定要进入文件夹内再压缩，保证解压后 manifest.json 在一级目录里，比如我这里是先进入打包后的 dist 目录内，然后全选进行压缩：

因为如果直接在文件夹外压缩 dist 目录，解压后得到的就是一个 dist 文件夹，解析就会失败。

如果打包后的文件有问题，火狐也会给出原因，按照提示修改即可：

3、填写其他表单项

然后的话就是一些其他的常规表单项了，大家按照真实情况正常填写，比如：

4、完善插件信息

完成上述步骤之后，回到开发者中心，补充插件的信息：

比如概述、类别、标签、图标这些内容：

这些都是为了让用户更精准的搜索到我们的插件，所以大家可以尽可能精准、详细的描述插件的作用。

5、过审

到这里基本就完成了，火狐会给我们发一封邮件告知插件正在审核中：

我这里审核花了4天，通过之后，同样也会有一封邮件：

然后我们的插件就可以被正常的在插件中心搜索和安装啦：

也可以通过在线链接直接访问：https://addons.mozilla.org/zh-CN/firefox/addon/bookmark-genie/，欢迎使用火狐浏览器的小伙伴安装体验，有问题也可以随时反馈给我。

到这里我们的插件就算是成功的上线到了火狐浏览器啦！

Edge

1、注册账号

跟火狐一样，这里也是需要先注册一个账号，进入扩展中心，然后选择构建扩展：

进入页面之后会要求注册登录，按照要求一步步的来就好：

填表单的时候有一个非常坑的地方：

这个输入框是必填的，但是并没有标 * 号，而且不能随便填，需要填地址的首拼，比如我这里填的是 SH （上海）。如果不填或者不合法，会出现异常：

通过之后，应该会看到这样一个页面：

我们点击 创建新扩展 开始发布插件。

2、发布插件

发布插件的时候需要上传代码压缩包、填写表单项，跟火狐的方式大差不差，按照提示填写，我这里就不赘述了。跟火狐有一点不同的是，这里上传代码的时候配置不用修改 manifest.json 配置，可以我们项目的默认值保持一致。

3、等待过审

都填写完成之后，就是等待过审了，Edge 的审核速度比较慢，说是七个工作日内：

到写完这篇文章之前，我的插件一直没过审，所以暂时没法给大家分享成功之后的流程。

🎯结语

到这里我们就成功的把插件发布上线啦，如果有帮助的话，欢迎点赞和关注呀，下篇文章见，拜拜👋🏻！