微信公众号素材库复制图片链接
· 阅读需 3 分钟
简介
微信公众号管理后台素材库中的图片，复制图片链接比较麻烦，需要点击图片查看，然后鼠标右键复制图标地址，这里基于油猴插件(Tampermonkey)写一个js脚本，用于一键复制微信公众号素材库中的图片链接。
使用场景
写文章或者程序的时候，可能需要插入图片URL，通过该脚本可以很丝滑的复制微信公众号素材库中的图片链接。
效果示例
安装脚本
- 在线安装：https://greasyfork.org/zh-CN/scripts/538956
- 本地安装：复制下面的脚本内容，然后在油猴插件中新建脚本，将脚本内容粘贴进去，然后保存即可
油猴脚本（Tampermonkey）
油猴脚本
// ==UserScript==
// @name 微信素材库复制图片链接
// @namespace http://tampermonkey.net/
// @version 1.2
// @description 在微信公众号素材库页面，添加“复制链接”按钮，点击后复制图片URL到剪贴板
// @author Grok
// @match https://mp.weixin.qq.com/cgi-bin/appmsg*
// @match https://mp.weixin.qq.com/cgi-bin/filepage*
// @require https://code.jquery.com/jquery-3.6.0.min.js
// @grant GM_setClipboard
// ==/UserScript==
(function() {
'use strict';
// 确保jQuery无冲突
const $ = window.jQuery.noConflict(true);
// 动态创建按钮和Toptips样式
const style = `
.weui-desktop-icon-btnxx {
width: 36px;
height: 36px;
border-radius: 18px;
cursor: pointer;
font-size: 12px;
border: none;
color: #07C160;
}
.weui-desktop-icon-btnxx:hover {
color: #07C160;
background: #07C16040;
}
.weui-toptips {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
padding: 8px 16px;
background: #07C16020;
color: #07C160;
font-size: 14px;
border-radius: 4px;
z-index: 9999;
display: none;
}
`;
$('<style>').text(style).appendTo('head');
// 创建Toptips提示函数
function showToptips(message) {
const $toptips = $('<div class="weui-toptips"></div>').text(message);
$toptips.appendTo('body').fadeIn(200);
setTimeout(() => {
$toptips.fadeOut(200, () => {
$toptips.remove();
});
}, 2000); // 2秒后自动消失
}
// 查找所有素材库图片项
$('.weui-desktop-img-picker__item').each(function() {
const $item = $(this);
const $tooltipWrp = $item.find('.weui-desktop-tooltip__wrp.weui-desktop-link').first();
// 在指定的weui-desktop-tooltip__wrp前插入新按钮
const $newButton = $(`
<div class="weui-desktop-tooltip__wrp weui-desktop-link" style="right: 94px;">
<button href="javascript:;" target="_blank" class="weui-desktop-icon-btnxx">URL</button>
</div>
`);
$newButton.insertBefore($tooltipWrp);
// 点击按钮获取<i>标签的style中的URL
$newButton.find('button').on('click', function() {
const $img = $item.find('i.weui-desktop-img-picker__img-thumb').first();
const style = $img.attr('style');
if (!style) {
showToptips('未找到图片URL');
return;
}
// 使用正则提取background-image中的URL
const urlMatch = style.match(/url\(["']?(.*?)["']?\)/);
if (!urlMatch || !urlMatch[1]) {
showToptips('未找到有效的图片URL');
return;
}
let imgUrl = urlMatch[1];
// 如果URL缺少协议头，补全为https
if (imgUrl.startsWith('//')) {
imgUrl = 'https:' + imgUrl;
}
// 复制URL到剪贴板
GM_setClipboard(imgUrl);
showToptips('图片URL已复制到剪贴板');
});
});
})();
