本帖最后由 wwwwwllllk 于 2022-11-19 16:41 编辑
有了这个框架，之前写的一个网站的多个脚本，整合起来也方便了好多了。
只能说作者真的牛逼。@shabby 下面的这个帖子推荐了好多种，我直接用的基于vite的vite-plugin-monkey。它运行起来直接默认和脚本猫关联了。我也不知道什么原因。
https://bbs.tampermonkey.net.cn/forum.php?mod=viewthread&tid=3399&highlight=%E5%B7%A5%E7%A8%8B%E5%8C%96
1.说下用了以后的惊喜，它默认就是应该就是页面渲染完成以后才加载的，我就不用像之前写的每次加setTimeout了。
2.用了脚手架，因为写脚本一般都是自己有需求才写，一次不可能把代码写好，网站也会进行更新，都写到一块，每次改的时候代码都在一块，很不好找(然后自己就懒得改了，凑合用之前的，哈哈)。
3.因为用的框架，加上用官方的一些插件，写起来快了好多。
4.用的时候最好把默认的脚手架的样式直接全注释掉。(或者就是自己先一个简单的html先启一个服务，然后脚本匹配到我们自己写的简单的html,这样可以更快地分析出布局。然后删除掉一些无用的内容，然后就开始愉快地写脚本了。)
我下面用的是react,vue也是同理。
使用npm安装pnmp
npm install -g pnpm
这里是数组那么我们就可以写多个匹配的网站。
因为我也是第一次用，所以匹配网站是油猴中文网我搞不清脚手架对页面布局的是怎么操作的。
所以我先自己启动了一个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;
置顶卡
沉默卡
照妖镜
