userscript-extend-webpage 1.0.0

package/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 k34869
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# userscript-extend-webpage
+
+## install
+
+```shell
+npm install userscript-extend-webpage
+# pnpm add userscript-extend-webpage
+# nub install userscript-extend-webpage
+# ...
+```
+
+## usage
+
+```
+Usage: uewp [options] [command]
+
+Web extension development tool based on UserScript.
+
+Options:
+  -V, --version  output the version number
+  -h, --help     display help for command
+
+Commands:
+  init [name]    Initialize uewp project.
+  dev [options]  Build for development mode.
+  build          Build for production mode.
+  docs           Open tampermonkey documentation in default browser.
+```

package/lib/core.js

@@ -0,0 +1,165 @@
+import path from 'path';
+import { pathToFileURL } from 'url';
+import fs from 'fs-extra';
+import { execAsync } from './execAsync.js';
+import { rollup } from 'rollup';
+import postcss from 'rollup-plugin-postcss';
+import postcssUrl from 'postcss-url';
+import importRaw from 'rollup-plugin-import-raw';
+import image from '@rollup/plugin-image';
+import { isArray, isObject } from './utils.js';
+
+/**
+ * 创建 uewp 项目
+ * @param {string} [name=''] 项目名称
+ * @return {Promise} 创建成功或失败的 Promise
+ */
+async function createProject(name) {
+  const projectDirectory = name ?? '.';
+  return execAsync(
+    `git clone -b template --single-branch --depth 1 https://github.com/k34869/userscript-extend-webpage.git ${projectDirectory}`,
+  ).then(async () => {
+    return Promise.all([
+      fs.readFile(path.resolve(projectDirectory, 'package.json'), 'utf8'),
+      fs.writeFile(
+        path.resolve(projectDirectory, 'README.md'),
+        `# ${name ?? path.basename(process.cwd())}`,
+      ),
+      execAsync(`git -C ${projectDirectory} branch -M main`),
+    ]).then(([packageJson]) => {
+      const packages = JSON.parse(packageJson);
+      packages.name = name ?? path.basename(process.cwd());
+      return fs.writeFile(
+        path.resolve(projectDirectory, 'package.json'),
+        JSON.stringify(packages, null, 2),
+        'utf8',
+      );
+    });
+  });
+}
+
+/**
+ * 获取 用户脚本 配置对象
+ * @return {Promise} resolve(配置对象)
+ */
+async function getConfiguration() {
+  return Promise.all([
+    import(pathToFileURL(path.resolve(process.cwd(), 'userscript.config.js'))),
+    fs.readFile('./package.json', 'utf8'),
+  ]).then(values => {
+    const [{ default: comfigs }, packageJson] = values;
+    const userscriptConfig = structuredClone(comfigs);
+    const packages = JSON.parse(packageJson);
+
+    // userscript.config.js 与 package.json 配置合并
+    userscriptConfig.name = userscriptConfig.name ?? packages.name;
+    userscriptConfig.version = userscriptConfig.version ?? packages.version;
+    userscriptConfig.description =
+      userscriptConfig.description ?? packages.description;
+    userscriptConfig.author = userscriptConfig.author ?? packages.author;
+    userscriptConfig.license = userscriptConfig.license ?? packages.license;
+
+    return userscriptConfig;
+  });
+}
+
+/**
+ * 生成用户脚本头
+ * @param {object} configuration 配置对象
+ * @return {string} header 用户脚本元数据
+ */
+function generateUserScriptHeader(configuration) {
+  let header = '';
+  for (const key in configuration) {
+    if (isArray(configuration[key])) {
+      for (const item of configuration[key]) {
+        header += `// @${key}\t${item}\n`;
+      }
+    } else if (isObject(configuration[key])) {
+      for (const subKey in configuration[key]) {
+        header += `// @${key} ${subKey} ${configuration[key][subKey]}\n`;
+      }
+    } else if (typeof configuration[key] === 'string') {
+      header += `// @${key}\t${configuration[key]}\n`;
+    } else {
+      throw new Error(`'userscript.json' configuration '${key}' type error.`);
+    }
+  }
+  return `// ==UserScript==\n${header}// ==/UserScript==\n`;
+}
+
+/**
+ * 模块打包
+ * @return {Promise} resolve(生成结果)
+ */
+async function moduleBundler() {
+  return rollup({
+    input: './src/main.js',
+    plugins: [
+      postcss({
+        extract: false,
+        plugins: [
+          postcssUrl({
+            url: 'inline',
+            maxSize: 1024 * 10,
+          }),
+        ],
+      }),
+      image(),
+      importRaw(),
+    ],
+  }).then(bundle => {
+    return bundle.generate({
+      format: 'iife',
+      inlineDynamicImports: true,
+    });
+  });
+}
+
+/**
+ * 构建生成 UserScript
+ * @param {string} [mode='production'] 构建模式(production = 生产模式, development = 开发模式)
+ * @return {Promise} 构建成功或失败的 Promise
+ */
+async function build(mode = 'production') {
+  return Promise.all([getConfiguration(), moduleBundler(), fs.mkdirs('./dist')])
+    .then(values => {
+      const [
+        userscriptConfig,
+        {
+          output: [{ code }],
+        },
+      ] = values;
+
+      if (mode === 'production') {
+        const header = generateUserScriptHeader(userscriptConfig);
+        return {
+          userscriptConfig,
+          code: `${header}\n${code}`,
+        };
+      } else if (mode === 'development') {
+        return fs
+          .writeFile(`./dist/${userscriptConfig.name}.dev.js`, code, 'utf8')
+          .then(() => {
+            const require = [
+              `file:///${path.resolve('./dist/', userscriptConfig.name + '.dev.js')}`,
+            ];
+            userscriptConfig.require = userscriptConfig.require
+              ? require.concat(userscriptConfig.require)
+              : require;
+            const header = generateUserScriptHeader(userscriptConfig);
+            return {
+              userscriptConfig,
+              code: header,
+            };
+          });
+      }
+    })
+    .then(async ({ userscriptConfig, code }) => {
+      return fs
+        .writeFile(`./dist/${userscriptConfig.name}.user.js`, code, 'utf8')
+        .then(() => userscriptConfig);
+    });
+}
+
+export { createProject, build };

package/lib/execAsync.js

@@ -0,0 +1,16 @@
+import { exec } from 'child_process';
+
+export function execAsync(command, options = {}) {
+  return new Promise((resolve, reject) => {
+    exec(command, options, (error, stdout, stderr) => {
+      if (error) {
+        // 将错误信息附加到 stdout/stderr 以便调试
+        error.stdout = stdout;
+        error.stderr = stderr;
+        reject(error);
+      } else {
+        resolve({ stdout, stderr });
+      }
+    });
+  });
+}

package/lib/uewp.js

@@ -0,0 +1,33 @@
+/**
+ * URL 模式匹配
+ * @param {string} pattern 模式
+ * @param {string} [url=location.href] 要匹配的 URL
+ * @return {boolean} 匹配是否成功
+ */
+export function urlMatch(pattern, url = location.href) {
+  pattern = pattern.replace(/\*/g, '.*?');
+  pattern = '^' + pattern + '$';
+  const regex = new RegExp(pattern);
+  return regex.test(url);
+}
+
+/**
+ * 应用路由
+ * @param {object} routes 路由对象
+ * @return {void}
+ */
+export function applyRoutes(routes) {
+  for (const route of routes) {
+    if (urlMatch(route.path)) {
+      if (typeof route.exectors === 'function') {
+        route.exectors();
+      } else if (typeof Array.isArray(route.exectors)) {
+        for (const handler of routes.exectors) {
+          if (typeof handler === 'function') {
+            handler();
+          }
+        }
+      }
+    }
+  }
+}

package/lib/utils.js

@@ -0,0 +1,26 @@
+/**
+ * 判断字符串是否符合 URL 规范
+ * @param {String} string 输入字符串
+ * @return {Boolean}
+ */
+export function isUrlFriendly(string) {
+  return /^[^\s~`!#$%\^&*+=\[\]\{|};:"'<>,/?]+$/.test(string);
+}
+
+/**
+ * 判断值是否是数组
+ * @param {any} value 输入值
+ * @return {Boolean}
+ */
+export function isArray(value) {
+  return Object.prototype.toString.call(value) === '[object Array]';
+}
+
+/**
+ * 判断值是否是对象
+ * @param {any} value 输入值
+ * @return {Boolean}
+ */
+export function isObject(value) {
+  return Object.prototype.toString.call(value) === '[object Object]';
+}

package/main.js

@@ -0,0 +1,168 @@
+import packages from './package.json' with { type: 'json' };
+import fs from 'fs-extra';
+import path from 'path';
+import { program } from 'commander';
+import { execAsync } from './lib/execAsync.js';
+import { build, createProject } from './lib/core.js';
+import { isUrlFriendly } from './lib/utils.js';
+import chokidar from 'chokidar';
+import ora from 'ora';
+import chalk from 'chalk';
+import ignore from 'ignore';
+
+let prevName;
+
+const initConsole = name => {
+  const spinner = ora('initialize').start();
+  spinner.start();
+  const projectName = name ?? path.basename(process.cwd());
+  if (isUrlFriendly(projectName)) {
+    createProject(name)
+      .then(() => {
+        spinner.stop();
+        console.log(
+          '\n',
+          chalk.green.bold(
+            'initialization successful.',
+            '\n',
+            name
+              ? `project for '${projectName}' directory.`
+              : 'project for current directory.',
+          ),
+        );
+      })
+      .catch(error => {
+        console.log(error.stderr);
+        throw error;
+      });
+  } else {
+    throw new Error(
+      `Sorry, name can only contain URL-friendly characters and name can no longer contain special characters ("~'!()*").`,
+    );
+  }
+};
+
+const buildConsole = async mode => {
+  const start = process.hrtime();
+  const spinner = ora('building').start();
+  spinner.start();
+  return build(mode)
+    .then(({ name }) => {
+      const [sec, nanosec] = process.hrtime(start);
+      const ms = sec * 1000 + nanosec / 1e6;
+      spinner.stop();
+      if (mode === 'development') {
+        console.log(
+          '\n',
+          chalk.blue.bold(
+            `src/main.js -> dist/${name}.user.js @require dist/${name}.dev.js`,
+            '\n',
+            chalk.green.bold(`Took ${parseInt(ms)}ms`),
+          ),
+        );
+      } else {
+        console.log(
+          '\n',
+          chalk.blue.bold(
+            `src/main.js -> dist/${name}.user.js`,
+            '\n',
+            chalk.green.bold(`Took ${parseInt(ms)}ms`),
+          ),
+        );
+      }
+      return name;
+    })
+    .catch(error => {
+      throw error;
+    });
+};
+
+const watcherBuildConsole = (path, state) => {
+  const start = process.hrtime();
+  console.log(
+    chalk.yellow(
+      ` ${new Date()} '${path}' is ${state === undefined ? 'delete' : 'change'}, building...`,
+    ),
+  );
+  build('development').then(({ name }) => {
+    if (prevName !== name) {
+      console.log(
+        '',
+        chalk.blue.bold(
+          `src/main.js -> dist/${name}.user.js @require dist/${name}.dev.js`,
+        ),
+      );
+    }
+    prevName = name;
+    const [sec, nanosec] = process.hrtime(start);
+    const ms = sec * 1000 + nanosec / 1e6;
+    console.log(chalk.green.bold(` Took ${parseInt(ms)}ms`));
+  });
+};
+
+const openDocs = () => {
+  execAsync(
+    (process.platform === 'win32'
+      ? 'start'
+      : process.platform === 'darwin'
+        ? 'open'
+        : 'xdg-open') +
+      ' https://www.tampermonkey.net/documentation.php?locale=zh',
+  ).catch(error => {
+    throw error;
+  });
+};
+
+program
+  .name(packages.binName)
+  .version(packages.version)
+  .description(packages.description)
+  .action(buildConsole);
+
+program
+  .command('init [name]')
+  .description('Initialize uewp project.')
+  .action(initConsole);
+
+program
+  .command('dev')
+  .description('Build for development mode.')
+  .option('-w, --watch', 'Rebuilds when modules have changed on disk.')
+  .action(opts => {
+    buildConsole('development').then(fristName => {
+      prevName = fristName;
+      if (opts.watch) {
+        const ig = ignore();
+        const gitignoreContent = fs.readFileSync(
+          path.resolve('.gitignore'),
+          'utf8',
+        );
+        ig.add(gitignoreContent);
+
+        const isIgnored = filePath => {
+          const relativePath = path.relative(process.cwd(), filePath);
+          return relativePath === '' ? false : ig.ignores(relativePath);
+        };
+
+        const watcher = chokidar.watch('./', {
+          ignored: isIgnored,
+          ignoreInitial: true,
+          persistent: true,
+        });
+        watcher.on('change', watcherBuildConsole);
+        watcher.on('unlink', watcherBuildConsole);
+      }
+    });
+  });
+
+program
+  .command('build')
+  .description('Build for production mode.')
+  .action(buildConsole);
+
+program
+  .command('docs')
+  .description('Open tampermonkey documentation in default browser.')
+  .action(openDocs);
+
+program.parse();