getElementById returns null (chrome extension)

Question

I'm new to web dev and I'm trying to make a chrome extension which skips to a certain point in a video. But when I run this code, it returns null, and I'm unsure how to fix it.

Error message

manifest.json

  "manifest_version": 2,
  "name": "AniSkip",
  "description": "adds skip button",
  "version": "1.0",
  "icons": {
    "16": "/images/icon.jpg",
    "48": "/images/icon.jpg",
    "128": "/images/icon.jpg"
  },
  "page_action":{
    "default_icon":{
      "16": "/images/icon.jpg",
      "48": "/images/icon.jpg",
      "128": "/images/icon.jpg"
    }
  },
  "content_scripts" : [{
    "all_frames": true,
    "matches": ["https://animixplay.to/*"],
    "css": ["main.css"],
    "js": ["button.js"]
    }],
    "permissions": ["activeTab"]
}

button.js

let btn = document.createElement("button");
btn.innerHTML = "Save";
btn.classList.add("s_button");

btn.onclick = function () {
  var video = document.getElementById('player1');

  console.log(video);
  video.currentTime = 30;

};

document.body.appendChild(btn);