吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 6746|回复: 86
收起左侧

[其他原创] 【升级版】一个插件帮你快速、免费下载两个网站的高清LOGO!

  [复制链接]
夸克逃逸 发表于 2022-11-27 03:15
本帖最后由 夸克逃逸 于 2023-8-26 09:50 编辑

——————————————————————————————
【升级版】一个插件帮你快速、免费下载两个网站的高清LOGO!
——————————————————————————————


插件现在支持导出海报了!内容运营者福利!新贴移步:https://www.52pojie.cn/thread-1722970-1-1.html



强烈建议给项目一个star或者fork,以后会根据反馈持续更新~


提示:LOGO或海报很多图片、字体或者素材都有版权,帖子和插件仅供技术交流,插件下载的LOGO和海报在官方未授权时请勿商用,由未授权而商用导致的版权纠纷问题,由LOGO和海报使用者承担所有责任。

这个帖子跟大家聊聊另一个网站的操作思路。


【项目地址:https://github.com/quarkape/free-canvas】


一、登录才能编辑?
  • 将这个登录框删掉即可,我们可以操作DOM,然后删除这个节点。

01

01



二、shadow root?
  • 这个网站用到了shadow dom。logo的svg就在这个shadow root里面。我也是第一次接触到这方面的知识,搜索、探索一番后,找到了解决方法:
svg_part = document.getElementsByTagName("logomaker-logo-editor")[0].shadowRoot.lastChild.childNodes[0].childNodes[0].children[0];

  • 其实就是获取这个shadow节点,然后再按照一般方法操作就行了,还是跟一般的不太一样的。


三、如何实现一个插件处理两个网站的内容?
  • 其实很简单,获取当前tab,进而获取当前页面的地址,判断就行了。不同url用不同的一套处理方法。
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    const url = tabs[0].url;
    let opt = {};
    if (url.indexOf('https://www.logosc.cn/edit') === 0) {
      opt.uname = 'bxz';
    } else if (url.indexOf('https://www.logomaker.com.cn/guide#/generate') === 0) {
      opt.uname = 'bzk';
    } else {
      document.getElementById("ans").innerText = "当前网站或页面不适合使用该插件。如果判断有误,烦请到github上面提issue~";
      return;
    }
    opt.del = false;
    opt.widthset = document.getElementById("widthset").value;
    opt.keepbg = document.getElementById('keepbg').checked;
    chrome.tabs.sendMessage(tabs[0].id, opt, (resp) => {
        document.getElementById("ans").innerText = resp;
    })
  })



四、怎么生成svg文件
  • 我们可以借助a标签和blob对象实现svg文件的生成:

const el = document.createElement("a");
el.setAttribute('download', 'free_logo.svg');
const blob = new Blob([content])
el.setAttribute('href', URL.createObjectURL(blob));
el.style.display = 'none';
document.body.appendChild(el);
el.click();
document.body.removeChild(el);

  • 这里我们首先新建一个a标签,然后设置url等属性,再把svg文本塞进blob就可以了。





五、怎么开发浏览器插件
  • 我其实也不太明白,都是依葫芦画瓢。大家感兴趣的话,可以研究一下代码,不过我可以稍微说说我的观点:
  • popup.html是一个页面,这个页面不能获取真实网站页面的内容
  • content.js用于注入真实网站,可以获取真实网站内容,操作其dom
  • 因此popup.html需要与真实页面通信的话,就需要一个东西首先与content.js通信。这个东西就是popup.js。
  • content.js里面有个chrome.runtime.onMessage.addListener()可以接受信息
  • popup.js通过chrome.tabs.sendMessage()发送消息,进而与content.js通信
  • 总结就是:popup.html -> popup.js -> chrome.tabs.sendMessage() -> chrome.runtime.onMessage.addListener() => content.js => 真实页面





六、安装方法

建议参考项目地址下面的说明Google Chrome安装方法(Edge差不多):
  • 将完整的项目下载下来
  • 在地址栏输入chrome://extensions/(Edge浏览器是edge://extensions/)回车,进入扩展程序管理页面
  • 打开开发者模式
  • 页面找到加载已解压的扩展程序并点击,选择从本项目即可
  • 加载完成后,在浏览器右上角会出现一个拼图的图标,单击该图标,找到本插件free_logo,点击后面的图钉/眼睛图标可以将该插件固定,便于频繁使用。


七、使用方法

  • 进入目标网站
  • 输入合适的信息,选择合适的LOGO并进入编辑页面
  • (仅标智客会出现)编辑页面会弹出登录框,除非登录,否则没有关闭按钮
  • (仅标智客使用)打开插件,点击“去除登录框”,会提示去除成功
  • 在编辑页面编辑LOGO直到满意为止
  • 点击插件,在弹出的窗口中输入想要的LOGO的宽度
  • 继续选择是否要保留LOGO背景(默认不保留,即背景为透明,便于转换成.png格式的文件)
  • 配置好后,点击开始处理,开始下载svg文件




八、插件预览
image.png
-------
image.png

免费评分

参与人数 24吾爱币 +29 热心值 +20 收起 理由
echo1021 + 1 + 1 谢谢@Thanks!
wy535564 + 1 + 1 20230627测试还有用的
凋零灬枫叶 + 1 + 1 我很赞同!
立花萤 + 1 + 1 谢谢@Thanks!
被遗忘的天空 + 1 + 1 我很赞同!
vincebear + 1 我很赞同!
Guaishou123 + 1 我很赞同!
remay0325 + 1 谢谢@Thanks!
LIUSOON + 2 + 1 感谢发布原创作品,吾爱破解论坛因你更精彩!
VansChina + 1 + 1 我很赞同!
lllove + 1 + 1 谢谢@Thanks!
feng7019 + 1 + 1 我很赞同!
抱歉、 + 1 用心讨论,共获提升!
csq0216 + 1 我很赞同!
dtadsl + 1 + 1 我很赞同!
wan1330 + 1 + 1 我很赞同!
wyxa + 1 大佬牛
Beast。 + 1 + 1 谢谢@Thanks!
zhengliyun + 1 我很赞同!
qq63 + 1 + 1 感谢发布原创作品,吾爱破解论坛因你更精彩!
苏紫方璇 + 7 + 1 欢迎分析讨论交流,吾爱破解论坛有你更精彩!
wkdxz + 2 + 1 感谢发布原创作品,吾爱破解论坛因你更精彩!
txylyz + 1 + 1 我很赞同!
为之奈何? + 1 + 1 我很赞同!

查看全部评分

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

 楼主| 夸克逃逸 发表于 2022-12-1 13:17
uicco007 发表于 2022-12-1 12:39
楼主,我安装好了插件,在应用管理里能找到,为什么浏览器右上角不显示呢  没法用啊~

右上角有一个像拼图的图标,点击这个图标可以看到你安装并开启了哪些插件。这时候找到这个插件并点击就可以了。之所以插件图标直接出现在右上角,是因为点击了插件后面的图钉或者/眼睛按钮,将插件固定到工具栏上面了。
 楼主| 夸克逃逸 发表于 2022-12-3 21:09
cheng7788521 发表于 2022-12-3 20:43
确定,https://kbc.lanzouw.com/i2YB10hnzc4h

我这里打开有背景的,深蓝色的背景,鞋护士对吧?我记得之前好像有人问过这个logo哈哈哈。你看看你的浏览器是不是开启了深色模式,所以背景看起来不明显?或者你换一个浏览器打开看看?
海海01 发表于 2022-11-27 04:04
txylyz 发表于 2022-11-27 06:00
楼主精神可嘉,佩服佩服!
wkdxz 发表于 2022-11-27 07:23
楼主注意身体,期待更新作品!
靠山村村长 发表于 2022-11-27 08:37
楼主精神可嘉,佩服佩服!
不羁的风儿 发表于 2022-11-27 08:37
哪两个网站的你倒是说下啊
ICzcz 发表于 2022-11-27 08:56

感谢无私的分享!辛苦了
a625235514 发表于 2022-11-27 09:02
感谢无私的分享!
sxtyys 发表于 2022-11-27 09:03
谢谢分享,辛苦了
pefu2008 发表于 2022-11-27 09:16
优秀的人,不是没有道理滴!
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则 警告:本版块禁止灌水或回复与主题无关内容,违者重罚!

快速回复 收藏帖子 返回列表 搜索

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-3-29 20:32

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表