使用Javascript开发Chrome扩展获取当前及上一个标签页URL的方法

你之前的写法存在两个核心错误：

• window.location.href 获取的是代码运行上下文的URL，你的代码跑在扩展的popup页面中，拿到的是popup的本地扩展地址，根本不是浏览器标签页的访问地址
• 没有配置后台运行逻辑，popup页面只有点击扩展图标打开时才会激活，关闭后就直接销毁，自然无法实时检测标签页切换状态

第一步：配置manifest.json #

声明扩展需要的权限、后台服务入口、popup页面入口：

{
  "manifest_version": 3,
  "name": "标签页URL跟踪器",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["tabs", "activeTab"]
}

第二步：编写后台运行逻辑（background.js） #

后台Service Worker会在浏览器启动后持续运行，负责监听标签页切换、地址更新事件，存储历史和当前URL：

// 全局存储上一个、当前标签页URL
let previousUrl = ''
let currentUrl = ''

// 监听标签页切换事件
chrome.tabs.onActivated.addListener(async (activeInfo) => {
  const tab = await chrome.tabs.get(activeInfo.tabId)
  previousUrl = currentUrl
  currentUrl = tab.url || ''
})

// 监听同一标签页内地址更新事件
chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
  if (changeInfo.url && tab.active) {
    previousUrl = currentUrl
    currentUrl = changeInfo.url
  }
})

// 暴露数据查询接口给popup页面调用
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'getUrls') {
    sendResponse({
      currentUrl,
      previousUrl
    })
  }
})

第三步：修改popup页面逻辑 #

你原有的HTML代码无需改动，新增popup.js文件，在popup打开时主动拉取后台存储的最新URL数据：

document.addEventListener('DOMContentLoaded', async () => {
  // 向后台请求最新URL数据
  const urlData = await chrome.runtime.sendMessage({type: 'getUrls'})
  document.getElementById('current_url').textContent = urlData.currentUrl
  document.getElementById('previous_url').textContent = urlData.previousUrl
})

然后在你原有的popup.html的</body>标签前引入js文件即可：

<script src="popup.js"></script>

• 如果你仍在使用Manifest V2版本，仅需将后台配置改为background.scripts数组即可，逻辑写法基本一致，但V2已经停止支持新扩展上架，推荐升级到V3
• 默认无法获取chrome://开头的浏览器内部页面、其他扩展内部页面的URL，需要对应特殊权限才能访问

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