tampermonkey 脚本编写

Tampermonkey 是一个用户脚本管理器的扩展,它可以帮助你更轻松地管理用户脚本。使用 Tampermonkey,你可以: - 管理已安装的用户脚本。你可以禁用、启用、更新甚至删除用户脚本。 - 编写自己的用户脚本。Tampermonkey 集成了代码编辑器,你可以直接在扩展中编写、调试用户脚本。 - 支持大部分主流浏览器。除了 Chrome 也支持 Edge、Firefox、Safari 等浏览器。使用 Tampermonkey,可以更高效、便捷地管理用户脚本,可以大大提升你的用户脚本使用体验。你可以根据自己的浏览器和需求选择不同的扩展。

菜单样式

弹窗样式

tampermonkey脚本

// ==UserScript==
// @name         同步notion
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Add a context menu item to the browser.
// @author       You
// @match        *://*/*
// @grant        GM_registerMenuCommand
// @grant        GM_addStyle
// ==/UserScript==


(function() {
    'use strict';

    GM_registerMenuCommand('同步notion', function() {
        var form = document.createElement('div');
        form.id = '123456'
        form.style.cssText = "background: #fff; border: 1px solid #ddd; padding: 20px; width: 400px; position: fixed; top: 50%; left: 50%;transform: translate(-50%, -50%); z-index: 1000;margin: 0 auto; "
        var formTitle = document.createElement('h3');
        formTitle.innerHTML = '同步到Notion';
        formTitle.style.cssText = "margin-top: 0;margin-bottom: 20px; text-align: center; "
        form.appendChild(formTitle);


        var title = document.createElement('input');
        title.type = 'text';
        title.name = 'title';
        title.id = 'title';
        form.appendChild(title);
        var content = window.getSelection().toString();
        var submit = document.createElement('button');
        submit.type = 'submit';
        submit.name = 'submit';
        submit.innerHTML = '提交';
        submit.style.cssText = "border: 1px solid #ddd;padding: 3px 20px; "
        submit.onclick = function() {
            fetch('https://www.222222.top/api/cratePage/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    "name": document.getElementById('title').value,
                    "content": content
                })
            })
                .then(response => response.json())
                .then(data => console.log(data))
                .catch(error => console.error(error))
            document.body.removeChild(form);
        };
        form.appendChild(submit);
         var closeBtn = document.createElement('button');
        closeBtn.classList.add('close');
        closeBtn.innerHTML = '取消';
        closeBtn.onclick = function() {
            document.body.removeChild(form);
        }
        closeBtn.style.cssText = "border: 1px solid #ddd;padding: 3px 20px; "
        form.appendChild(closeBtn);
        document.body.appendChild(form);
    });
})();

好看版

// ==UserScript==
// @name         Add context menu item
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Add a context menu item to the browser.
// @author       You
// @match        *://*/*
// @grant        GM_registerMenuCommand
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';
    const context = document.createElement('div')
    let divX, divY, content
    context.innerHTML = `
            <div id="zjy-notice-form-111" class="zjy-notice-form" style="visibility: hidden;">
                <h4 >同步notion</h4>
                <div>
                <input id="zjy-notice-form-title" type="text" />
                <button id="zjy-notice-form-submit-btn">提交</button>
                </div>
            </div>
        `
    document.body.appendChild(context)
    document.addEventListener('click', function(event) {
        const {button, clientX, clientY} = event
        if (button === 0 && clientX !== 0 && clientY !== 0) {
            divX = clientX
            divY = clientY
        }
    })
    function showNotion() {
        const el = document.getElementById('zjy-notice-form-111')
        el.style.visibility = 'visible'
        el.style.left = `${divX + 100}px`
        el.style.top = `${divY + 50}px`
    }
    async function submitNotion() {
        const title = document.getElementById('zjy-notice-form-title').value
        return fetch('https://www.11222.top/api/cratePage/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                "name": title,
                "content": content
            })
        })
        .then(response => response.json())
        .then(data => {
            const el = document.getElementById('zjy-notice-form-111')
            el.style.visibility = 'hidden'
            if(data.code==200){
                alert("同步成功！")
            }else{
                alert("同步失败！" + data.data)
            }

            return data
        })
    }
    GM_registerMenuCommand('同步notion', function() {
        const selection = window.getSelection().toString()
        if (selection) {
            content = selection
            showNotion()
        }
    },"g");

    GM_addStyle(`
       .zjy-notice-form {
            z-index: 9999999;
            position: fixed;
            padding: 10px;
            display: flex;
            align-items: center;
            flex-direction: column;
            background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
            box-shadow: 0 0 10px rgba(0, 0, 255, 0.5);
            border-radius: 4px;
        }
        .zjy-notice-form > h4{
            flex-basis: 100%;
            margin-bottom: 8px;
            color: rgb(15, 15, 15)
        }
        .zjy-notice-form > input {
            flex-basis: 100%;
            padding: 5px;
            margin-right: 5px;
            border: 0;
            border-radius: 4px;
        }
        .zjy-notice-form >div> input:focus {
            outline: none;
        }
        .zjy-notice-form >div> button {
            padding: 4px 8px;
            border: 0;
            background-color: aquamarine;
            border-radius: 4px;
            color: rgb(87, 78, 78);
        }
        .zjy-notice-form >div> button:active {
            background-color: #00f2fe;
        }
   `);
    var submitting = false;

document.getElementById('zjy-notice-form-submit-btn').addEventListener("click", function() {
  if (submitting) return;

   submitting = true;
  submitNotion();

  setTimeout(function() {
    submitting = false
  }, 1000);
});


})();

插入HTML字符串： document.createElement('div')..innerHTML = `` 注意使用符号键盘Esc下方按钮

插入css: GM_addStyle(``) 注意使用符号键盘Esc下方按钮

读者评论