mcpField
C
creating-bookmarklets

creating-bookmarklets

github.com/oaustegard开发15747 次安装1 天前更新
代码仓库

关于 creating-bookmarklets

指导创建和交付浏览器书签脚本的技能，涵盖代码格式、安装说明和测试检查，适用于制作可从浏览器书签运行的小型脚本。

主要功能

  1. 01使用 IIFE 包装并添加 javascript: 前缀
  2. 02仅使用块注释
  3. 03整理易读的源代码
  4. 04提供安装器或生成安装链接
  5. 05检查兼容性和错误处理

适用场景

  1. 01创建提取网页数据的书签脚本
  2. 02制作复制网页内容的书签脚本
  3. 03交付可直接安装的浏览器脚本

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oaustegard/claude-skills --skill creating-bookmarklets

安装后在 Claude Code 中输入/creating-bookmarklets确认已加载。

附带文件README.md

详细介绍

书签脚本创建

关键要求

注释风格——绝对要求

仅使用 /* */ 注释。绝不使用 // 注释。

书签脚本的执行上下文无法处理 // 风格的注释。所有注释都必须使用块注释格式。

/* ✓ Correct */
const x = 5; /* inline */

/* ✗ Wrong - breaks bookmarklets */
// const x = 5;
const y = 10; // inline
IIFE 包装

所有书签脚本都必须使用 IIFE 包装：

(function() {
  /* bookmarklet code */
})();
协议前缀

所有交付的书签脚本都必须以 javascript: 协议开头：

javascript:(function() {
  /* bookmarklet code */
})();

这样代码就可以立即使用，无需在安装时手动修改。

工作流

1. 生成格式整齐的代码

创建易读的源代码，要求：

  • 使用 2 个空格缩进
  • 使用描述性变量名
  • 为关键部分添加块注释
  • 逻辑结构清晰
  • 在代码前添加 javascript: 协议

带有 javascript: 前缀的版本会存储在 GitHub 并展示给用户，可直接安装，无需手动修改。

2. 提供安装方式

默认方式——引用安装器：

Install: https://austegard.com/web-utilities/bookmarklet-installer.html

安装器负责：

  • 使用 Terser 进行压缩
  • 对 URL 进行编码
  • 生成可拖动的链接
  • 集成 GitHub 仓库

替代方式——通过程序生成链接： 如有需要，使用 Terser.js 创建可安装链接：

async function createBookmarkletLink(code, title) {
  const minified = await Terser.minify(code);
  const encoded = encodeURIComponent(minified.code).replace(/'/g, "%27");
  return `<a href="javascript:${encoded}">${title}</a>`;
}

需要：<script src="https://cdn.jsdelivr.net/npm/terser/dist/bundle.min.js"></script>

3. 交付内容

始终提供：

  1. 带有 javascript: 协议前缀的格式整齐的源代码
  2. 安装方式（安装器链接或生成的链接）
  3. 功能简介
  4. 使用说明

交付的代码应可直接使用——用户应能复制整个代码块（包括 javascript:），无需修改。

代码规范

错误处理
(function() {
  try {
    /* main logic */
  } catch (error) {
    console.error('Bookmarklet error:', error);
    alert('Operation failed: ' + error.message);
  }
})();
控制台日志

默认包含调试跟踪信息：

console.log('Bookmarklet: Starting');
/* operations */
console.log('Bookmarklet: Complete');
用户反馈
/* Success */
alert('✓ Content copied to clipboard');

/* Error */
alert('✗ Failed to access clipboard');

常见模式

DOM 操作
(function() {
  const element = document.querySelector('.target');
  if (!element) {
    alert('Element not found');
    return;
  }
  /* manipulate element */
})();
数据提取
(function() {
  const data = Array.from(document.querySelectorAll('.item'))
    .map(item => ({
      title: item.querySelector('.title')?.textContent.trim(),
      value: item.querySelector('.value')?.textContent.trim()
    }));
  
  console.log('Extracted:', data);
})();
剪贴板操作
(function() {
  const text = 'content to copy';
  navigator.clipboard.writeText(text)
    .then(() => alert('✓ Copied'))
    .catch(err => {
      console.error('Clipboard error:', err);
      alert('✗ Copy failed');
    });
})();
动态加载库
(function() {
  if (typeof someLibrary === 'undefined') {
    const script = document.createElement('script');
    script.src = 'https://cdn.example.com/library.js';
    script.onload = function() {
      /* proceed with logic */
    };
    document.head.appendChild(script);
  }
})();

浏览器兼容性

为不支持的功能提供回退方案：

if (!navigator.clipboard) {
  alert('Clipboard API not supported');
  return;
}

限制

不能使用：

  • 未嵌入的外部文件（CSS、图片）
  • 构建工具或预处理
  • // 风格的注释

可以使用：

  • Fetch API
  • localStorage/sessionStorage
  • 现代浏览器 API
  • CDN 库（动态加载）

测试

交付前：

  1. 确认不存在 // 注释
  2. 在浏览器控制台中测试，并使用 IIFE 包装
  3. 检查 DOM 元素缺失时的错误处理
  4. 验证所有情况下的用户反馈

输出示例

javascript:(function() {
  /* Pretty-printed bookmarklet code */
})();

Install: https://austegard.com/web-utilities/bookmarklet-installer.html

Extracts all links from current page and copies to clipboard as markdown list. Works on any webpage.

GitHub 存储

用户仓库：https://github.com/oaustegard/bookmarklets

格式整齐的格式符合存储要求。安装器会直接从此仓库加载。

评论

支持 Markdown