如何仅在Chrome扩展程序处于激活状态时运行JS脚本

该需求完全可实现，基于Manifest V3版本的Chrome扩展框架即可完成，具体实现步骤如下：

1. 配置扩展基础权限（manifest.json） #

无需配置常驻后台权限，仅申请最小必要权限即可：

{
  "manifest_version": 3,
  "name": "按需触发脚本扩展",
  "version": "1.0",
  "action": {},
  "permissions": ["activeTab", "scripting"],
  "background": {
    "service_worker": "background.js"
  }
}

其中activeTab权限仅允许扩展在用户主动点击图标后访问当前激活标签页，符合最小权限原则。

2. 实现点击事件监听与状态管理（background.js） #

后台服务工作器仅监听扩展图标点击事件，管理每个标签页的脚本运行状态，按需注入或停止脚本：

// 存储各标签页的脚本运行状态
const tabRunningStatus = new Map()

chrome.action.onClicked.addListener(async (tab) => {
  const tabId = tab.id
  // 若当前标签页脚本正在运行，发送停止指令
  if (tabRunningStatus.get(tabId) === 'active') {
    await chrome.tabs.sendMessage(tabId, { type: 'stop_script' })
    tabRunningStatus.set(tabId, 'inactive')
    chrome.action.setBadgeText({ text: 'OFF', tabId })
    return
  }
  // 若未运行，注入内容脚本并标记为运行中
  await chrome.scripting.executeScript({
    target: { tabId },
    files: ['content.js']
  })
  tabRunningStatus.set(tabId, 'active')
  chrome.action.setBadgeText({ text: 'ON', tabId })
})

// 标签页关闭时清理状态
chrome.tabs.onRemoved.addListener((tabId) => {
  tabRunningStatus.delete(tabId)
})

3. 内容脚本实现启停逻辑（content.js） #

内容脚本内需要维护所有运行时资源的引用，收到停止指令时完全清理资源，避免残留运行：

// 存储所有需要清理的运行资源：定时器、事件监听器等
let runtimeResources = {
  intervalTimer: null,
  eventListeners: []
}

// 你的自定义业务运行逻辑
function startBusinessLogic() {
  // 示例：定时器任务
  runtimeResources.intervalTimer = setInterval(() => {
    console.log('扩展脚本正在运行')
  }, 1000)
  // 示例：页面事件监听
  const clickHandler = () => console.log('页面被点击')
  document.addEventListener('click', clickHandler)
  runtimeResources.eventListeners.push({
    target: document,
    type: 'click',
    handler: clickHandler
  })
}

// 停止逻辑：清理所有运行资源
function stopBusinessLogic() {
  // 清理定时器
  if (runtimeResources.intervalTimer) {
    clearInterval(runtimeResources.intervalTimer)
    runtimeResources.intervalTimer = null
  }
  // 移除所有事件监听器
  runtimeResources.eventListeners.forEach(({ target, type, handler }) => {
    target.removeEventListener(type, handler)
  })
  runtimeResources.eventListeners = []
}

// 监听后台发送的停止指令
chrome.runtime.onMessage.addListener((msg) => {
  if (msg.type === 'stop_script') {
    stopBusinessLogic()
  }
})

// 脚本注入完成后自动启动业务逻辑
startBusinessLogic()

4. 额外自动停止场景适配 #

如果需要在标签页切到后台、刷新等非用户主动点击的场景下自动停止，可以额外补充监听逻辑：

• 标签页非激活自动停止：在content.js中监听visibilitychange事件，document.hidden为true时触发停止逻辑
• 页面刷新自动停止：页面刷新时注入的内容脚本会自动销毁，无需额外处理
• 扩展卸载/禁用自动停止：可在后台监听chrome.runtime.onSuspend事件做全局清理

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