Chrome扩展实现网页列隐藏/显示报错：hideColumn未定义

问题概述 #

开发Chrome扩展实现ChatGPT页面左侧列的隐藏/显示功能时，点击按钮出现报错：Uncaught ReferenceError: hideColumn is not defined。

错误原因 #

background.js中的函数运行在扩展的后台页面上下文，和ChatGPT网页的上下文完全隔离。当通过chrome.tabs.executeScript调用hideColumn()时，网页环境中并没有这个函数定义，因此触发引用错误。此外，原代码中showColumn使用block恢复显示，不符合原元素的flex布局，可能导致样式错乱。

修复方案 #

方案一：直接在popup中注入执行代码 #

删除无用的background.js，修改popup.js，将隐藏/显示逻辑直接通过executeScript注入到网页上下文：

// 获取按钮元素
const hideButton = document.querySelector('#hide-button');
const showButton = document.querySelector('#show-button');

// 隐藏左侧列
hideButton.addEventListener('click', () => {
  chrome.tabs.executeScript({
    code: `
      const column = document.querySelector('div.dark.hidden.bg-gray-900.md\\:fixed.md\\:inset-y-0.md\\:flex.md\\:w-[260px].md\\:flex-col');
      if (column) column.style.display = 'none';
    `
  });
});

// 显示左侧列（恢复flex布局）
showButton.addEventListener('click', () => {
  chrome.tabs.executeScript({
    code: `
      const column = document.querySelector('div.dark.hidden.bg-gray-900.md\\:fixed.md\\:inset-y-0.md\\:flex.md\\:w-[260px].md\\:flex-col');
      if (column) column.style.display = 'flex';
    `
  });
});

方案二：使用内容脚本（更规范的方式） #

1. 修改manifest.json，添加内容脚本配置，删除无用的background字段：

{
  "manifest_version": 2,
  "name": "Chat GPT Column Hider",
  "description": "This extension allows you to hide the left column in Chat GPT.",
  "version": "1.0",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "https://chat.openai.com/"
  ],
  "content_scripts": [
    {
      "matches": ["https://chat.openai.com/*"],
      "js": ["content.js"]
    }
  ]
}

2. 创建content.js，编写隐藏/显示逻辑并监听popup消息：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  const column = document.querySelector('div.dark.hidden.bg-gray-900.md\\:fixed.md\\:inset-y-0.md\\:flex.md\\:w-[260px].md\\:flex-col');
  if (!column) return;

  if (request.action === 'hide') {
    column.style.display = 'none';
  } else if (request.action === 'show') {
    column.style.display = 'flex';
  }
});

3. 修改popup.js，通过消息通知内容脚本执行操作：

const hideButton = document.querySelector('#hide-button');
const showButton = document.querySelector('#show-button');

hideButton.addEventListener('click', () => {
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id, {action: 'hide'});
  });
});

showButton.addEventListener('click', () => {
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id, {action: 'show'});
  });
});

注意事项 #

• 两种方案都需要保留原popup.html的结构；
• 添加元素存在性判断，避免因DOM结构变化导致的null报错；
• 恢复显示时使用原元素的flex布局，保证页面样式正常。

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