前几天看到个 沸点，里面的动图很棒，心存收藏之意。
但掘金沸点的动图收藏，可不是简单的右键->图片另存为就行的，DDDD
无独有偶，经常摸鱼的 jym 一定知道，有个兄弟不定期发送《猫和老鼠》的动图，有时候想把这集猫和老鼠保存下来，也需要费一番功夫，怎么做呢？
1. 简单方法
根本不需要什么在线格式转换工具，只需要右键复制动图的地址，然后把地址的后缀改成 gif，就能访问到 gif 的图片了
2. Chrome 插件
作为一个程序员，我直接干了一个 chrome 插件，一键下载 gif
其实浏览器插件的开发极其简单，而且入门后你会发现你能做很多事情，或者说：为所欲为
2.1 插件代码结构
- JuejinGif
- icons （图标）
- juejin.png
- src
- menu.js （业务代码）
- service-worker.js （后台运行的脚本文件）
- manifest.json （很重要，插件所有的配置，权限申请等等都在这里）
- icons （图标）
2.2 manifest.json 清单
{
"name": "Juejin Gif",
"description": "右键下载gif",
"version": "1.0.0",
"manifest_version": 3,
"author": "bigflower",
"icons": {
"16": "icons/juejin.png",
"48": "icons/juejin.png",
"128": "icons/juejin.png"
},
"background": {
"service_worker": "src/service-worker.js",
"type": "module"
},
"permissions": [
"contextMenus",
"downloads"
]
}
- permissions：申请菜单、下载的权限（因为要下载 gif）
- background：指定后台代码对应的 js 文件
2.3 menu.js
所有业务相关的代码我都放到了 menu.js 中。
2.3.1 初始化菜单
// 初始化菜单，并添加点击 item 后的回调事件
export function initMenus() {
// 先移除，避免更新插件时报错
removeOldMenuItem();
createNewMenuItem();
addClickListner();
}
2.3.2 创建右键菜单
重点提一下创建右键菜单时的两个属性：
- contexts：表示这个菜单用于哪个元素，设置了 “image” 后，在图片右键才显示 下载gif 的 Item
- documentUrlPatterns：限定这个 下载gif 出现的场景，只有在掘金的网站才显示，对其他网站不影响。 如果不加限制，任何网站的图片上右键，都能看到这个 下载gif 的 Item
function createNewMenuItem(){
chrome.contextMenus.create({
"id": DOWNLOAD_ID,
"title": "下载 gif",
"contexts": ["image"],
"documentUrlPatterns": ["*://juejin.cn/*"]
});
}
2.3.3 下载图片
- 先获取到该图片的地址
- 修改图片地址的后缀
- 下载图片（这里不是我常用的a标签下载，而是使用浏览器插件的API）
function addClickListner() {
chrome.contextMenus.onClicked.addListener(function (info, tab) {
console.log("downloadGif", info, tab);
// 1. 获取图片地址， srcUrl 是图片的地址
if (info?.menuItemId === DOWNLOAD_ID)
downloadGif(info.srcUrl);
});
}
function downloadGif(url) {
if (!url.endsWith('.avis') && !url.endsWith('.awebp')) return;
// 2. 修改图片地址后缀
const gifUrl = url.replace('.avis', '.gif').replace('.awebp', '.gif');
console.log('downloadGif', gifUrl)
// 3. 下载图片
chrome.downloads.download({
url: gifUrl,
filename: Date.now() + ".gif",
saveAs: false
}, function (downloadId) {
console.log('Download started with ID', downloadId);
});
}
3. 其他
相关文章
代码地址
参考链接
