表单

已有表单填写内容。

// ==UserScript==
// @name         表单填写
// @namespace    Monkey
// @version      0.1
// @description  表单填写
// @author       白马
// @match        https://c.com/note/add
// @run-at       document-end
// ==/UserScript==

(function() {
  'use strict';

  // 创建按钮
  const btn = document.createElement('button');
  btn.innerText = '📋';

  // 按钮样式
  btn.style.position = 'fixed';
  btn.style.top = '40px';
  btn.style.right = '20px';
  btn.style.zIndex = 99;
  btn.style.padding = '10px 10px';

  // 点击事件
  btn.onclick = function() {
    const obj = {
      name: 'World'
    };
    document.querySelector('input[name="name"]').value = obj.name;

    // 反馈成功
    const originalText = btn.innerText;
    btn.innerText = '✅';

    // 1 秒后恢复
    setTimeout(() => {
      btn.innerText = originalText;
    }, 1000);
  };

  // 添加到页面
  document.body.appendChild(btn);
})();

插入表单。

// ==UserScript==
// @name         网页首部插入表单
// @namespace    Monkey
// @version      0.1
// @description  网页首部插入表单
// @author       白马
// @match        *
// @run-at       document-end
// ==/UserScript==

(function() {
  'use strict';

  // 创建表单
  const form = document.createElement('form');
  form.style.cssText = `background-color: gray;
`;

  // 创建输入
  const input = document.createElement('input');
  input.type = 'text';
  input.name = 'userInput';
  input.required = true;
  input.placeholder = '请输入...';

  // 创建提交
  const submitBtn = document.createElement('input');
  submitBtn.type = 'submit';
  submitBtn.value = '提交';
  submitBtn.style.cssText = `background-color: teal;
color: white;
`;

  form.appendChild(input);
  form.appendChild(submitBtn);

  // 插入表单
  document.body.prepend(form);

  // 监听
  form.addEventListener('submit', function(event) {
    event.preventDefault();
    const inputValue = input.value;

    // 弹窗
    window.alert(inputValue);
  });

})();

插入表单，向已有表单填写内容。实际情况中，已有表单可能有多项要填写，或者下拉选择。

// ==UserScript==
// @name         表单
// @namespace    Monkey
// @version      0.1
// @description  表单
// @author       白马
// @match        https://c.com/note/add
// @run-at       document-end
// ==/UserScript==

(function() {
  'use strict';

  // 创建表单
  const form = document.createElement('form');
  form.style.cssText = `background-color: gray;
`;

  // 创建输入
  const input = document.createElement('input');
  input.type = 'text';
  input.name = 'userInput';
  input.required = true;
  input.placeholder = '请输入...';

  // 创建提交
  const submitBtn = document.createElement('input');
  submitBtn.type = 'submit';
  submitBtn.value = '提交';
  submitBtn.style.cssText = `background-color: teal;
color: white;
`;

  form.appendChild(input);
  form.appendChild(submitBtn);

  // 插入表单
  document.body.prepend(form);

  // 监听
  form.addEventListener('submit', function(event) {
    event.preventDefault();
    const inputValue = input.value;

    // 解析
    let json;
    try {
      json = JSON.parse(inputValue);
      document.querySelector('input[name="name"]').value = json.name;
    } catch(error) {
      console.error(error)
    }
  });
})();

在表单输入内容，提交。

{"name":"蓝天"}

表单 ​

表单