← 全部文章

操作类型

BUTTON：最简单的 JustZix 动作 —— 触发即忘，支持按钮级个性化

15 5月 2026 · 作者 JustZix Team

有一种动作类型基础到在文章里都被略过。BUTTON —— 点击 → 执行代码 → 完成。没有状态、没有 memory、没有要选的选项列表。它是动作栏里一个「无状态函数」。但正是这种简单让它最强大：BUTTON 是一个典型 JustZix 配置里全部动作的 80%，因为你想做的大多数事情都是「点击 = X」。

何时用 BUTTON，何时用别的？

只有 BUTTON 是无状态的。所有其他类型都按 action.id 保存一个值（sessionStorage + chrome.storage.local 备份）。BUTTON = 纯函数：输入（点击）→ 输出（对页面的影响）。

第一个 BUTTON 动作

在 JustZix 编辑器里 → 规则 → 动作栏 → 「+ BUTTON」。配置：

label: "🚀 填入演示数据"   // 按钮文字 + 图标
code: |
  // value、$el、$action 作为 extra 自动注入
  document.querySelector('[name=email]').value = 'demo@test.com';
  document.querySelector('[name=name]').value = 'Demo User';
  document.querySelectorAll('input, textarea').forEach(el =>
    el.dispatchEvent(new Event('input', { bubbles: true }))
  );
  JUSTZIX.log('演示数据已填入。');

点击「🚀 填入演示数据」→ 表单字段被填上，页面框架（React/Vue/Angular）看到 input 事件 → 状态更新。

两种颜色 + customStyles

BUTTON 有 2 种基础颜色：

color       → 按钮的背景
colorText   → label 文字的颜色（如果是 emoji 也包括图标）

此外有一个可选的 customStyles 对象 —— 细粒度的 CSS 覆盖：

customStyles: {
  padding: '8px 16px',         // 默认 6px 12px
  fontSize: '14px',             // 默认 12px
  borderRadius: '4px',          // 默认 6px
  fontFamily: 'Fira Code, monospace',
  fontWeight: '600',
  letterSpacing: '0.5px',
}

渲染：customStyles 的每个属性都经过 el.style.setProperty(key, value, 'important') —— 胜过 JustZix 的默认规则。这让你能把按钮和你正在修改的网站的品牌风格对齐（例如 Bootstrap 蓝、Material Design 涟漪、按域名个性化）。

代码字段里有什么可用

BUTTON 代码通过 background.js 在 MAIN world 里运行（chrome.scripting.executeScript world:'MAIN'）。自动可用：

• window.JZ —— 动作辅助函数（JZ.click、JZ.value、JZ.setValue 等），没有冲突时
• window.JUSTZIX —— 日志器（自 v2.13.76，品牌名，始终可用）
• $el —— 对按钮的引用（HTMLElement）—— 如果你想在点击后修改按钮本身，很有用
• $action —— 对象 {id, label, type, el} —— 关于该动作的元信息
• 完整的页面上下文 —— 页面所有的 window 全局变量（jQuery、React 内部等）
• async/await 没问题 —— 包装器是一个 async IIFE

使用场景 1 —— 快速链

经常重复的动作序列往往可以由单个按钮自动化：

// 动作「🔥 测试流程」
JZ.click('Login');               // 点击 label 为「Login」的 BUTTON 动作
await new Promise(r => setTimeout(r, 500));
JZ.click('加入购物车');
await new Promise(r => setTimeout(r, 500));
JZ.click('Checkout');
JUSTZIX.log('测试流程完成。');

3 个按钮链合一 → 点击「测试流程」让它们依次启动。3 个子按钮中的每一个仍然可单独复用。

使用场景 2 —— 条件执行

BUTTON 是「按需执行」，所以非常适合带 URL 守卫的破坏性脚本：

// 动作「🗑️ 清空 staging 购物车」
if (!location.hostname.includes('staging')) {
  JUSTZIX.error('仅限 staging！取消。');
  alert('这个按钮只在 staging 上工作。');
  return;
}
const items = document.querySelectorAll('.cart-item .remove-btn');
items.forEach(btn => btn.click());
JUSTZIX.log(`已清空 ${items.length} 件商品。`);

没有自动运行的风险（不像 JS pane），没有要手动填的文本字段 —— 只是在你想要时、你想要的地方点一下。

使用场景 3 —— 点击后的视觉反馈

老经典：一个在成功时改变 label 的按钮：

// 动作「💾 保存状态」
const oldLabel = $el.textContent;
$el.textContent = '⏳ 保存中...';
$el.style.opacity = '0.6';
try {
  await fetch('/api/state', {
    method: 'POST',
    body: JSON.stringify(getState()),
  });
  $el.textContent = '✓ 已保存';
  setTimeout(() => {
    $el.textContent = oldLabel;
    $el.style.opacity = '';
  }, 2000);
} catch (e) {
  $el.textContent = '✗ 错误';
  JUSTZIX.error('保存失败', e);
}

$el 是按钮的 DOM 引用 —— 直接修改它。无需外部状态的视觉反馈。

使用场景 4 —— 多个按钮，一个流程

与其用一个「完整 QA 流程」按钮，不如在一个视觉簇里用 5 个独立的：

// 动作「1️⃣」
JUSTZIX.log('步骤 1：登录');
JZ.click('Login as test user');

// 动作「2️⃣」
JUSTZIX.log('步骤 2：导航');
location.href = '/admin/orders';

// 动作「3️⃣」
JUSTZIX.log('步骤 3：过滤');
document.querySelector('select.status').value = 'pending';
document.querySelector('select.status').dispatchEvent(new Event('change'));

每个步骤作为一个独立按钮 → 用户在视觉上看到自己在流程里走到哪一步了。此外他可以重复任意步骤而无需从头开始。

坑

• BUTTON 代码必须有一个 label。isActionRenderable 检查要求两者都有（label + 代码）。没有代码的动作永远不会被渲染。
• customStyles 通过 setProperty(..., 'important') 胜过大多数页面 CSS，但有些网站样式用特定的伪元素（带 content 的 ::before）—— customStyles 在那里帮不上忙。变通：在同一规则的 CSS 区域加一条 CSS 规则（级联里的 !important 仍然胜出）。
• 代码在 MAIN world 里运行。意味着：页面脚本（React、Vue、jQuery）能看到你派发的事件。但也意味着：页面脚本可能干扰你的代码（例如覆盖 fetch、console）。Output Console 通过 chrome.scripting.executeScript 的修复有帮助（对 CSP 免疫），但总的原则是：页面和你的代码共享作用域。
• 代码里的异步错误不会自动出现在 Output Console 里。在 await 语句周围包 try/catch + 显式的 JUSTZIX.error。或者：在一条 JS 规则里全局用 window.addEventListener('error')。
• 没有内置的节流/防抖。点击-点击-点击 = 3 次独立的代码调用。如果代码很贵（fetch、重写 DOM），自己保护它：let busy = false; + 守卫。

接下来做什么

BUTTON 是所有 JustZix 工具栏的脊梁。另见其他动作类型：

• SELECT static vs js —— 从选项列表里选择
• INPUT —— 单行文本 + 回车→运行
• TEXTAREA —— 多行记事本
• SLIDER —— 原生范围控制器
• TOGGLE3 —— 三态分段控件
• window.JZ + JUSTZIX 辅助函数 —— 程序化 API

安装 JustZix —— 完全免费，无需账号，没有服务器。