如何使用 Chrome 扩展程序隐藏 web 页面上的列

Question

我需要用我的扩展隐藏或显示一列。 这个我想隐藏/显示

我有这段代码：

清单.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/"
  ]
}

背景.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';
}

弹出窗口.html

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

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

弹窗.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();'
  });
});

我们得到这个用户界面：

但是，如果我按下按钮，我会收到一个错误： Uncaught ReferenceError: hideColumn is not defined

Answer 1

我重写了你的扩展。

清单.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"
  }
}

弹出窗口.html

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

弹窗.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
    });
  });
});

如何使用 Chrome 扩展程序隐藏 web 页面上的列

问题描述

1 个解决方案

解决方案1
2 2023-01-03 21:06:34

如何使用 Chrome 扩展程序隐藏 web 页面上的列

问题描述

1 个解决方案

解决方案1 2 2023-01-03 21:06:34

解决方案1
2 2023-01-03 21:06:34