开发背景

首先尝试过油猴对于大型脚本的支持(脚本在50~100kb)还是不错的, 所以萌生用vue实现一个小工具, 在测试过vue2和vue3打包后的大小后vue3会小10~20k, 决定采用vue3

功能介绍

效果, 鼠标移动的时候会显示, 鼠标静止后15s 会自动隐藏, 视频全屏时也不会显示

只有页面中出现视频标签时才会显示, 对于有些网站采用自研播放器的并不支持, 采用jpg格式主要是为了速度考虑, 并且根据b站视频清晰度确定截图大小, 如果图像不清晰, 可以使用1080P视频截图

双击会变大, 可移动到任意位置, 并记住该位置(使用localstorage实现), 几个按钮分别为, 缩小, 展开已截图的列表, 清空列变, 显示截图数目

快捷键截图 ctrl+shift+s 或者单击照相机也可以截图

截图列表中可以直接下载或删除, 也可以点击图片可以查看大图, 并下载, 点击遮罩会取消显示

下载安装

脚本地址, 由于不允许使用压缩后的js, 可能会被移除.....不过这次也只是验证方案可行性, 影响不大, 反正我本地装了....

B 站视频截图工具 UI 版 ctrl+shift+s

开发完后对比chrome插件的开发确实体验很好, 而且可以实现几乎所有需求, 发布也相对简单, 配合vue或react完全可以实现和插件近乎一样的效果

实现思路

对于油猴脚本, 大多数都是一个js文件, 所以我们需要设置webpack打包后也是一个单独的js, 至于如何挂载, 则是动态创建元素

入口main.js, 动态创建一个div, 并将vue实例挂载上去, div的id尽量不要与页面中的重复

import {createApp} from 'vue'
import App from './App.vue'

let id = `vue-video-capture_${+new Date()}`
let div = document.createElement('div')
div.setAttribute('id', id)
document.body.appendChild(div)
createApp(App).mount(`#${id}`)

配置webpack, 打包为一个文件

const path = require("path");
const {VueLoaderPlugin} = require("vue-loader");
// const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

module.exports = (env = {}) => ({
  mode: env.prod ? "production" : "development",
  devtool: env.prod ? "source-map" : "cheap-module-eval-source-map",
  entry: path.resolve(__dirname, "./src/main.js"),
  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/dist/"
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      // this isn't technically needed, since the default `vue` entry for bundlers
      // is a simple `export * from '@vue/runtime-dom`. However having this
      // extra re-export somehow causes webpack to always invalidate the module
      // on the first HMR update and causes the page to reload.
      vue: "@vue/runtime-dom"
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: "vue-loader"
      },
      {
        test: /\.png$/,
        use: {
          loader: "url-loader",
          options: {limit: 8192 * 1000}
        }
      },
      // {
      //   test: /\.css$/,
      //   use: [
      //     {
      //       loader: MiniCssExtractPlugin.loader,
      //       options: {hmr: !env.prod}
      //     },
      //     'css-loader'
      //   ]
      // }
      {
        test: /\.css|\.less$/,
        use: ["style-loader", "css-loader","less-loader"]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    // new MiniCssExtractPlugin({
    //     //   filename: "[name].css"
    //     // })
    // new BundleAnalyzerPlugin()

  ],
  devServer: {
    inline: true,
    hot: true,
    stats: "minimal",
    contentBase: __dirname,
    overlay: true
  },
  optimization: {
    minimizer: [
      (compiler) => {
        const TerserPlugin = require('terser-webpack-plugin');
        new TerserPlugin({ /* your config */ }).apply(compiler);
      }
    ],
  },
});

其他开发方式和vue3一样, 调试方法见 tampermonkey 简单脚本开发

一些感想

vue3的第一个小例子写完后突然明白了大佬们担心的意大利面式的代码风格, 之前是按照computed, methods, 等分割函数和代码, 现在全部放到setup 中, 而且为了省事, 毕竟有共有的作用域, 很容易就会写出耦合的代码, 比如两个函数使用同样的变量等, 可能也是因为对这种新的开发方式不熟悉, 希望后面有其他更好更优雅的办法解决这个问题吧.