能否开发带按钮及右键菜单的Chrome Extension清除网络日志与控制台？

完全可以开发这样的Chrome扩展，核心依赖Chrome提供的DevTools API和扩展权限配置，以下是具体实现方案：

一、权限与基础配置（manifest.json） #

首先在扩展的manifest.json中声明所需权限和核心文件，采用Manifest V3版本（当前Chrome推荐标准）：

{
  "manifest_version": 3,
  "name": "日志清除工具",
  "version": "1.0",
  "permissions": ["contextMenus", "activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_title": "清除网络日志与控制台"
  },
  "devtools_page": "devtools.html"
}

二、实现右键菜单项 #

在background.js中创建右键菜单并绑定点击事件，触发时向DevTools页面发送清除指令：

// 扩展安装时创建右键菜单
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'clearLogsMenu',
    title: '清除网络日志与控制台',
    contexts: ['page']
  });
});

// 监听右键菜单点击
chrome.contextMenus.onClicked.addListener(() => {
  chrome.runtime.sendMessage({action: 'clearLogs'}, () => {
    if (chrome.runtime.lastError) {
      console.log('请先打开开发者工具');
    }
  });
});

三、实现浏览器工具栏按钮 #

同样在background.js中监听工具栏按钮的点击事件，逻辑与右键菜单一致：

// 监听工具栏按钮点击
chrome.action.onClicked.addListener(() => {
  chrome.runtime.sendMessage({action: 'clearLogs'}, () => {
    if (chrome.runtime.lastError) {
      console.log('请先打开开发者工具');
    }
  });
});

四、核心清除逻辑（DevTools页面） #

由于Chrome的DevTools API仅能在扩展的DevTools页面中调用，需创建以下两个文件：

devtools.html #

<!DOCTYPE html>
<html>
<body>
  <script src="devtools.js"></script>
</body>
</html>

devtools.js #

监听来自后台脚本的消息，执行清除网络日志和控制台的操作：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'clearLogs') {
    // 清除网络请求日志
    chrome.devtools.network.clear();
    // 执行控制台清除命令
    chrome.devtools.inspectedWindow.eval('console.clear()');
    sendResponse({success: true});
  }
});

关键注意事项 #

• 必须打开Chrome开发者工具（F12）才能触发清除操作，因为DevTools API仅在DevTools激活状态下可用；
• 如果未打开DevTools，扩展会触发chrome.runtime.lastError，可根据此提示用户打开开发者工具。

内容的提问来源于stack exchange，提问作者user3067684