Chrome扩展点击按钮无法修改URL 报getElementById未定义错误

直接报错根因 #

你当前language.js中的代码存在逻辑错误：

const Change = document.getElementById('Change').click();

这行代码执行后会立刻调用按钮的click()方法，而该方法没有返回值，你赋值给Change变量的是undefined，后续尝试给undefined绑定点击事件监听时就会抛出对应错误。
此外还有一个逻辑漏洞：你当前读取的window.location.href是扩展弹窗自身的URL，而非浏览器当前激活标签页的URL，无法实现你要修改页面URL的需求。

完整修复代码 #

直接替换language.js的全部内容即可：

window.addEventListener('load', function() {
  // 先获取按钮DOM元素，不要直接调用click方法
  const changeBtn = document.getElementById('Change');
  // 绑定点击事件
  changeBtn.addEventListener('click', async () => {
    // 查询当前激活的标签页
    const [currentTab] = await chrome.tabs.query({
      active: true,
      currentWindow: true
    });
    // 处理当前标签页的URL
    const pageUrl = new URL(currentTab.url);
    const isEnglish = pageUrl.pathname.indexOf('en-US') !== -1;
    const from = isEnglish ? 'en-US' : 'nb-NO';
    const to = isEnglish ? 'nb-NO' : 'en-US';
    pageUrl.pathname = pageUrl.pathname.replace(from, to);
    // 在当前标签页加载修改后的URL
    await chrome.tabs.update(currentTab.id, {
      url: pageUrl.href
    });
    // 操作完成后自动关闭弹窗，可按需删除
    window.close();
  });
});

其他说明 #

你现有manifest.json中已经配置了所需的tabs权限，无需额外修改，空的background.js也不影响当前功能运行。

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