如何在通过 JavaScript 链接生成器登陆页面时隐藏元素？

Question

我正在尝试编写一个 JavaScript 谷歌浏览器扩展程序，它使我能够生成指向某个网站的链接，但是当我单击此链接并通过此链接登陆该网站时，它隐藏了我的某些 ID 元素。

我已经有了负责生成链接并使其可点击的 JS 和 HTML 部分，但现在我只是在寻找自动隐藏部分。

1. 我登陆的网站不是我的，所以我无法对其 HTML 或 JS 代码进行永久更改，只能进行本地更改。

2. 网站确实有一个可预测的 URL 结构，这就是为什么我能够生成一个随机链接感谢 JS.

3. 我试图隐藏的元素具有相同的名称，与我所在的页面无关。

4. 我希望更改是自动的，除了单击它的链接之外没有任何其他操作。

如果可能的话，有人知道我该怎么做吗？

我没有找到解决我给定问题的方法。我找到了一些方法来做到这一点，但前提是我们有办法永久更改着陆页代码，以便它识别 URL 中的片段并根据它隐藏元素。但正如我所说，我不能在服务器端修改它，即使我不想我只是想让扩展在本地为我工作。

Answer 1

不幸的是，您无法通过 Chrome 扩展程序直接隐藏您无法控制的网站上的元素。这是因为在 Web 浏览器中实施的同源策略可以防止跨域修改。

但是，您可以通过扩展将自定义 CSS 注入网站来实现这一点。这将需要使用内容脚本，这是一个在网页上下文中运行的脚本，可以操纵网页的 DOM。

这是一个如何实现此目标的示例：

在您的扩展程序的 manifest.json 文件中，添加一个在目标网站的 URL 上运行的内容脚本：

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://www.example.com/*"],
      "js": ["contentScript.js"],
      "run_at": "document_end"
    }
  ]
}

在您的 contentScript.js 文件中，添加代码以检测用户是否通过您生成的链接到达页面，如果是，则使用 CSS 隐藏目标元素：

if (window.location.href.includes("myGeneratedLink")) {
  const elementToHide = document.getElementById("targetElementId");
  elementToHide.style.display = "none";
}

请注意，您需要将 myGeneratedLink 替换为您在生成的链接中使用的唯一标识符，并将 targetElementId 替换为您要隐藏的元素的 ID。

请记住，这种方法有局限性，可能不适用于所有网站。某些网站可能已采取措施防止内容脚本运行，或者可能已采取额外的安全措施来防止 CSS 注入。