From 52a6a00c48ed1f8e2a3f43ecd3cc7d5522599528 Mon Sep 17 00:00:00 2001 From: CC11001100 Date: Sun, 27 Jul 2025 08:00:44 +0800 Subject: [PATCH 01/10] feat: add npm package support for template creation - Add npm package configuration for @javascript-reverse-engineering-infrastructure/create-userscript - Add bin/create-userscript.js script for template creation - Update README.md and README_en.md with npm usage instructions - Add .npmignore and PUBLISH.md for npm publishing - Published to npm as @javascript-reverse-engineering-infrastructure/create-userscript@1.0.0 --- .npmignore | 8 +++++++ PUBLISH.md | 59 ++++++++++++++++++++++++++++++++++++++++++++++ README.md | 25 +++++++++++++++++++- README_en.md | 23 ++++++++++++++++++ package.json | 25 ++++++++++++++++---- website/index.html | 10 ++++---- 6 files changed, 140 insertions(+), 10 deletions(-) create mode 100644 .npmignore create mode 100644 PUBLISH.md diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..be02fa0 --- /dev/null +++ b/.npmignore @@ -0,0 +1,8 @@ +node_modules/ +dist/ +.git/ +.gitignore +*.log +.DS_Store +.vscode/ +.idea/ diff --git a/PUBLISH.md b/PUBLISH.md new file mode 100644 index 0000000..bf36b81 --- /dev/null +++ b/PUBLISH.md @@ -0,0 +1,59 @@ +# 发布到npm指南 + +## 发布步骤 + +1. **确保你有npm账号** + ```bash + npm login + ``` + +2. **检查包名是否可用** + ```bash + npm view create-userscript + ``` + 如果显示404错误，说明包名可用。 + +3. **发布到npm** + ```bash + npm publish + ``` + +4. **验证发布成功** + ```bash + npm view create-userscript + ``` + +## 使用方式 + +发布成功后，用户可以通过以下方式使用： + +```bash +# 方式1：使用npm create +npm create @javascript-reverse-engineering-infrastructure/userscript my-project + +# 方式2：使用npx +npx @javascript-reverse-engineering-infrastructure/create-userscript my-project +``` + +## 更新版本 + +当需要更新模板时： + +1. 修改代码 +2. 更新版本号： + ```bash + npm version patch # 补丁版本 (0.0.1 -> 0.0.2) + npm version minor # 次版本 (0.0.1 -> 0.1.0) + npm version major # 主版本 (0.0.1 -> 1.0.0) + ``` +3. 重新发布： + ```bash + npm publish + ``` + +## 注意事项 + +- 包名 `create-userscript` 需要在npm上是唯一的 +- 如果包名已被占用，需要修改 `package.json` 中的 `name` 字段 +- 建议使用语义化版本号 +- 发布前确保所有文件都在 `files` 字段中正确配置 diff --git a/README.md b/README.md index 8437d12..f0d5d8d 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,30 @@ # 三、快速开始 -在当前仓库（https://github.com/JSREI/userscript-template）选择“`Use this template`” --> “`Create a new repository`”，从这个模板仓库创建一个新的仓库： +## 方式一：使用npm命令创建（推荐） + +使用npm命令直接创建新项目： + +```bash +npm create @javascript-reverse-engineering-infrastructure/userscript my-userscript +``` + +或者使用npx： + +```bash +npx @javascript-reverse-engineering-infrastructure/create-userscript my-userscript +``` + +然后进入项目目录并安装依赖： + +```bash +cd my-userscript +npm install +``` + +## 方式二：从GitHub模板创建 + +在当前仓库（https://github.com/JSREI/userscript-template）选择“`Use this template`” --> “`Create a new repository`”，从这个模板仓库创建一个新的仓库： ![image-20230816233501101](README.assets/image-20230816233501101.png) diff --git a/README_en.md b/README_en.md index c9694ab..7417003 100644 --- a/README_en.md +++ b/README_en.md @@ -14,6 +14,29 @@ A plan for using `Node.js` + `Webpack` for modular development of Tampermonkey s # 3. Quick Start +## Method 1: Using npm command (Recommended) + +Create a new project directly using npm command: + +```bash +npm create @javascript-reverse-engineering-infrastructure/userscript my-userscript +``` + +Or using npx: + +```bash +npx @javascript-reverse-engineering-infrastructure/create-userscript my-userscript +``` + +Then enter the project directory and install dependencies: + +```bash +cd my-userscript +npm install +``` + +## Method 2: Create from GitHub template + To quickly get started with the project template, follow these steps: 1. Go to the repository at [https://github.com/JSREI/userscript-template](https://github.com/JSREI/userscript-template). diff --git a/package.json b/package.json index 70e3f52..f1853b8 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,22 @@ { - "name": "userscript-foo", - "version": "0.0.1", - "description": "this is userscript's description", + "name": "@javascript-reverse-engineering-infrastructure/create-userscript", + "version": "1.0.0", + "description": "A template for developing userscripts with Node.js and Webpack", "main": "index.js", + "bin": { + "create-userscript-template": "./bin/create-userscript.js" + }, "repository": "https://github.com/JSREI/userscript-template.git", "namespace": "https://github.com/JSREI/userscript-template.git", "document": "https://github.com/JSREI/userscript-template.git", + "keywords": [ + "userscript", + "tampermonkey", + "greasemonkey", + "template", + "webpack", + "create" + ], "scripts": { "build": "webpack --config webpack.prod.js", "watch": "webpack --watch --config webpack.dev.js" @@ -16,5 +27,11 @@ "webpack": "^5.88.2", "webpack-cli": "^5.1.4", "webpack-merge": "^5.9.0" - } + }, + "files": [ + "bin/", + "template/", + "README.md", + "LICENSE" + ] } diff --git a/website/index.html b/website/index.html index 9836150..2ab7270 100644 --- a/website/index.html +++ b/website/index.html @@ -962,13 +962,13 @@

UserScript Template

使用 Node.js + Webpack 模块化开发油猴脚本的高效方案

-
From ac47512385860d0f30504e79d2f86d8d65926a53 Mon Sep 17 00:00:00 2001 From: CC11001100 Date: Sun, 27 Jul 2025 08:05:58 +0800 Subject: [PATCH 02/10] docs: add banner.txt support documentation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add comprehensive banner.txt usage documentation to README.md and README_en.md - Document variable substitution support in banner.txt - Include examples of compiled output with banner - Resolves #2: 增加对banner.txt的支持 The banner.txt feature was already implemented in webpack.common.js but lacked documentation. Users can now add ASCII art or decorative text that gets inserted as comments in compiled userscripts. --- README.md | 36 ++++++++++++++++++++++++++++++++++++ README_en.md | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 72 insertions(+) diff --git a/README.md b/README.md index f0d5d8d..7968f48 100644 --- a/README.md +++ b/README.md @@ -118,6 +118,42 @@ npm install ![image-20230817004653299](README.assets/image-20230817004653299.png) +## Banner支持 + +项目支持在编译后的代码中添加自定义banner。在项目根目录的`banner.txt`文件中，你可以添加ASCII艺术字或其他装饰性文本： + +``` +▗▄▄▄▖▗▖ ▗▖▗▄▄▖ ▗▄▄▄▖ ▗▄▄▖ ▗▄▄▖▗▄▄▖ ▗▄▄▄▖▗▄▄▖▗▄▄▄▖ + █ ▝▚▞▘ ▐▌ ▐▌▐▌ ▐▌ ▐▌ ▐▌ ▐▌ █ ▐▌ ▐▌ █ + █ ▐▌ ▐▛▀▘ ▐▛▀▀▘ ▝▀▚▖▐▌ ▐▛▀▚▖ █ ▐▛▀▘ █ + █ ▐▌ ▐▌ ▐▙▄▄▖▗▄▄▞▘▝▚▄▄▖▐▌ ▐▌▗▄█▄▖▐▌ █ +``` + +编译时，banner内容会被自动插入到油猴脚本头部注释中，支持以下变量替换： +- `${name}` - 项目名称 +- `${version}` - 版本号 +- `${description}` - 项目描述 +- `${author}` - 作者信息 +- `${repository}` - 仓库地址 +- `${namespace}` - 命名空间 +- `${document}` - 文档地址 + +编译后的效果： +```javascript +// ==UserScript== +// @name my-project +// @version 1.0.0 +// ... +// ==/UserScript== + +// ▗▄▄▄▖▗▖ ▗▖▗▄▄▖ ▗▄▄▄▖ ▗▄▄▖ ▗▄▄▖▗▄▄▖ ▗▄▄▄▖▗▄▄▖▗▄▄▄▖ +// █ ▝▚▞▘ ▐▌ ▐▌▐▌ ▐▌ ▐▌ ▐▌ ▐▌ █ ▐▌ ▐▌ █ +// █ ▐▌ ▐▛▀▘ ▐▛▀▀▘ ▝▀▚▖▐▌ ▐▛▀▚▖ █ ▐▛▀▘ █ +// █ ▐▌ ▐▌ ▐▙▄▄▖▗▄▄▞▘▝▚▄▄▖▐▌ ▐▌▗▄█▄▖▐▌ █ + +// 你的代码... +``` + 然后就可以开心的写代码了，在编写代码的时候你可以使用`npm`命令为项目添加依赖，对于一个稍微复杂点的脚本而言很可能会引用外部的依赖： ```bash diff --git a/README_en.md b/README_en.md index 7417003..c776ebc 100644 --- a/README_en.md +++ b/README_en.md @@ -131,6 +131,42 @@ In addition to variable substitution, all other content will be preserved as is, ![image-20230817004653299](README.assets/image-20230817004653299.png) +## Banner Support + +The project supports adding custom banners to the compiled code. In the `banner.txt` file in the project root directory, you can add ASCII art or other decorative text: + +``` +▗▄▄▄▖▗▖ ▗▖▗▄▄▖ ▗▄▄▄▖ ▗▄▄▖ ▗▄▄▖▗▄▄▖ ▗▄▄▄▖▗▄▄▖▗▄▄▄▖ + █ ▝▚▞▘ ▐▌ ▐▌▐▌ ▐▌ ▐▌ ▐▌ ▐▌ █ ▐▌ ▐▌ █ + █ ▐▌ ▐▛▀▘ ▐▛▀▀▘ ▝▀▚▖▐▌ ▐▛▀▚▖ █ ▐▛▀▘ █ + █ ▐▌ ▐▌ ▐▙▄▄▖▗▄▄▞▘▝▚▄▄▖▐▌ ▐▌▗▄█▄▖▐▌ █ +``` + +During compilation, the banner content will be automatically inserted into the userscript header comments, supporting the following variable substitutions: +- `${name}` - Project name +- `${version}` - Version number +- `${description}` - Project description +- `${author}` - Author information +- `${repository}` - Repository address +- `${namespace}` - Namespace +- `${document}` - Document address + +Compiled result: +```javascript +// ==UserScript== +// @name my-project +// @version 1.0.0 +// ... +// ==/UserScript== + +// ▗▄▄▄▖▗▖ ▗▖▗▄▄▖ ▗▄▄▄▖ ▗▄▄▖ ▗▄▄▖▗▄▄▖ ▗▄▄▄▖▗▄▄▖▗▄▄▄▖ +// █ ▝▚▞▘ ▐▌ ▐▌▐▌ ▐▌ ▐▌ ▐▌ ▐▌ █ ▐▌ ▐▌ █ +// █ ▐▌ ▐▛▀▘ ▐▛▀▀▘ ▝▀▚▖▐▌ ▐▛▀▚▖ █ ▐▛▀▘ █ +// █ ▐▌ ▐▌ ▐▙▄▄▖▗▄▄▞▘▝▚▄▄▖▐▌ ▐▌▗▄█▄▖▐▌ █ + +// Your code... +``` + Then you can happily start coding. While writing code, you can use the `npm` command to add dependencies to your project. For a slightly more complex script, it is very likely to reference external dependencies: ```bash From b632a002518862e2891c28c1d93dd888709f0116 Mon Sep 17 00:00:00 2001 From: CC11001100 Date: Sun, 27 Jul 2025 08:12:51 +0800 Subject: [PATCH 03/10] feat: enhance GitHub Pages with npm support and banner documentation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add npm package creation method as recommended approach in quick start - Add comprehensive banner.txt support documentation with examples - Update navigation to include banner section - Improve user experience with tabbed interface for different creation methods - Resolves #1: 完善README，把使用文档做成GitHub Pages的形式，阅读起来更方便 The GitHub Pages site now provides a complete, user-friendly documentation experience with all the latest features including npm package usage. --- website/index.html | 100 +++++++++++++++++++++++++++++++++++++-------- 1 file changed, 84 insertions(+), 16 deletions(-) diff --git a/website/index.html b/website/index.html index 2ab7270..28e5c37 100644 --- a/website/index.html +++ b/website/index.html @@ -966,6 +966,7 @@

UserScript Template

@@ -1018,22 +1019,38 @@

快速开始

  1. 创建项目

    -

    在 GitHub 模板仓库选择 "Use this template" 创建新仓库

    - - - - - - 前往模板仓库 - - - - - - Loading... - - - 创建项目示例 +
    + + +
    + +
    +

    使用 npm 命令直接创建新项目：

    + 
    npm create @javascript-reverse-engineering-infrastructure/userscript my-userscript
    +

    或者使用 npx：

    + 
    npx @javascript-reverse-engineering-infrastructure/create-userscript my-userscript
    +

    然后进入项目目录：

    + 
    cd my-userscript
    +
    + +
    +

    在 GitHub 模板仓库选择 "Use this template" 创建新仓库

    + + + + + + 前往模板仓库 + + + + + + Loading... + + + 创建项目示例 +

  2. 安装依赖

    @@ -1137,6 +1154,57 @@

    构建发布

    + +

    油猴本地调试指南

    在开发过程中，您需要在油猴中创建一个指向本地文件的脚本。具体步骤如下：

    From ac59a9ac1c12f4bab665a67a4cd446f70b956416 Mon Sep 17 00:00:00 2001 From: CC11001100 Date: Sun, 27 Jul 2025 08:16:29 +0800 Subject: [PATCH 04/10] feat: completely refresh GitHub Pages with modern design and npm focus - Update page title and header description to emphasize modern approach - Add prominent GitHub and npm package links in header - Redesign feature grid with 6 key features including npm creation and banner support - Highlight npm creation as the recommended method with clear advantages - Update project structure documentation to show complete file layout - Improve development workflow documentation - Add visual emphasis on npm package availability - Enhance user experience with better information hierarchy The GitHub Pages site now properly showcases the npm package as the primary way to use the template, making it much more accessible to users. --- website/index.html | 96 +++++++++++++++++++++++++++++++++++++--------- 1 file changed, 78 insertions(+), 18 deletions(-) diff --git a/website/index.html b/website/index.html index 28e5c37..3434ced 100644 --- a/website/index.html +++ b/website/index.html @@ -3,7 +3,7 @@ - UserScript Template - 油猴脚本开发模板 + UserScript Template - 现代化油猴脚本开发模板 + +
    + + + + + + + JSREI + +
    +

    UserScript Template

    现代化油猴脚本开发模板 - 支持模块化开发、热加载、npm包管理

    From 118319ed86b2db662966c454e96ee357b3a9f41f Mon Sep 17 00:00:00 2001 From: CC11001100 Date: Sun, 27 Jul 2025 08:20:57 +0800 Subject: [PATCH 06/10] feat: replace ugly floating buttons with elegant top navigation bar - Remove the ugly floating circular buttons from top-right corner - Add professional top navigation bar with glassmorphism effect - Include brand logo and title on the left side of navbar - Add GitHub and JSREI organization links as styled buttons on the right - Implement responsive design that adapts to mobile screens - Use proper spacing and modern design principles - Add smooth hover animations and visual feedback - Ensure navbar stays fixed at top with proper z-index The new navigation bar provides much better UX and visual appeal compared to the previous floating button approach. --- website/index.html | 183 ++++++++++++++++++++++++++++++++------------- 1 file changed, 130 insertions(+), 53 deletions(-) diff --git a/website/index.html b/website/index.html index 516b09f..f817810 100644 --- a/website/index.html +++ b/website/index.html @@ -661,84 +661,147 @@ padding: 10px; } - /* 右上角按钮样式 */ - .top-right-buttons { + /* 顶部导航栏样式 */ + .top-navbar { position: fixed; - top: 20px; - right: 20px; - display: flex; - gap: 10px; + top: 0; + left: 0; + right: 0; + height: 60px; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(0, 0, 0, 0.1); z-index: 1000; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 30px; + transition: all 0.3s ease; } - .top-button { + .navbar-brand { display: flex; align-items: center; - justify-content: center; - width: 50px; - height: 50px; - border-radius: 50%; + gap: 12px; + text-decoration: none; + color: #1a365d; + font-weight: 600; + font-size: 1.2em; + } + + .navbar-brand:hover { + color: #4299e1; + } + + .navbar-brand svg { + width: 32px; + height: 32px; + fill: currentColor; + } + + .navbar-links { + display: flex; + align-items: center; + gap: 20px; + } + + .navbar-link { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 16px; + border-radius: 8px; text-decoration: none; + color: #4a5568; + font-weight: 500; transition: all 0.3s ease; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(10px); - border: 1px solid rgba(255, 255, 255, 0.2); + border: 1px solid transparent; + } + + .navbar-link:hover { + background: rgba(66, 153, 225, 0.1); + color: #4299e1; + border-color: rgba(66, 153, 225, 0.2); } - .github-button { - background: linear-gradient(135deg, rgba(36, 41, 46, 0.9), rgba(68, 77, 86, 0.9)); + .navbar-link.github { + background: linear-gradient(135deg, #24292e, #444d56); color: white; + border-color: #24292e; } - .github-button:hover { - background: linear-gradient(135deg, rgba(36, 41, 46, 1), rgba(68, 77, 86, 1)); - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); + .navbar-link.github:hover { + background: linear-gradient(135deg, #1a1e22, #2f363d); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(36, 41, 46, 0.3); } - .jsrei-button { - background: linear-gradient(135deg, rgba(66, 153, 225, 0.9), rgba(102, 126, 234, 0.9)); + .navbar-link.jsrei { + background: linear-gradient(135deg, #4299e1, #667eea); color: white; + border-color: #4299e1; } - .jsrei-button:hover { - background: linear-gradient(135deg, rgba(66, 153, 225, 1), rgba(102, 126, 234, 1)); - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(66, 153, 225, 0.3); + .navbar-link.jsrei:hover { + background: linear-gradient(135deg, #3182ce, #5a67d8); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3); } - .top-button svg { - width: 24px; - height: 24px; + .navbar-link svg { + width: 18px; + height: 18px; fill: currentColor; } - .top-button .jsrei-text { - font-size: 12px; - font-weight: bold; - letter-spacing: 0.5px; + /* 为页面内容添加顶部间距 */ + body { + padding-top: 60px; } /* 响应式设计 */ @media (max-width: 768px) { - .top-right-buttons { - top: 15px; - right: 15px; + .top-navbar { + padding: 0 20px; + height: 55px; + } + + body { + padding-top: 55px; + } + + .navbar-brand { + font-size: 1.1em; gap: 8px; } - .top-button { - width: 45px; - height: 45px; + .navbar-brand svg { + width: 28px; + height: 28px; + } + + .navbar-links { + gap: 12px; } - .top-button svg { - width: 20px; - height: 20px; + .navbar-link { + padding: 6px 12px; + font-size: 0.9em; } - .top-button .jsrei-text { - font-size: 10px; + .navbar-link svg { + width: 16px; + height: 16px; + } + } + + @media (max-width: 480px) { + .navbar-link span { + display: none; + } + + .navbar-link { + padding: 8px; } } @@ -1039,17 +1102,31 @@ - -
    - - - + +UserScript Template - - JSREI - -
    + +
    + + + + + GitHub + + + + + + + JSREI + +
    +

    UserScript Template

    From 36ec9caf77120ce928d0245e5cf4a8c126990ca8 Mon Sep 17 00:00:00 2001 From: CC11001100 Date: Sun, 27 Jul 2025 08:25:18 +0800 Subject: [PATCH 07/10] cleanup: remove duplicate GitHub and npm buttons from header - Remove the old GitHub repository and npm package buttons from header section - Keep only the clean navigation bar at the top - Eliminate visual redundancy and improve page layout - Maintain single source of navigation links in the top navbar This cleanup ensures users aren't confused by duplicate navigation elements and provides a cleaner, more professional appearance. --- website/index.html | 29 ----------------------------- 1 file changed, 29 deletions(-) diff --git a/website/index.html b/website/index.html index f817810..10267e5 100644 --- a/website/index.html +++ b/website/index.html @@ -1131,35 +1131,6 @@

    UserScript Template

    现代化油猴脚本开发模板 - 支持模块化开发、热加载、npm包管理

    - -
    - - - - - - GitHub 仓库 - - - - - - Loading... - - - - - - - - - npm 包 - - - v1.0.0 - - -
    @@ -1572,21 +1598,60 @@

    开发调试