写一个Chrome Network资源收集插件

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,可以直接使用,当然如果模型加密了,就解析不了

实现要点

这里就挑重点说下实现的一些细节.

  1. 怎么创建一个独立的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");
			},
		);
  1. 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

相关推荐
小镇程序员3 小时前
vue2 src自定义事件
前端·javascript·vue.js
AlgorithmAce5 小时前
Live2D嵌入前端页面
前端
nameofworld5 小时前
前端面试笔试(六)
前端·javascript·面试·学习方法·递归回溯
前端fighter6 小时前
js基本数据新增的Symbol到底是啥呢?
前端·javascript·面试
GISer_Jing6 小时前
从0开始分享一个React项目:React-ant-admin
前端·react.js·前端框架
川石教育6 小时前
Vue前端开发子组件向父组件传参
前端·vue.js·前端开发·vue前端开发·vue组件传参
GISer_Jing7 小时前
Vue前端进阶面试题目(二)
前端·vue.js·面试
乐闻x7 小时前
Pinia 实战教程:构建高效的 Vue 3 状态管理系统
前端·javascript·vue.js
weixin_431449687 小时前
web组态软件
前端·物联网·低代码·编辑器·组态
橘子味小白菜7 小时前
el-table的树形结构后端返回的id没有唯一键怎么办
前端·vue.js