如何写一个chrome插件实现截屏自动生成步骤图文教程转成pdf或网页？

下面我将为你提供一个完整的 Chrome 扩展项目结构、所有必需的代码文件以及详细的安装和使用说明。

项目结构

首先，在你的电脑上创建一个文件夹，例如 tutorial-maker-extension。在这个文件夹中，创建以下文件和子文件夹：

tutorial-maker-extension/
├── manifest.json            # 扩展的配置文件 (核心)
├── background.js            # 后台脚本，用于监听图标点击
├── content.js               # 内容脚本，注入到网页中实现核心功能
├── style.css                # 注入到网页中的样式文件
├── icons/                     # 存放图标的文件夹
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
└── libs/                      # 存放第三方库的文件夹
    ├── html2canvas.min.js
    └── jspdf.umd.min.js

准备工作:

下载库文件:

下载 html2canvas: 点击这里 (右键 -> 另存为...)，保存到 libs 文件夹。

下载 jsPDF: 点击这里 (右键 -> 另存为...)，保存到 libs 文件夹。

准备图标:

你需要准备三个尺寸的 PNG 图标：16x16, 48x48, 128x128 像素。你可以使用任何你喜欢的图标，或者在网上找一个免费的 "tutorial" 或 "camera" 图标。将它们命名为 icon16.png, icon48.png, icon128.png 并放入 icons 文件夹。

第1步: manifest.json

这是扩展的配置文件，告诉 Chrome 扩展的名称、权限、需要运行的脚本等。

{
  "manifest_version": 3,
  "name": "网页图文教程生成器",
  "version": "1.0",
  "description": "点击网页元素，自动生成带截图和文本的步骤教程，并导出为PDF。",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    },
    "default_title": "制作图文教程"
  },
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": [
        "libs/html2canvas.min.js",
        "libs/jspdf.umd.min.js",
        "content.js"
      ],
      "css": ["style.css"]
    }
  ]
}

关键点解释:

"manifest_version": 3: 使用最新的 Manifest V3 规范。

"permissions": 我们只需要 activeTab 和 scripting 权限，这比请求所有网站的权限更安全。activeTab 允许我们在用户点击扩展图标时与当前活动的标签页交互。

"background": 指定了后台服务工作线程，它将处理点击扩展图标的事件。

"action": 定义了浏览器工具栏中扩展图标的行为。

"content_scripts": 这是核心部分。它告诉 Chrome 自动将 libs 里的库文件、我们自己的 content.js 和 style.css 注入到所有页面 (<all_urls>) 中。注意JS文件的顺序很重要，必须先加载库文件。

第2步: background.js

这个脚本在后台运行，它的唯一任务是监听用户点击扩展图标的动作，并向当前页面的内容脚本发送一条消息，告诉它“该干活了”。

// background.js

chrome.action.onClicked.addListener((tab) => {
  // 当用户点击扩展图标时
  // 向当前激活的标签页发送一个消息
  chrome.tabs.sendMessage(tab.id, {
    action: "toggle_tutorial_maker"
  });
});

第3步: style.css

将之前油猴脚本中的所有 CSS 规则复制到这个文件中。

/* style.css */

.wtm-sidebar {
    position: fixed;
    top: 0;
    right: -450px; /* Initially hidden */
    width: 400px;
    height: 100%;
    background-color: #f8f9fa;
    border-left: 1px solid #dee2e6;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    z-index: 2147483647; /* Max z-index */
    transition: right 0.5s ease;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.wtm-sidebar.show {
    right: 0;
}

.wtm-sidebar-header {
    padding: 15px;
    background-color: #e9ecef;
    border-bottom: 1px solid #ced4da;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wtm-sidebar-header h3 {
    margin: 0;
    font-size: 18px;
}
.wtm-sidebar-header .wtm-controls button {
    margin-left: 10px;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 14px;
}
.wtm-record-btn {
    background-color: #007bff; color: white;
}
.wtm-record-btn.recording {
    background-color: #dc3545;
}
.wtm-export-btn {
    background-color: #28a745; color: white;
}

.wtm-steps-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
}

.wtm-step {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 10px;
    position: relative;
    cursor: grab;
}
.wtm-step.dragging {
    opacity: 0.5;
}

.wtm-step-header {
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wtm-step-delete-btn {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 20px;
    cursor: pointer;
    padding: 0 5px;
}

.wtm-step textarea {
    width: 100%;
    min-height: 50px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    font-size: 14px;
    resize: vertical;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.wtm-step img {
    max-width: 100%;
    border: 1px solid #eee;
    margin-top: 10px;
    border-radius: 4px;
}
.wtm-click-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 123, 255, 0.1);
    border: 2px dashed #007bff;
    z-index: 2147483646;
    pointer-events: none; /* Important */
    cursor: crosshair;
}
.wtm-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 20px;
    border-radius: 8px;
    z-index: 2147483647;
    display: none; /* Initially hidden */
}

第4步: content.js

这是扩展的核心逻辑...

点击查看剩余70%