上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

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

[复制链接]
  • TA的每日心情
    郁闷
    1 小时前
  • 签到天数: 26 天

    [LV.4]偶尔看看III

    60

    主题

    320

    帖子

    430

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    430

    荣誉开发者国庆纪念章油中2周年

    发表于 2022-11-19 16:36:24 | 显示全部楼层 | 阅读模式
    安装此脚本 如何安装? 脚本问题反馈 给脚本评分 查看代码

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

    image.png

    image.png

    image.png

    image.png

    image.png

    image.png

    image.png

    image.png

    这里是数组那么我们就可以写多个匹配的网站。

    image.png

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

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

    image.png

    image.png

    image.png

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

    image.png

    image.png

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

    image.png

    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;
    
    image.png
    I frequently record, because want to leave something.
  • TA的每日心情
    郁闷
    1 小时前
  • 签到天数: 26 天

    [LV.4]偶尔看看III

    60

    主题

    320

    帖子

    430

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    430

    荣誉开发者国庆纪念章油中2周年

    发表于 前天 20:53 | 显示全部楼层
    补充一下:可能用过这个脚手架的会发现,打包好的脚本,作者默认是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.     }),
    复制代码

    I frequently record, because want to leave something.
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    19

    帖子

    21

    积分

    助理工程师

    Rank: 1

    积分
    21

    新人报道油中2周年喜迎中秋

    发表于 2022-11-19 16:59:23 | 显示全部楼层
    ggnb!!!!!!
    回复

    使用道具 举报

  • TA的每日心情
    郁闷
    1 小时前
  • 签到天数: 26 天

    [LV.4]偶尔看看III

    60

    主题

    320

    帖子

    430

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    430

    荣誉开发者国庆纪念章油中2周年

    发表于 2022-11-19 17:00:23 | 显示全部楼层

    @shabby 这个哥哥才是大佬,没想到来油猴了
    I frequently record, because want to leave something.
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2022-11-24 01:43
  • 签到天数: 126 天

    [LV.7]常住居民III

    201

    主题

    2621

    帖子

    2648

    积分

    管理员

    Rank: 10Rank: 10Rank: 10

    积分
    2648

    荣誉开发者喜迎中秋热心会员活跃会员突出贡献三好学生管理员家财万贯油中2周年

    发表于 2022-11-19 18:16:24 | 显示全部楼层
    wwwwwllllk 发表于 2022-11-19 17:00
    @shabby 这个哥哥才是大佬,没想到来油猴了

    希望能有更多大佬知道这里
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    19

    帖子

    21

    积分

    助理工程师

    Rank: 1

    积分
    21
    发表于 2022-11-20 16:24:56 | 显示全部楼层
    感谢使用,另外小小地做一些补充

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

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



    回复

    使用道具 举报

  • TA的每日心情
    郁闷
    1 小时前
  • 签到天数: 26 天

    [LV.4]偶尔看看III

    60

    主题

    320

    帖子

    430

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    430

    荣誉开发者国庆纪念章油中2周年

    发表于 2022-11-20 16:27:06 | 显示全部楼层
    shabby 发表于 2022-11-20 16:24
    感谢使用,另外小小地做一些补充

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

    之前一直懒得用,昨天用了一下,真的是舒服,和写项目的感觉一样了。只能说哥哥牛逼
    I frequently record, because want to leave something.
    回复

    使用道具 举报

  • TA的每日心情
    开心
    8 小时前
  • 签到天数: 12 天

    [LV.3]偶尔看看II

    0

    主题

    10

    帖子

    12

    积分

    助理工程师

    Rank: 1

    积分
    12
    发表于 2022-11-21 10:12:50 | 显示全部楼层
    谢谢楼主分享。
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表