如何写一个chrome插件实现截屏自动生成步骤图文教程转成pdf或网页?
开启后,点击一个按钮,自动在右侧教程编辑区域插入文本“点击按钮”,下面是按钮的截图,一步一步的操作最后编辑器生成完整的图文教程,可编辑删除,插入修改,最后可导出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%


