Javascript 使用 Greasemonkey 将 html 内容添加到页面的基本方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14249712/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Basic method to Add html content to the page with Greasemonkey?
提问by bushdiver
Is there a Greasemonkey method to append basic HTML content to the end of a page right after the <body>tag, or right before it ends?
是否有一个 Greasemonkey 方法可以将基本的 HTML 内容附加到页面末尾的<body>标签之后，或者就在它结束之前？
I found before/after methods but I need to know names of elements which may change page to page..
我找到了 before/after 方法，但我需要知道可能会更改页面到页面的元素的名称..
回答by Brock Adams
The quick and dirty way: Please only use innerHTMLfor brand-newcontent.
快速而肮脏的方式：请仅innerHTML用于全新的内容。
var newHTML = document.createElement ('div');
newHTML.innerHTML = ' \
<div id="gmSomeID"> \
<p>Some paragraph</p> \
etc. \
</div> \
';
document.body.appendChild (newHTML);
A complete scriptshowing the somewhat better jQuery way (and with new, ECMAScript 6, multiline string):
一个完整的脚本，展示了更好的 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>
` );
Both methods will place the new content like this:
这两种方法都会像这样放置新内容：
<!-- NEW STUFF INSERTED HERE -->
</body>
Which is a good place for it.
这是一个很好的地方。
Even though the HTML is at the endof the page, you can use CSS to displayit anywhere with something like:
即使 HTML 位于页面的末尾，您也可以使用 CSS 将其显示在任何位置，例如：
GM_addStyle ( " \
#gmSomeID { \
position: fixed; \
top: 0px; \
left: 0px; \
} \
" );
回答by dwjohnston
If you don't want to have to muck around with having to escape your multi line html - you can put your HTML in local files, and load it using GM_getResourceText. Make sure you have enabled your Greasemonkey/Tampermonkey to use local files.
如果您不想因为不得不转义多行 html 而烦恼 - 您可以将 HTML 放在本地文件中，并使用GM_getResourceText. 确保您已启用 Greasemonkey/Tampermonkey 以使用本地文件。
eg:
例如：
// ==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"));
})();
This solution is fine if the tamperscript is for yourself only. You can similarly save the resource online. For example:
如果篡改脚本仅供您自己使用，则此解决方案很好。您可以类似地在线保存资源。例如：
// @resource pastebin http://pastebin.com/raw/9WfbN24i
//...
$("body").append(GM_getResourceText("pastebin"));
also works
也有效
