Как добавить элемент html в tampermonkey

Я умею программировать на Html/Css, Javascript и jQuery.

Хотя я только начал программировать внутри Tampermonkey, поэтому не знаю, как внедрить html/css в Tampermonkey. Скрипты предназначены для добавления к уже существующему веб-сайту, я уже сделал его так, чтобы он запускался, когда я захожу на веб-сайт, но когда я пытаюсь сделать это сам, ничего не происходит. Я уже написал часть UserScript и добавил пользовательский интерфейс jQuery.

Для начала, чтобы я мог просто понять, как это сделать, я хотел бы просто создать элемент <div></div> и с помощью Css просто сделать его видимым полем над всеми другими элементами на странице.

Я понятия не имею, как начать, но я думаю, возможно, добавить «div» в элемент body веб-сайта, но я не уверен, как это сделать и манипулировать им.


person Intrinza    schedule 15.05.2016    source источник


Ответы (1)


У меня есть скрипт, работающий для SO, и я добавляю такую ​​​​кнопку

// ==UserScript==
// @name           Fixed top menu + Inbox notification + Achievement notification
// @author         LGSon (Fork of Cameron Bernhardt's (AstroCB) "Fixed Stack Exchange Top Bar")
// @version        1.0
// @description    Fixed positioned top bar of Stack Exchange sites and notification in title bar
// @match          *://*.stackoverflow.com/*
// @exclude        *://api.stackexchange.com/*
// @exclude        *://blog.stackexchange.com/*
// @exclude        *://blog.stackoverflow.com/*
// @exclude        *://chat.stackexchange.com/*
// @exclude        *://chat.stackoverflow.com/*
// @exclude        *://data.stackexchange.com/*
// @exclude        *://elections.stackexchange.com/*
// @exclude        *://stackexchange.com/*
// @grant          GM_addStyle
// ==/UserScript==

var button = document.createElement("Button");
button.innerHTML = "Title";
button.style = "top:0;right:0;position:absolute;z-index:99999;padding:20px;";
document.body.appendChild(button);
person Ason    schedule 15.05.2016