XDM,最近市场的寒气传递到你们那了吗?一直想这个独立产品出来,思来想去,chrome extension 是成本比较低并且能落地的小产品了,所以就开发了一款network 资源管理插件,希望可以给大家做自己的产品带来一些小小的灵感. 插件地址
需求分析
有需求才有市场,为什么需要做个插件,主要有以下需求,
- 有些用户不懂得怎么到network面板去下载图片,如ui设计师,某些产品
- 我有时候需要下载网站上的3D资源,如果是glb还好,但是如果是gltf的话,那依赖文件一大堆
- devtool如果不打开就打开网页的话,看不到网站上的资源地址
应该还可以其他的,只是我还没想到,先围绕以上3需求,所以我希望这个插件有以下功能
- 可以对网站上的资源根据目录进行分类,
- 可以对指定资源进行下载,也可以按目录进行下载
- 对资源提供预览功能,如果是3D模型,我还希望可以能对模型进行调试.如果是图片资源,可能可以允许对图片进行其他操作
技术分析
chrome extension 的相关技术我就不详细介绍了,简单说下就是extension主要分4个模块,
background
后台模块,主要常驻在浏览器后台运行,不会随着浏览器刷新而刷新content
前台模块,可以注入到当前打开的网站,会跟着页面一起刷新popup
模块,点击右上角插件图标的弹窗,不会随着浏览器刷新而刷新devtool
模块,开发者工具那边的tab项
对于我们插件的功能,需要用到backgroud
模块,在这个环境下,对浏览器左右请求到的资源进行收集分类,然后发送到前台页面. 然后我们需要用到popup
模块对收集资源进行展示和其他操作.考虑到popup
弹出来如果失焦就会缩回去,所以我们createWindow
,然后在这个弹出的独立tab页上注入popup.html
对于图片资源,先只要简单预览和提供下载就行了, 如果是3D模型资源,可以使用Babylonjs
对模型进行查看,另外这个库也提供的现成的模型调试库@babylonjs/inspector
,可以直接使用,当然如果模型加密了,就解析不了
实现要点
这里就挑重点说下实现的一些细节.
- 怎么创建一个独立的tab用于渲染 popup 页面
javascript
chrome.windows.create(
{
url: chrome.runtime.getURL(`index.html?contentId=${tabs[0]?.id}`),
type: "popup",
width: 1024,
height: 860,
// left: (tab.width - 800) * 0.5,
// top: (tab.height - 800) * 0.5,
},
(win) => {
console.log("ok");
},
);
- babylonjs 无法在chrome extension中加载draco压缩模型失败
ini
// chrome extension V3之后,无法加载外部的js脚本了,可能需要在哪里配置,目前还不知道.所以需要把相关的脚本都下载到本地,另外解压时worker也无法使用,需要关闭
DracoCompression.DefaultNumWorkers = 0;
DracoCompression.Configuration = {
decoder: {
wasmUrl: "/libs/draco_wasm_wrapper_gltf.js",
wasmBinaryUrl: "/libs/draco_decoder_gltf.wasm",
fallbackUrl: "/libs/draco_decoder_gltf.js",
},
};
总结
以上是我对我做的插件的一些总结,希望可以帮助到大家.如果对插件感兴趣,可以在chrome store搜索 Network Download Helper
,不好用也不要给我差评哈. 扩展的仓库地址Github