How to embed javascript on third party site?

Question

JavaScript

Faced with the task of changing the appearance on a third-party site. The bottom line is to make it possible to add new elements to the DOM. Similar to Download manager or SaveFromnet browser extensions. They add their buttons to sites such as YouTube, Contact and others.
If I run the script through the browser console - everything works perfectly. But I can't figure out how to implement it in the background. And only on certain sites.
Google is silent. Tell me where to dig. What is this area called. I would be grateful for useful tips and links!

Answer 1

This area is called - writing browser extensions / plugins. It goes without saying that this is not embedding a script in a third party site. Your extension should parse the page and only add home elements to the view the user gets.

Answer 2

Look in the direction of greasemonkey, tons of scripts for websites are written for it.
userscripts.org

Answer 3

What kind of g*vnocode do you have, you first use jQuery, then native js, where does it come from?????
And what exactly is the problem? Everything is working

Answer 4

value just contains what was entered in input (or the default value if nothing was entered).
Since jQuery is still used, you can use it to get the value:

<input type="text" id="usname" value="default username" />
<script>
$(".b-mail-footer__btn").click(function() {	
  var username=$("#usname").val();
  alert(username);
});
</script>

Answer 5

value is what you put in input. You are looking for the wrong input, then.

Answer 6

the value of the input (value) is what you enter in the input
What's the question?
$(".b-mail-footer__btn").click(
function() {
alert($('#usname').val());
}
);

Answer 7

You probably need to use the .innerHTML property or .val() - api.jquery.com/val