CODEWITHSUNDEEP
javascripthtmlgoogle-chrome-extension
Dyno Cris
Dyno Cris

Reputation: 2414

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

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

enter image description here

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:

enter image description here

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

enter image description here

Upvotes: 0

Views: 162

Answers (1)

Norio Yamamoto
Norio Yamamoto

Reputation: 1786

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
    });
  });
});

Upvotes: 2

Related Questions