当前位置：首页 > news >正文

Console Importer浏览器插件的编译及制作成.crx浏览器插件的步骤

news 来源：原创 2025/5/16 14:05:13

近日由于下载Console Importer浏览器插件(一个前端调试窗口方便引下第三方库便于学习测试的插件)找不到资源，于是找到该插件的源码，地址：https://github.com/pd4d10/console-importer），发现该插件基于一款名为“Plasmo”的框架开发，专用于开发各浏览器扩展程序的开发。

Plasmo简介（官方文档：https://docs.plasmo.com/）

Plasmo 是一个专门开发浏览器扩展程序的框架，旨在简化浏览器扩展的开发流程。它提供了丰富的功能和工具，帮助开发者快速构建和部署浏览器扩展。Plasmo 框架支持多种现代前端技术，如 React 和 TypeScript，使得开发者可以利用这些技术来构建复杂的浏览器扩展。

就像是浏览器插件开发领域的 Next.js

编译插件：

pnpm install（由于有些引用资源地址访问不太稳定，可以多执行几次试试直到全部获取成功不出错）
可选步骤 npm run dev（或 pnpm dev 或 pnpm plasmo dev）编译后的目录可直接拖入到浏览器的扩展程序管理中测试（Plasmo将为您的扩展创建一个开发包和一个实时重新加载的开发服务器，在文件更改时自动更新您的扩展包，并在源代码更改时重新加载浏览器。它还用DEV |作为扩展名的前缀，并使图标变为灰色，以区分开发和生产扩展包。）
pnpm run build（或 pnpm build 或 pnpm plasmo build）编译后的目录可直接拖入到浏览器的扩展程序管理中使用
pnpm run package（或 pnpm package 或 pnpm plasmo package）将编译后的目录打包成zip压缩包，也可将此压缩包拖入到浏览器的扩展程序管理中来使用，同样会是显示未封装的扩展程序图标（实际上通过浏览器扩展商店安装的.crx就是个压缩包，包含编译后的目录文件）

制作crx浏览器插件

以下介绍如何如何制作一个crx插件

https://jingyan.baidu.com/article/a3a3f8111b80fd8da2eb8ae4.html

方法/步骤

一个简单的插件需要manifest.json、popup.html、popup.js、content.js、background.html、background.js、css文件。当然，这些除了manifest.json都不是必须的，可以根据自己的需要删减或增加。把这些文件都放在同一个目录下，待会生成扩展程序待用。

最主要的就是编写manifest.json了，可以参看如下：

{//扩展信息"name": "Test","version": "1.0","manifest_version": 2,"description": "The first extension that I made.",//点击扩展，弹出窗体"browser_action": {"default_popup": "popup.html"},//扩展图标"icons": {"128": "icon.png"},//后台执行的脚本//"background": {//    "persistent": true,//    "scripts": ["background.js"]//},//扩展需要用到的权限"permissions": ["<all_urls>", "activeTab"]
}