油猴工程化，回复的时候字数不满，自动补全。

1.说下用了以后的惊喜，它默认就是应该就是页面渲染完成以后才加载的，我就不用像之前写的每次加setTimeout了。

2.用了脚手架，因为写脚本一般都是自己有需求才写，一次不可能把代码写好，网站也会进行更新，都写到一块，每次改的时候代码都在一块，很不好找。 3.因为用的框架，加上用官方的一些插件，写起来肯定快。

我下面用的是react,vue也是同理。

使用npm安装pnmp

npm install -g pnpm

然后执行下面这条命令

 pnpm create monkey   // 运行以后会提示我们创建的项目名称

因为我也是第一次用，所以匹配网站是油猴中文网我搞不清脚手架对页面布局的是怎么操作的。

所以我先自己启动了一个html服务。

而且用的过程我发现，只要保存，连同页面会一起刷新。真的是太爽了。

代码我只改了一点很简单，只是顺便写一个脚手架的教程，然后突然想写一下这个脚本。

main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createRoot(
  (() => {
    const app = document.createElement('div');
    document.body.append(app);
    return app;
  })(),
).render(
  <React.Fragment>
    <App />
  </React.Fragment>,
);

App.jsx

import { useEffect } from 'react';
import { useState, Fragment } from 'react';

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    let timer = setInterval(() => {
      if(document.getElementById("postmessage")) {
        let postMessageTextArea = document.getElementById("postmessage")
        // 失去焦点的时候就需要判断一下输入的字符长度，如果小于10自动补全
        postMessageTextArea.onblur = function() {
          if (postMessageTextArea.value.length < 10) {
            let str = "!!!!!!!!!!"
            // 用户输入的长度
            let inputValue = postMessageTextArea.value || ''
            console.log(str.substring(0,10 -inputValue.length));
            // 补全10个字符
            postMessageTextArea.value = inputValue + str.substring(0,10 -inputValue.length) 
          }
        }
      }
    }, 2000);
  }, [])

  return (
    <Fragment>
      {/* <div className="App">
        你好世界，我是脚本
      </div> */}
    </Fragment>
  );
}

export default App;