针对canva.com的Tampermonkey脚本失效，添加预设文本生成按钮异常

失效根因 #

• Canva为单页应用，发布区域的textarea不是页面初始加载就生成的，是用户点击发布按钮后才动态渲染的，脚本默认在页面加载完成后立即执行时找不到目标元素，直接报错终止。
• 代码里获取父元素的属性parent是错误写法，原生DOM的父元素属性为parentNode，错误写法会返回undefined导致后续逻辑无法运行。
• insertBefore参数使用错误，正确语法为父元素.insertBefore(新元素, 参照子元素)，原代码写的target.insertBefore(elem, target)逻辑完全错误，无法完成插入操作。

修复后完整代码 #

// ==UserScript==
// @name         canva generate
// @namespace    http://canva.com
// @version      0.1
// @description  generate some preset texts in the canva.com textarea
// @author       You
// @match        https://www.canva.com/*
// @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // 预设文本，可自行修改
    const PRESET_TEXT = "这里是你要填充的预设文本内容";

    // 监听DOM变化，动态检测textarea是否出现
    const observer = new MutationObserver(() => {
        const textarea = document.querySelector("textarea");
        // 检测到textarea且没有插入过按钮时执行逻辑
        if (textarea && !textarea.parentElement.querySelector('button[name="generate"]')) {
            const parent = textarea.parentNode;
            // 创建按钮
            const elem = document.createElement('button');
            elem.name = 'generate';
            elem.textContent = '生成预设文本';
            elem.style.marginBottom = '8px';
            // 点击按钮填充预设文本
            elem.addEventListener('click', (e) => {
                e.preventDefault();
                textarea.value = PRESET_TEXT;
                // 触发input事件让Canva识别内容变更
                textarea.dispatchEvent(new Event('input', { bubbles: true }));
            });
            // 把按钮插入到textarea前面
            parent.insertBefore(elem, textarea);
        }
    });

    // 开始监听整个页面的DOM变更
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();

核心修改点 #

• 新增MutationObserver监听全局DOM变化，动态检测目标textarea的生成，适配Canva单页应用的动态渲染特性。
• 修正父元素获取属性为parentNode，修正insertBefore的参数逻辑，保证按钮正确插入到textarea的前方位置。
• 补充按钮显示文本、样式和点击逻辑，点击即可自动填充预设文本，同时触发input事件保证Canva能识别到文本内容的变更。
• 新增重复插入检测，避免按钮被反复多次插入到页面中。

效果参考 #

内容的提问来源于stack exchange，提问作者Jimmy Xee