Основной метод добавления html-контента на страницу с помощью Greasemonkey?
есть ли метод Greasemonkey для добавления основного содержимого HTML в конец страницы сразу после <body>
тег, или прямо перед его концом?
Я нашел до/после методов, но мне нужно знать имена элементов, которые могут меняться на каждой странице..
2 ответов
быстрый и грязный способ: пожалуйста, используйте только innerHTML
для Марка-новая содержание.
var newHTML = document.createElement ('div');
newHTML.innerHTML = ' \
<div id="gmSomeID"> \
<p>Some paragraph</p> \
etc. \
</div> \
';
document.body.appendChild (newHTML);
полный скрипт показывая несколько лучший способ jQuery (и с новой, ECMAScript 6, многострочной строкой):
// ==UserScript==
// @name YOUR_SCRIPT_NAME
// @include http://YOUR_SERVER.COM/YOUR_PATH/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant GM_addStyle
// ==/UserScript==
//--- The @grant directive is used to restore the proper sandbox.
$("body").append ( `
<div id="gmSomeID">
<p>Some paragraph</p>
etc.
</div>
` );
оба метода разместят новый контент следующим образом:
<!-- NEW STUFF INSERTED HERE -->
</body>
что является хорошим местом для этого.
хотя HTML находится на конец страницы, вы можете использовать CSS для дисплей это где-нибудь с чем-то вроде:
GM_addStyle ( " \
#gmSomeID { \
position: fixed; \
top: 0px; \
left: 0px; \
} \
" );
Если вы не хотите, чтобы придется возиться с тем, чтобы избежать вашей многострочной html - вы можете поместить свой HTML в локальные файлы и загрузить его с помощью GM_getResourceText
. Убедитесь, что у вас есть включен Greasemonkey / Tampermonkey для использования локальных файлов.
например:
// ==UserScript==
// @name Tamper Test
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match file:///C:/david/sandbox/tampermonkey/tamper.html
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @resource html file:///C:/david/sandbox/tampermonkey/foo.html
// @resource style file:///C:/david/sandbox/tampermonkey/style.css
// @grant GM_addStyle
// @grant GM_getResourceText
// ==/UserScript==
(function() {
'use strict';
$("body").append('<div id = "dwj-tamper">new content from tamper script</div>');
GM_addStyle(GM_getResourceText("style"));
$("body").append(GM_getResourceText("html"));
})();
Это решение прекрасно, если tamperscript предназначен только для вас. Вы также можете сохранить ресурс онлайн. Например:
// @resource pastebin http://pastebin.com/raw/9WfbN24i
//...
$("body").append(GM_getResourceText("pastebin"));
также работает