0

I'm creating extensions. As a test, I want to add a button to YouTube.
I would like to add a button like the red frame on the left side of the button to rate and share the video as shown in the following image. enter image description here But I can't add it.
Here are the manifest.json .

{
    "name": "test_extension",
    "version": "1",
    "manifest_version": 2,
    "permissions": [
        "tabs",
        "storage",
        "<all_urls>",
        "input"
        ], 
    "content_scripts": [
        {
            "matches": ["https://www.youtube.com/*"],
            "js": ["script/jquery-3.5.1.min.js","script/make-stamp.js"],
            "all_frames": true
        }
    ],
    "icons": {
        "48": "icon/48.png"
    }
}

The script you want to run is here.

console.log("test extension : Start");
$("#container > #info > #menu-container").before("<div><button id=\"stamp-button\"></button></div>");
console.log("test extension : make element?");

The chrome console also shows test extension: Start and test extension: make element.

Hisen
  • 1
  • 1
  • There is no point to select multi path ID's as it always be only one per page, so you can replace it with just `#menu-container` – Justinas Aug 09 '20 at 19:49
  • Thank you for your reply. I thought the id was unique. However, I found several by opening [Developer Tools](Ctrl+Shift+I) -> [Elements] on the video playback page of youtube and searching '# container'. So I did this. When I used [Developer Tools] -> [Elements], I found several, but when I used [view sourcecode](Ctrl+U), there was only one. Why is this? – Hisen Aug 09 '20 at 20:15
  • Source code (Ctrl+U) is hard-coded HTML that "as is" provided by server. But JS can append plenty of elements later on, just like you do. If you check e.g. SPA pages, there will be only few lines of HTML in source code – Justinas Aug 10 '20 at 05:56
  • See [How to detect page navigation on YouTube and modify its appearance seamlessly?](https://stackoverflow.com/a/34100952) – wOxxOm Aug 10 '20 at 11:49
  • Thank you.I was able to realize the content of the question by using "window.addEventListener('yt-navigate-start', process);" – Hisen Aug 10 '20 at 15:57

0 Answers0