Javascript 删除'；s应用于注入式HTML

我正在创建一个

Chrome扩展

，它使用

JQuery

将

HTML

横幅/覆盖注入当前页面

我注意到一些页面会影响我创建的覆盖。这包括更改覆盖中元素的边距/字体等。我尝试过使用

取消设置

，但仍在更改样式

我创造了一个例子。在

google

和

stackoverflow

之间切换时，复选框及其文本将移动

示例

$("body").append(
  "<div id='my-overlay'><div id='my-overlay-right'>" +
    '<input type="checkbox" id="my-overlay-checkbox" name="my-checkbox" value="MyCheckbox"><label id="my-overlay-checkbox-text">This is a checkbox</label>' +
    "<button id='my-overlay-close-button'>X</button></div></div>"
);

$("#my-overlay *").css({
  all: "unset !important",
});

$("div#my-overlay").css({
  all: "unset !important",
  position: "fixed",
  border: "1px solid black",
  "margin-left": "-250px  !important",
  "margin-top": "0 !important",
  "margin-bottom": "0  !important",
  "margin-right": "0 !important",
  left: "500px",
  top: "-20px",
  width: "500px",
  height: "20px",
  transform: "translate(0, 20px)",
  "z-index": 10000,
  "background-color": "rgba(256,0,0,0.8)",
  transition: "opacity 0.3s, visibility 0.5s",
});

$("div#my-overlay-right").css({
  all: "unset !important",
  float: "right",
  margin: "0  !important",
  padding: 0,
});

$("input#my-overlay-checkbox").css({
  margin: "1px !important",
  padding: "0 !important",
});

$("label#my-overlay-checkbox-text").css({
  all: "unset !important",
  margin: "0",
  padding: "0",
  "font-weight": "normal",
  "font-size": "12px",
  "line-height": "1",
  color: "white",
  "font-family": "Verdana, Geneva, sans-serif",
});
$("button#my-overlay-close-button").css({
  all: "unset !important",
  "font-size": "16px",
  margin: "1px 10px 0 15px !important",
  padding: "0 !important",
  "background-color": "Transparent",
  "background-repeat": "no-repeat",
  border: "none",
  cursor: "pointer",
  overflow: "hidden",
  outline: "none",
  color: "white",
});

---

CSS与选择器的类或ID一起工作（大多数情况下），因此您是否尝试使用删除该类

如果样式使用的是元素本身（h1、h2、p…），那么您可以创建一个空的CSS类，将所有内容重置为默认值。然后将此类应用于要重置的项目，从而覆盖以前所做的所有更改。 看

---

祝您好运：）

据我所知，只要您将其注入另一个网页（不是属于您的扩展的内部网页）的DOM中，此网页仍然可以随时更改它，有时这会在以后发生，具体取决于该网页的逻辑

我避免这种情况的方法是尝试自己对它进行沙箱处理，在其中添加一个唯一的id，它很可能不会与网页上的另一个同名id发生冲突（可能使用扩展的id来实现这一点？）

您可以在扩展的内容脚本中执行此操作，如下所示：

var extId = chrome.runtime.id;
var elementUniqueId = 'ext_' + extId + '_my-overlay';

并将CSS移动到唯一id之后

除此之外，您还需要定期观察这个注入的元素，如果/当它被网页删除/更改时，您需要重新注入/重新设置它的样式

可能是这样的：

setInterval(function () {
    //if my element removed by the page:
    if (!elementUniqueId.length) {
        //inject my element again;
    }
}, 50);

---

另一种方法是将其作为

iframe

注入，这样父网页将无法访问它。但是，这也带来了成本/额外工作（包括在iframe页面和内容脚本之间来回发送消息）。

我已经更新了我的问题。这似乎解决了将样式应用于

html

元素时出现的问题，但我注意到问题仍然发生在其他页面之间。如果页面为我正在使用的任何特定元素指定样式，样式似乎会被覆盖。这可能是因为您的css是在原始站点css之前执行的，您希望您的css最后应用。也许可以尝试使用javascript设置类，以确保它在原始站点css之后添加它

setInterval(function () {
    //if my element removed by the page:
    if (!elementUniqueId.length) {
        //inject my element again;
    }
}, 50);