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

wwwwwllllk

本帖最后由 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;

wwwwwllllk

补充一下：可能用过这个脚手架的会发现，打包好的脚本，作者默认是monkey,没有描述，我们发到脚本猫描述是必填的，而且打包以后的版本号默认是0.0.0

我们可以在vite.config.js加就好了

1. monkey({
   
2.       entry: 'src/main.jsx',
   
3.       userscript: {
   
4.         name: "抖音脚本",
   
5.         version: '0.2.2',
   
6.         icon: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.hpjQBHE4wfYFA1nm4KhTDwAAAA&w=173&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
   
7.         namespace: 'npm/vite-plugin-monkey',
   
8.         author: 'xiaolaji',
   
9.         description: '抖音去除自动登陆提示，可以正常看评论',
   
10.         match: ['https://www.douyin.com/*'],
    
11.       },
    
12.       build: {
    
13.         externalGlobals: {
    
14.           react: cdn.jsdelivr('React', 'umd/react.production.min.js'),
    
15.           'react-dom': cdn.jsdelivr(
    
16.             'ReactDOM',
    
17.             'umd/react-dom.production.min.js',
    
18.           ),
    
19.         },
    
20.       },
    
21.     }),

复制代码

wwwwwllllk

在vite-plugin-monkey中引入特有的脚本猫特有的api函数
```javascript
import { GM_cookie, unsafeWindow, monkeyWindow, GM_addElement, GM_getValue, GM_setValue } from '$';
```

315703603

ggnb!!!!!!

wwwwwllllk

315703603 发表于 2022-11-19 16:59
ggnb!!!!!!

@shabby 这个哥哥才是大佬，没想到来油猴了

王一之

wwwwwllllk 发表于 2022-11-19 17:00
@shabby 这个哥哥才是大佬，没想到来油猴了

希望能有更多大佬知道这里

shabby

感谢使用，另外小小地做一些补充

1.首先 pnpm 不是必须的，npm，yarn 都是可以的，只是我个人推荐 pnpm，有关pnpm可以看 https://juejin.cn/post/7127295203177676837

2.你在pnpm run build之后，如果想直接安装刚刚构建好的脚本可以运行 pnpm run preview，它会自动检测dist目录下的脚本并自动打开默认浏览器安装

wwwwwllllk

shabby 发表于 2022-11-20 16:24
感谢使用，另外小小地做一些补充

1.首先 pnpm 不是必须的，npm，yarn 都是可以的，只是我个人推荐 pnpm， ...

之前一直懒得用，昨天用了一下，真的是舒服，和写项目的感觉一样了。只能说哥哥牛逼

DSugar

谢谢楼主分享。

涛之雨

555框架白写了。。。

（没错，还是多配置的，jsdeliver，github的，cdn的。。。）

wwwwwllllk

涛之雨 发表于 2022-12-20 08:25
[md]555框架白写了。。。

!(data/attachment/forum/202212/20/082402hllcz549k3i5ik5n.png)

哥哥离脚手架就差一步了，加油