0

I'm trying to build a chrome extension and first step is to insert a div beneath the YouTube player when watching a video, but I can't seem to get this simple task to work.

After inspecting the page it appears the video container is a div with ID "player" which is referenced in the code below.

Thanks in advance!

My manifest file:

{
  "manifest_version": 3,
 
  "name": "YouTube Waveform Viewer",
  "version": "1.0",
  "description": "YouTube Waveform Viewer",
 
  "content_scripts": [{
    "js": ["content.js"],
    "matches": ["https://youtube.com/*"]
  }]
 
}

My content.js:

// Create a new div element
const newDiv = document.createElement('div');

// Add some content to the new div element
newDiv.innerHTML = 'This is the new div';

// Add some styles to the new div element
newDiv.style.width = '200px';
newDiv.style.height = '200px';
newDiv.style.backgroundColor = 'lightblue';

// Get a reference to the parent element where we want to insert the new div
const parentElement = document.getElementById('player');

// Insert the new div element into the parent element
parentElement.appendChild(newDiv);
Adam Segall
  • 1
  • 1
  • Add `www.` in `matches` (Chrome address bar is [deceiving](https://superuser.com/a/1498561) you), see also [How to detect page navigation on YouTube and modify its appearance seamlessly?](https://stackoverflow.com/a/34100952) – wOxxOm Feb 27 '23 at 22:29
  • I hope this helps you.[unable to find YouTube class](https://stackoverflow.com/questions/74913694/unable-to-find-youtube-class/74916292#74916292) – Norio Yamamoto Feb 28 '23 at 00:07

0 Answers0