Chrome Extension breaks the original layout of the webpage

Question

I am trying to learn to develop chrome extensions. I am using YouTube for experimenting. I have a small content_script that just creates a div inside the YouTube video player.

The is created but it breaks the whole page UI. As you can see in the picture, the top bar is gone. The video title, subscribe button and all the other stuff like thumbs up, thumbs down etc are not being rendered properly. Why is this happening? How do I write my extension sp that it does not break the UI?

CODE

{
    "manifest_version": 2,
    "name": "name",
    "version": "0.1",
    "author": "author",
    "description": "",
    "content_scripts": [{
        "matches": [
            "<all_urls>"
        ],
        "js": [
            "content.js"
        ],
        "css": ["style.css"]
    }],
}

content.js

window.addEventListener('load', function() {
   
    let holder = document.getElementById("player-container").querySelector("#container").querySelector("#movie_player");
    console.log(holder.offsetHeight)
      
    let divContainer = document.createElement("div");
    holder.appendChild(divContainer);
    divContainer.style.height = "80%";
    divContainer.id = "container";
});

css

#container {
    display: grid;
    width: 300px;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 9999;
    /* background-color: rgb(0, 0, 0); */
}

See also [How to really isolate stylesheets in the Google Chrome extension?](https://stackoverflow.com/q/12783217) — wOxxOm, Jul 22 '20 at 13:29

score 0 · Accepted Answer · answered Jul 22 '20 at 13:25

0

It looks like ‘#container’ is also a selector already on the page - try renaming yours to something else

let holder = document.getElementById("player-container").querySelector("#container").querySelector("#movie_player");

answered Jul 22 '20 at 13:25

Ramakay

2,919
1
5
21

Chrome Extension breaks the original layout of the webpage

1 Answers1