使用Javascript修改活跃URL指定部分的Chrome插件开发问题

1 现有脚本无法运行的原因及修复点 #

你当前的代码存在4个核心问题：

• 上下文错误：你写的JS运行在popup弹窗的独立环境中，window.location.href获取的是popup自身的地址，不是浏览器当前活跃标签页的地址
• 引入缺失：popup.html没有引入你写的JS文件，代码根本不会执行
• 逻辑不符合需求：window.history.pushState仅修改地址栏显示，不会触发页面实际加载
• 权限缺失：manifest.json未声明activeTab权限，无法操作当前活跃标签页

2 多按钮逻辑复用方案 #

不需要为每个按钮写独立脚本，你可以把URL替换逻辑封装成通用函数，不同按钮传入不同的替换规则即可。

3 完整修改后的代码示例 #

3.1 manifest.json（仅修改permissions部分） #

{
  "name": "KS En2No Plugin",
  "description": "Place text here",
  "version": "1.0",
  "author": "Place text here",
  "manifest_version": 3,
  
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },

  "permissions": ["storage" , "nativeMessaging" , "notifications" , "tabs", "activeTab"],

  "action": {
    "default_popup": "popup.html"
  }
}

3.2 popup.html（新增第二个按钮、引入JS文件） #

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <button id="langButton">切换语言</button>
    <button id="pathButton">切换路径</button>
    <script src="popup.js"></script>
  </body>
</html>

3.3 popup.js（替换原来的language.js，通用逻辑实现） #

// 通用URL替换函数
const replaceUrlPart = (tabId, originalUrl, fromStr, toStr) => {
  const url = new URL(originalUrl);
  if (url.pathname.includes(fromStr)) {
    url.pathname = url.pathname.replace(fromStr, toStr);
  } else if (url.pathname.includes(toStr)) {
    url.pathname = url.pathname.replace(toStr, fromStr);
  } else {
    // 如果都不存在，可按需调整默认逻辑
    return;
  }
  // 同标签页加载新URL
  chrome.tabs.update(tabId, {url: url.href});
}

// 页面加载完成后绑定按钮事件
document.addEventListener('DOMContentLoaded', () => {
  // 获取当前活跃标签页
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    const currentTab = tabs[0];
    const currentUrl = currentTab.url;
    const tabId = currentTab.id;

    // 第一个按钮：切换语言 en-US 和 nb-NO
    const langBtn = document.getElementById('langButton');
    langBtn.addEventListener('click', () => {
      replaceUrlPart(tabId, currentUrl, 'en-US', 'nb-NO');
      // 点击后自动关闭popup，可选
      window.close();
    });

    // 第二个按钮：切换其他URL段，示例为把/product换成/goods，按需修改参数即可
    const pathBtn = document.getElementById('pathButton');
    pathBtn.addEventListener('click', () => {
      replaceUrlPart(tabId, currentUrl, 'product', 'goods');
      window.close();
    });
  });
});

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