dimanche 25 avril 2021

CSS elements are displayed differently in different websites. How to prevent this?

So I have an extension which creats a div and injects it as innerHTML to the currently opened page. Then there are different css elements in this div. Like buttons. However, same css elements are shown differently in different websites. Let me give an example of the different displays.

  • Google shows it like this:
    enter image description here
  • w3schools shows it like this:
    enter image description here

Even though the same code is run, the display is different. One text is bold while the other is not. And this is only one example. Another thing that happens is, table borders are shown in a website but are shown in another. Like this: Doing it like this:

var div = document.createElement('div');
div.id = "extra_div";
div.innerHTML = myHTML;
document.body.append(div);

and myHTML is this:

var myHTML = `
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="${chrome.runtime.getURL("myCSS.css")}">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
  
</head>

<body>
<div id="myDiv">
    <button title="Ice Cream">Ice Cream</button>
</div>
</body>
</html>

I am guessing it is because of the current websites' CSS options. Thus I am asking is there a way to prevent this? Or maybe something to say, "ignore every other css other than the code" etc.?




Aucun commentaire:

Enregistrer un commentaire