moveableGrammarlyButton.js

moveableGrammarlyButton.js

// ==UserScript==
// @name         Make Grammarly button draggable
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Make the Grammarly button draggable
// @author       Justin Bassett-Green
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    function draggable(el) {
        var isDown = false;
        var offset = {x: 0, y: 0};

        el.addEventListener('mousedown', function (e) {
            isDown = true;
            offset = {
                x: el.offsetLeft - e.clientX,
                y: el.offsetTop - e.clientY
            };
        }, true);

        document.addEventListener('mouseup', function () {
            isDown = false;
        }, true);

        document.addEventListener('mousemove', function (e) {
            if (isDown) {
                el.style.left = (e.clientX + offset.x) + 'px';
                el.style.top = (e.clientY + offset.y) + 'px';
            }
        }, true);
    }

    function makeGrammarlyButtonDraggable() {
        var extensions = document.querySelectorAll("html > grammarly-extension");
        extensions.forEach(function (extension) {
            var root = extension.shadowRoot;
            var button = root.querySelector('div[data-grammarly-part="button"]');
            if (button) {
                draggable(button);
            }
        });
    }

    makeGrammarlyButtonDraggable();

    var observer = new MutationObserver(makeGrammarlyButtonDraggable);
    observer.observe(document.body, {childList: true, subtree: true});
})();