Chrome扩展：如何从content script刷新页面？

由于Chrome扩展的权限隔离机制，content脚本无法直接调用tabs.reload()这类扩展级API，必须通过与后台脚本（Background/Service Worker）通信来实现页面刷新——这是目前唯一合规且高效的方案，没有更简化的替代方式。

简洁实现代码 #

以下是一套高效的实现，避免了后台脚本额外查询标签页的操作：

1. Content脚本（content.js）

直接获取当前标签页ID，发送刷新请求到后台：

// 获取当前标签页并请求刷新
chrome.tabs.getCurrent(tab => {
  if (tab?.id) {
    chrome.runtime.sendMessage({ action: "reloadTab", tabId: tab.id });
  }
});

2. 后台脚本（service-worker.js / background.js）

监听消息并执行刷新：

// 处理content脚本的刷新请求
chrome.runtime.onMessage.addListener((msg, sender, sendResp) => {
  if (msg.action === "reloadTab" && msg.tabId) {
    chrome.tabs.reload(msg.tabId);
  }
});

3. Manifest配置（manifest.json）

确保扩展拥有必要权限，以Manifest V3为例：

{
  "manifest_version": 3,
  "name": "页面刷新工具",
  "version": "1.0",
  "permissions": ["tabs"],
  "background": {
    "service_worker": "service-worker.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

说明 #

• 相比后台脚本通过chrome.tabs.query查询活跃标签页，直接在content脚本获取当前tabId的方式更高效，还能避免用户切换标签页导致的刷新错误。
• 若使用Manifest V2，只需将background字段改为"scripts": ["background.js"]即可。

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