本帖最后由 夸克逃逸 于 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
二、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文件
八、插件预览
-------
| 
[复制链接]
发表于 2022-11-27 03:15
|
发表于 2022-12-1 13:17
