dropdown-copy-helper/INSTALLATION.md

Installation Guide / 安装指南

Prerequisites / 前置要求

• Google Chrome browser / Google Chrome 浏览器
• Developer mode enabled in Chrome extensions / Chrome 扩展开发者模式已启用

Installation Steps / 安装步骤

1. Verify Files / 验证文件

All required files are already included in the project:

• ✅ manifest.json - Extension configuration
• ✅ background.js - Service worker
• ✅ content.js - Main functionality
• ✅ styles.css - Styling
• ✅ popup.html - Popup interface
• ✅ icons/icon16.png - 16x16 icon
• ✅ icons/icon32.png - 32x32 icon
• ✅ icons/icon48.png - 48x48 icon
• ✅ icons/icon128.png - 128x128 icon

2. Load Extension / 加载扩展

1. Open Chrome and navigate to chrome://extensions/ / 打开 Chrome 并访问扩展页面
2. Enable "Developer mode" in the top right corner / 在右上角启用"开发者模式"
3. Click "Load unpacked" button / 点击"加载已解压的扩展程序"按钮
4. Select the dropdown-copy-helper directory / 选择项目目录
5. The extension should now appear in your extensions list / 扩展应该出现在扩展列表中

3. Verify Installation / 验证安装

1. Check that the extension icon appears in the Chrome toolbar / 检查扩展图标是否出现在工具栏中
2. Visit google.com or youtube.com / 访问 google.com 或 youtube.com
3. The extension should be active on these sites / 扩展应该在这些网站上激活

Testing / 测试

Test on Google Search / 在 Google 搜索上测试

1. Go to https://www.google.com / 访问 Google 搜索
2. Click on the search input field / 点击搜索输入框
3. Type a few characters to trigger search suggestions / 输入几个字符触发搜索建议
4. Right-click on the search input field / 在搜索输入框上右键点击
5. Select "Copy All Dropdown Items / 复制所有下拉项" from the context menu / 从右键菜单选择复制选项
6. Check if a success toast notification appears / 检查是否出现成功提示
7. Paste (Ctrl+V) to verify the copied content / 粘贴验证复制的内容

Test on YouTube / 在 YouTube 上测试

1. Go to https://www.youtube.com / 访问 YouTube
2. Click on the search input field / 点击搜索输入框
3. Type a few characters to trigger search suggestions / 输入几个字符触发搜索建议
4. Right-click on the search input field / 在搜索输入框上右键点击
5. Select "Copy All Dropdown Items / 复制所有下拉项" from the context menu / 从右键菜单选择复制选项
6. Check if a success toast notification appears / 检查是否出现成功提示
7. Paste (Ctrl+V) to verify the copied content / 粘贴验证复制的内容

Troubleshooting / 故障排除

Extension not loading / 扩展无法加载

• Make sure all required files are present / 确保所有必需文件都存在
• Check that icon files are in the icons/ directory / 检查图标文件是否在 icons/ 目录中
• Verify manifest.json syntax is correct / 验证 manifest.json 语法正确

Context menu not appearing / 右键菜单不出现

• Make sure you're on a supported website (Google or YouTube) / 确保在支持的网站上
• Try refreshing the page / 尝试刷新页面
• Check that you're right-clicking on the correct input field / 检查是否在正确的输入框上右键点击

"No input element found" error / "未找到输入元素"错误

• First, click on the search input field to focus it / 首先点击搜索输入框以聚焦
• Try typing something in the search box / 尝试在搜索框中输入内容
• Open browser console (F12) to see debug messages / 打开浏览器控制台查看调试信息
• Use the test page input-detection-test.html to verify input detection / 使用测试页面验证输入检测

Copy function not working / 复制功能不工作

• Check browser console for error messages / 检查浏览器控制台的错误信息
• Make sure clipboard permissions are granted / 确保剪贴板权限已授予
• Try typing in the input field first to trigger suggestions / 先在输入框中输入以触发建议

No dropdown suggestions / 没有下拉建议

• Type more characters in the search field / 在搜索框中输入更多字符
• Wait a moment for suggestions to load / 等待建议加载
• Check your internet connection / 检查网络连接

Debug Steps / 调试步骤

1. Open input-detection-test.html to test input detection / 打开测试页面检测输入框识别
2. Open browser console (F12) and look for extension messages / 打开控制台查看扩展消息
3. Check if the extension content script is loaded / 检查内容脚本是否加载
4. Verify that the search input is being detected / 验证搜索输入框是否被检测到

Development / 开发

To modify the extension:

1. Make changes to the source files / 修改源文件
2. Go to chrome://extensions/ / 访问扩展页面
3. Click the refresh button on the extension card / 点击扩展卡片上的刷新按钮
4. Test your changes / 测试更改