5.1 Chrome 浏览器插件实战案例

{
  "manifest_version": 3,
  "name": "划词搜索",
  "version": "1.0.0",
  "description": "选中文字后快速搜索",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["content.css"]
    }
  ],
  "permissions": ["activeTab"]
}

// 创建搜索按钮
function createSearchButton() {
  const button = document.createElement('div');
  button.id = 'quick-search-btn';
  button.textContent = '搜索';
  button.style.cssText = `
    position: fixed;
    background: #4285f4;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 10000;
    font-size: 14px;
    display: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  `;
  document.body.appendChild(button);
  return button;
}
 
// 初始化
const searchButton = createSearchButton();
 
// 监听文字选中
document.addEventListener('mouseup', function(e) {
  const selectedText = window.getSelection().toString().trim();
 
  if (selectedText.length > 0) {
    // 显示按钮，定位到鼠标位置
    searchButton.style.display = 'block';
    searchButton.style.left = e.pageX + 'px';
    searchButton.style.top = (e.pageY + 20) + 'px';
  } else {
    searchButton.style.display = 'none';
  }
});
 
// 点击按钮搜索
searchButton.addEventListener('click', function() {
  const selectedText = window.getSelection().toString().trim();
  const searchUrl = `https://www.google.com/search?q=${encodeURIComponent(selectedText)}`;
  window.open(searchUrl, '_blank');
  searchButton.style.display = 'none';
});
 
// 点击其他地方隐藏按钮
document.addEventListener('mousedown', function(e) {
  if (e.target !== searchButton) {
    searchButton.style.display = 'none';
  }
});

{
  "manifest_version": 3,
  "name": "Tab Monitor",
  "version": "1.0.0",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["tabs"]
}

// 监听标签页创建
chrome.tabs.onCreated.addListener((tab) => {
  console.log('新标签页创建:', tab.url || '空白页');
 
  // 可以在这里做更多操作
  // 比如：自动打开特定网址、记录浏览历史等
});
 
// 监听标签页更新
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete') {
    console.log('标签页加载完成:', tab.url);
  }
});
 
// 监听标签页关闭
chrome.tabs.onRemoved.addListener((tabId, removeInfo) => {
  console.log('标签页关闭，ID:', tabId);
});

// content.js
// 向 background 发送消息
chrome.runtime.sendMessage(
  {
    action: 'getData',
    data: {
      title: document.title,
      url: window.location.href
    }
  },
  function(response) {
    console.log('收到回复:', response);
  }
);

// background.js
// 监听消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log('收到消息:', request);
 
  if (request.action === 'getData') {
    // 处理数据
    const processedData = {
      ...request.data,
      timestamp: Date.now()
    };
 
    // 回复消息
    sendResponse({
      success: true,
      data: processedData
    });
  }
 
  return true; // 异步响应必须返回 true
});

我想开发一个 Chrome 插件，需求如下：

【基本信息】
- 插件名称：[名称]
- 功能描述：[详细描述功能]
- 使用场景：[什么时候用]

【技术要求】
- Manifest V3
- 需要的权限：[tabs/storage/activeTab等]
- 是否需要 content script：[是/否]
- 是否需要 background：[是/否]

【具体功能】
1. [功能1的详细说明]
2. [功能2的详细说明]

请帮我：
1. 生成完整的项目结构
2. 提供所有必要的代码文件
3. 添加详细的代码注释
4. 说明如何安装和测试

我想开发一个 Chrome 插件，需求如下：

【基本信息】
- 插件名称：Quick Bookmark
- 功能描述：快速保存当前网页到书签，并自动分类
- 使用场景：浏览网页时，一键保存到预设的文件夹

【技术要求】
- Manifest V3
- 需要的权限：bookmarks, activeTab, storage
- 需要 popup 界面
- 需要 background 处理书签逻辑

【具体功能】
1. 点击插件图标弹出界面，显示：
   - 当前网页标题和URL
   - 预设的书签文件夹列表（工作、学习、娱乐等）
2. 选择文件夹后，一键保存
3. 保存成功后显示提示
4. 支持自定义文件夹列表

请帮我：
1. 生成完整的项目结构
2. 提供所有必要的代码文件
3. 添加详细的代码注释
4. 说明如何安装和测试