How to hide column on a web page with a Chrome Extension

Question

I need to hide or show an column with my extension. This one I want to hide/show

I have this code:

manifest.json

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

background.js

function hideColumn() {
  // Get the left column element and hide it
  var column = document.querySelector('div.dark.hidden.bg-gray-900.md\\:fixed.md\\:inset-y-0.md\\:flex.md\\:w-[260px].md\\:flex-col');
  column.style.display = 'none';
}

function showColumn() {
  // Get the left column element and show it
  var column = document.querySelector('div.dark.hidden.bg-gray-900.md\\:fixed.md\\:inset-y-0.md\\:flex.md\\:w-[260px].md\\:flex-col');
  column.style.display = 'block';
}

popup.html

<button id="hide-button">Hide Column</button>
<button id="show-button">Show Column</button>

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

popup.js

// Get the hide and show button elements
var hideButton = document.querySelector('#hide-button');
var showButton = document.querySelector('#show-button');

// Add event listeners to the buttons
hideButton.addEventListener('click', function() {
  // When the hide button is clicked, call the hideColumn function
  chrome.tabs.executeScript({
    code: 'hideColumn();'
  });
});

showButton.addEventListener('click', function() {
  // When the show button is clicked, call the showColumn function
  chrome.tabs.executeScript({
    code: 'showColumn();'
  });
});

And we get this UI:

But if I press buttons I'm getting an error: Uncaught ReferenceError: hideColumn is not defined

You have to use [content scripts](https://developer.chrome.com/docs/extensions/mv3/content_scripts/) to inject the functions into the running site not background. — Christopher, Jan 03 '23 at 17:15
@Christopher can you show me please how to do it. As answer please. I always give detailed answers with a working code on a StackOverFlow — Dyno Cris, Jan 03 '23 at 17:35
I have never written an extension for chrome. But I know that background scripts have another purpose than content scripts. Also, your question is very similar to [this question](https://stackoverflow.com/q/12971869/10304804) and the answers there explain it pretty well. You should also take a look at the example of the [manifest](https://developer.chrome.com/docs/extensions/mv3/content_scripts/#static-declarative). - Also: [It’s OK to Ask and Answer Your Own Questions](https://stackoverflow.blog/2011/07/01/its-ok-to-ask-and-answer-your-own-questions/) — Christopher, Jan 03 '23 at 17:48
Move the contents of background.js to popup.js. background.js is not required. — Norio Yamamoto, Jan 03 '23 at 20:14
@Christopher, In this case executeScript is more appropriate than content scripts. — Norio Yamamoto, Jan 03 '23 at 20:18
@NorioYamamoto i thought of this too. But wasn't sure what executeScript allows and what not. OP is just using the wrong manifest configuration to execute the javascript parts on the window/tab. — Christopher, Jan 03 '23 at 20:25

score 2 · Answer 1 · answered Jan 03 '23 at 21:06

I rewrote your extension.

manifest.json

{
  "name": "Chat GPT Column Hider",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": [
    "scripting"
  ],
  "host_permissions": [
    "https://chat.openai.com/"
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

popup.html

<html>
<body>
  <button id="hide-button">Hide Column</button>
  <button id="show-button">Show Column</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js

// Get the hide and show button elements
var hideButton = document.querySelector('#hide-button');
var showButton = document.querySelector('#show-button');

function hideColumn() {
  // Get the left column element and hide it
  var column = document.getElementsByClassName('dark hidden bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col');
  column[0].style.display = 'none';
}

function showColumn() {
  // Get the left column element and show it
  var column = document.getElementsByClassName('dark hidden bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col');
  column[0].style.display = 'block';
}

// Add event listeners to the buttons
hideButton.addEventListener('click', function () {
  // When the hide button is clicked, call the hideColumn function
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    chrome.scripting.executeScript({
      target: { tabId: tabs[0].id },
      func: hideColumn
    });
  });
});

showButton.addEventListener('click', function () {
  // When the show button is clicked, call the showColumn function
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    chrome.scripting.executeScript({
      target: { tabId: tabs[0].id },
      func: showColumn
    });
  });
});

I don't know I got error: Failed to load extension Error Could not load background script 'background.js'. Could not load manifest. I made all like you provided — Dyno Cris, Jan 04 '23 at 03:22
Oh, I added "scripts": ["popup.js"] in the 'action' section and it works! Many thanks — Dyno Cris, Jan 04 '23 at 03:30

How to hide column on a web page with a Chrome Extension

1 Answers1