Greasyfork - Add notes to the script

Add a note for scripts to help identify and search

As of 09. 09. 2020. See the latest version.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name                Greasyfork - Add notes to the script
// @name:zh-CN          Greasyfork - 为脚本添加备注
// @name:zh-TW          Greasyfork - 為腳本新增備註
// @name:ja             Greasyfork - スクリプトにコメントを追加
// @name:ko             Greasyfork - 스크립트에 메모 추가
// @namespace           https://greasyfork.org/zh-CN/users/193133-pana
// @homepage            https://www.sailboatweb.com
// @icon                data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9Im5ld0ljb25UaXRsZSIgc3Ryb2tlPSJyZ2JhKDI5LDE2MSwyNDIsMS4wMCkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgZmlsbD0ibm9uZSIgY29sb3I9InJnYmEoMjksMTYxLDI0MiwxLjAwKSI+IDx0aXRsZSBpZD0ibmV3SWNvblRpdGxlIj5OZXc8L3RpdGxlPiA8cGF0aCBkPSJNMTkgMTRWMjJIMi45OTk5N1Y0SDEzIi8+IDxwYXRoIGQ9Ik0xNy40NjA4IDQuMDM5MjFDMTguMjQxOCAzLjI1ODE3IDE5LjUwODIgMy4yNTgxNiAyMC4yODkyIDQuMDM5MjFMMjAuOTYwOCA0LjcxMDc5QzIxLjc0MTggNS40OTE4NCAyMS43NDE4IDYuNzU4MTcgMjAuOTYwOCA3LjUzOTIxTDExLjU4NTggMTYuOTE0MkMxMS4yMTA3IDE3LjI4OTMgMTAuNzAyIDE3LjUgMTAuMTcxNiAxNy41TDcuNSAxNy41TDcuNSAxNC44Mjg0QzcuNSAxNC4yOTggNy43MTA3MSAxMy43ODkzIDguMDg1NzkgMTMuNDE0MkwxNy40NjA4IDQuMDM5MjFaIi8+IDxwYXRoIGQ9Ik0xNi4yNSA1LjI1TDE5Ljc1IDguNzUiLz4gPC9zdmc+
// @version             2.0.1
// @description         Add a note for scripts to help identify and search
// @description:zh-CN   为脚本添加备注功能,以帮助识别和搜索
// @description:zh-TW   為腳本新增備註功能,以幫助識別和搜尋
// @description:ja      スクリプトにコメント機能を追加して、識別と検索を支援します
// @description:ko      식별 및 검색에 도움이되도록 스크립트에 메모 추가
// @author              pana
// @license             GNU General Public License v3.0 or later
// @include             http*://*greasyfork.org/*
// @include             http*://*sleazyfork.org/*
// @require             https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js
// @require             https://greasyfork.org/scripts/408454-note-obj/code/Note_Obj.js?version=846124
// @grant               GM_info
// @grant               GM_getValue
// @grant               GM_setValue
// @grant               GM_deleteValue
// @grant               GM_listValues
// @grant               GM_registerMenuCommand
// @grant               GM_unregisterMenuCommand
// @grant               GM_addValueChangeListener
// @grant               GM_openInTab
// ==/UserScript==

(function() {
    'use strict';
    const GF_ICON = {
        'NOTE_BLACK': 'url(data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9Im5ld0ljb25UaXRsZSIgc3Ryb2tlPSJyZ2IoMzgsIDM4LCAzOCkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgZmlsbD0ibm9uZSIgY29sb3I9InJnYigzOCwgMzgsIDM4KSI+IDx0aXRsZSBpZD0ibmV3SWNvblRpdGxlIj5OZXc8L3RpdGxlPiA8cGF0aCBkPSJNMTkgMTRWMjJIMi45OTk5N1Y0SDEzIi8+IDxwYXRoIGQ9Ik0xNy40NjA4IDQuMDM5MjFDMTguMjQxOCAzLjI1ODE3IDE5LjUwODIgMy4yNTgxNiAyMC4yODkyIDQuMDM5MjFMMjAuOTYwOCA0LjcxMDc5QzIxLjc0MTggNS40OTE4NCAyMS43NDE4IDYuNzU4MTcgMjAuOTYwOCA3LjUzOTIxTDExLjU4NTggMTYuOTE0MkMxMS4yMTA3IDE3LjI4OTMgMTAuNzAyIDE3LjUgMTAuMTcxNiAxNy41TDcuNSAxNy41TDcuNSAxNC44Mjg0QzcuNSAxNC4yOTggNy43MTA3MSAxMy43ODkzIDguMDg1NzkgMTMuNDE0MkwxNy40NjA4IDQuMDM5MjFaIi8+IDxwYXRoIGQ9Ik0xNi4yNSA1LjI1TDE5Ljc1IDguNzUiLz4gPC9zdmc+)'
    };
    const GF_STYLE = `
        .note-obj-gf-note-btn {
            background-image: ${GF_ICON.NOTE_BLACK};
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
            vertical-align: top;
        }
        .note-obj-gf-info-note-btn {
            background-size: 32px auto;
            width: 32px;
            height: 32px;
            margin-left: 20px;
            display: inline-block;
        }
        .note-obj-gf-list-note-btn {
            background-size: 24px auto;
            width: 24px;
            height: 24px;
            margin-left: 10px;
            display: none;
        }
        .note-obj-gf-ts-note-btn {
            background-size: 16px auto;
            width: 16px;
            height: 16px;
            margin-left: 10px;
            display: none;
            vertical-align: sub;
        }
        ol.script-list li:hover .note-obj-gf-list-note-btn,
        #script-table tbody tr:hover .note-obj-gf-ts-note-btn {
            display: inline-block;
        }
        .note-obj-gf-note-tag,
        .note-obj-gf-ts-note-tag {
            background-color: #3c81df;
            color: #fff;
            display: inline-block;
            align-items: center;
            white-space: nowrap;
            border-radius: 50px;
            padding: 0px 10px;
        }
        .note-obj-gf-list-note-tag {
            text-decoration: none;
        }
    `;
    function change_Event(note_obj, id = null) {
        let pathname = location.pathname;
        if (/^\/[\w-]+\/scripts\/\d+-/i.test(pathname)) {
            let script_id = /^\/[\w-]+\/scripts\/(\d+)-/i.exec(pathname)[1];
            let ele = document.querySelector('#script-info h2');
            ele && (! id || id == script_id) && note_obj.handler(script_id, ele, null, {
                'add': 'span',
                'class': 'note-obj-gf-note-tag'
            });
        } else if (/^\/[\w-]+\/scripts/i.test(pathname) || /^\/[\w-]+\/users\/\d+/i.test(pathname)) {
            let browse_list = document.querySelectorAll('ol.script-list li');
            for (let ele of browse_list) {
                let script_id = ele.getAttribute('data-script-id');
                if (script_id) {
                    let header = ele.querySelector('article > h2 > a');
                    header && (! id || id == script_id) && note_obj.handler(script_id, header, null, {
                        'add': 'span',
                        'class': ['note-obj-gf-note-tag', 'note-obj-gf-list-note-tag']
                    });
                }
            }
            document.querySelectorAll('#script-table tbody tr').forEach(item => {
                let script_title = item.querySelector('.thetitle a');
                if (script_title) {
                    let script_id = script_title.href.match(/\d+$/) && script_title.href.match(/\d+$/)[0];
                    (! id || id == script_id) && note_obj.handler(script_id, script_title, null, {
                        'add': 'span',
                        'class': 'note-obj-gf-ts-note-tag'
                    });
                }
            });
        }
    }
    function init_TS(note_obj) {
        document.querySelectorAll('#script-table tbody tr').forEach(item => {
            let script_title = item.querySelector('.thetitle a');
            if (script_title) {
                let script_id = script_title.href.match(/\d+$/) && script_title.href.match(/\d+$/)[0];
                let thetitle = item.querySelector('.thetitle');
                script_id && thetitle.appendChild(note_obj.createNoteBtn(script_id, script_title.textContent, ['note-obj-gf-note-btn', 'note-obj-gf-ts-note-btn'])); 
                note_obj.judgeUsers(script_id) && note_obj.handler(script_id, script_title, null, {
                    'add': 'span',
                    'class': 'note-obj-gf-ts-note-tag'
                });                                       
            }
        });
    }
    function init() {
        let old_config = GM_getValue('greasyfork_config', null);
        if (old_config && old_config.scripts_array) {
            for (let item of old_config.scripts_array) {
                GM_setValue(item.id, {
                    'tag': item.tag
                });
            }
            GM_deleteValue('greasyfork_config');
        }
        let note_obj = new Note_Obj('myGreasyForkNote');
        note_obj.init({
            'style': GF_STYLE,
            'changeEvent': change_Event,
            'script': {
                'author': {
                    'name': 'pana',
                    'homepage': 'https://www.sailboatweb.com/'
                },
                'address': 'https://greasyfork.org/scripts/404275',
                'updated': '2020-9-9',
                'library': [
                    {
                        'name': 'Vue.js',
                        'version': '2.6.11',
                        'url': 'https://vuejs.org/'
                    }
                ]
            },
            'itemClick': key => 'https://greasyfork.org/scripts/' + key,
            'type': 'script'
        });
        let pathname = location.pathname;
        if (/^\/[\w-]+\/scripts\/\d+-/i.test(pathname)) {
            let script_id = /^\/[\w-]+\/scripts\/(\d+)-/i.exec(pathname)[1];
            let install_help_link = document.querySelector('#install-area .install-help-link');
            if (install_help_link) {
                let script_name = (document.querySelector('header h2') && document.querySelector('header h2').textContent) || '';
                install_help_link.after(note_obj.createNoteBtn(script_id, script_name, ['note-obj-gf-note-btn', 'note-obj-gf-info-note-btn']));
            }
            let ele = document.querySelector('#script-info h2');
            ele && note_obj.judgeUsers(script_id) && note_obj.handler(script_id, ele, null, {
                'add': 'span',
                'class': 'note-obj-gf-note-tag'
            });
        } else if (/^\/[\w-]+\/scripts/i.test(pathname) || /^\/[\w-]+\/users\/\d+/i.test(pathname)) {
            let browse_list = document.querySelectorAll('ol.script-list li');
            for (let ele of browse_list) {
                let script_id = ele.getAttribute('data-script-id');
                if (script_id) {
                    let description = ele.querySelector('.description');
                    if (description) {
                        let script_name = (ele.querySelector('article > h2 > a') && ele.querySelector('article > h2 > a').textContent) || '';
                        description.before(note_obj.createNoteBtn(script_id, script_name, ['note-obj-gf-note-btn', 'note-obj-gf-list-note-btn']));
                    }
                    let header = ele.querySelector('article > h2 > a');
                    header && note_obj.judgeUsers(script_id) && note_obj.handler(script_id, header, null, {
                        'add': 'span',
                        'class': ['note-obj-gf-note-tag', 'note-obj-gf-list-note-tag']
                    });
                }
            }
            init_TS(note_obj);
            let ts_tbody = document.querySelector('#script-table tbody');
            if (ts_tbody) {
                let observer = new MutationObserver(() => {
                    init_TS(note_obj);
                });
                observer.observe(ts_tbody, {
                    'childList': true
                });
            }
        }
    }
    init();
})();