html 如何使用Chrome扩展隐藏网页上的列

mftmpeh8 于 2023-01-07 发布在其他

关注(0)|答案(1)|浏览(164)

我需要隐藏或显示具有我的扩展名的列。我要隐藏/显示此列

我有这个代码：

- 清单. 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();'
  });
});

我们得到这个用户界面：

但如果我按下按钮，我会得到一个错误：* 未捕获的引用错误：未定义hideColumn *

Html

来源：https://stackoverflow.com/questions/74996175/how-to-hide-column-on-a-web-page-with-a-chrome-extension

1条答案

按热度按时间

wwtsj6pe1#

我重写了你的分机号。
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
    });
  });
});

赞(0）回复(0）举报 2023-01-07

我来回答

html 如何使用Chrome扩展隐藏网页上的列

1条答案

相关问题

热门标签

最新问答