如何通过Chrome扩展使用JS本地保存用户访问及点击触发的标签页URL？

Hey，我来帮你搞定这个Chrome扩展的需求！你要实现的是点击扩展图标保存当前标签URL，且数据只保留到窗口关闭对吧？咱们一步步来拆解实现：

你之前的权限部分没写完，需要补充"tabs"和"storage"（虽然用sessionStorage可以不用storage权限，但为了后续扩展兼容性加上也没问题）。完整的配置如下：

{
  "manifest_version": 2,
  "name": "saveLink",
  "version": "1.0",
  "browser_action": {
    "default_icon": "xyz.png",
    "default_popup": "popup.html",
    "default_title": "saveLink"
  },
  "permissions": [
    "activeTab",
    "tabs",
    "storage"
  ]
}

我们需要创建popup.html（扩展弹出窗口的UI）和对应的popup.js（处理保存逻辑）。

popup.html（UI部分） #

这个页面很简洁，一个保存按钮加一个列表用来展示已保存的URL：

<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 220px; padding: 12px; margin: 0; }
    #saveBtn { 
      width: 100%; 
      padding: 8px; 
      background: #4285f4; 
      color: white; 
      border: none; 
      border-radius: 4px; 
      cursor: pointer;
    }
    #saveBtn:hover { background: #3367d6; }
    #linkList { margin-top: 15px; }
    .link-item { margin-bottom: 8px; word-break: break-all; }
    .link-item a { color: #4285f4; text-decoration: none; }
    .link-item a:hover { text-decoration: underline; }
  </style>
</head>
<body>
  <button id="saveBtn">保存当前标签URL</button>
  <div id="linkList"></div>
  <script src="popup.js"></script>
</body>
</html>

popup.js（核心逻辑） #

这里实现点击按钮获取当前标签URL、存入会话存储、展示已保存链接的功能，重点用sessionStorage来保证窗口关闭后数据自动清除：

document.addEventListener('DOMContentLoaded', () => {
  const saveBtn = document.getElementById('saveBtn');
  const linkList = document.getElementById('linkList');

  // 页面加载时先渲染已保存的链接
  renderSavedLinks();

  // 点击保存按钮的逻辑
  saveBtn.addEventListener('click', async () => {
    // 获取当前窗口的活跃标签页
    const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
    const currentUrl = activeTab.url;

    // 从sessionStorage读取已有的URL数组，没有则初始化空数组
    let savedLinks = JSON.parse(sessionStorage.getItem('tablink')) || [];

    // 避免重复保存同一个URL
    if (!savedLinks.includes(currentUrl)) {
      savedLinks.push(currentUrl);
      // 把更新后的数组存回sessionStorage
      sessionStorage.setItem('tablink', JSON.stringify(savedLinks));
      // 更新页面上的链接列表
      renderSavedLinks();
      alert('URL已成功保存！');
    } else {
      alert('这个URL已经保存过啦～');
    }
  });

  // 渲染已保存的链接到页面
  function renderSavedLinks() {
    const savedLinks = JSON.parse(sessionStorage.getItem('tablink')) || [];
    linkList.innerHTML = '';

    if (savedLinks.length === 0) {
      linkList.innerHTML = '<p style="color: #666; margin: 0;">还没有保存任何URL哦</p>';
      return;
    }

    savedLinks.forEach((link, index) => {
      const linkItem = document.createElement('div');
      linkItem.className = 'link-item';
      const aTag = document.createElement('a');
      aTag.href = link;
      aTag.target = '_blank';
      // 长URL截断显示，保持UI美观
      const displayText = link.length > 50 ? `${link.slice(0, 50)}...` : link;
      aTag.textContent = `${index + 1}. ${displayText}`;
      linkItem.appendChild(aTag);
      linkList.appendChild(linkItem);
    });
  }
});

你的需求是URL保留至当前窗口关闭，sessionStorage正好符合这个特性：它的存储范围是当前浏览器窗口/标签页组，窗口关闭后数据会被自动清除，不需要手动处理删除逻辑。如果用localStorage的话数据会永久保留（直到手动清除），不符合你的要求。

1. 把所有文件（manifest.json、popup.html、popup.js、xyz.png图标）放在同一个文件夹里
2. 打开Chrome，进入扩展管理页面（地址栏输入chrome://extensions/）
3. 开启右上角的「开发者模式」
4. 点击「加载已解压的扩展程序」，选择你的扩展文件夹
5. 点击浏览器右上角的扩展图标，弹出窗口后点击「保存当前标签URL」，就能看到URL被保存下来了
6. 关闭当前Chrome窗口，重新打开后再打开扩展，会发现之前保存的URL已经消失，完美符合需求

• 确保你的xyz.png图标文件存在于扩展根目录，尺寸建议用16x16、48x48、128x128像素的版本（可以只放一个128x128的，Chrome会自动缩放）
• 如果后续想升级到Manifest V3，只需要把browser_action改成action，权限配置略有调整，但核心逻辑不变

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