图片

https://greasyfork.org/zh-CN/ 是用户脚本的大本营,上面有很多有用的脚本,但是其网站上的代码展示功能比较简陋,看起来挺费劲。如果能把代码复制出来,放到vscode等编辑器里看的话,会舒服很多。

greasyfork并没有提供代码复制功能,我们可以自己写个用户脚本来实现。在前文编写第一个油猴脚本,实现在公众号文章管理页按Ctrl+K将光标聚焦到搜索框中介绍了编写脚本的主要步骤,这里就直接上源码:

// ==UserScript==
// @name         给greasyfork增加代码复制按钮
// @namespace    wbms
// @version      0.1
// @description  实现在greasyfork“安装此脚本”按钮后面增加一个“复制代码”按钮,点击时将代码复制到粘贴板
// @author       cmdyu
// @match        https://greasyfork.org/*/scripts/*/code
// @icon         https://www.google.com/s2/favicons?sz=64&domain=greasyfork.org
// @grant        GM_addElement
// @grant        GM_setClipboard
// ==/UserScript==

(function () {
    'use strict';

    const installArea = document.querySelector("#install-area")
    const btn = GM_addElement(installArea, 'button', {
        textContent: '复制代码'
    });
    btn.onclick = function copyCode() {
        const pre = document.querySelector(".code-container > pre")
        GM_setClipboard(pre.innerText, "text", () => alert('复制成功'));
    }
})();

和第一个脚本不同的是,这个脚本里用到了两个API,需要在脚本头部指令里开放一下权限,否则引用不到。

// @grant        GM_addElement
// @grant        GM_setClipboard

GM_addElement 用来添加按钮
GM_setClipboard 用来将代码内容复制到系统粘贴板

保存之后,就能在已安装的脚本里看到了。

图片

再打开greasyfork脚本详情代码页,就会发现在“安装此脚本“按钮后面多了一个”复制代码“按钮。点击之后,就能将代码复制到粘贴板了。

图片

 欢迎关注微信公众号:文本魔术,了解更多 

 

 

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐