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.
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