当我使用GM_setValue时，Greasemonkey/Tampermonkey对我的jQuery对象做什么? [英] What is Greasemonkey/Tampermonkey doing to my jQuery object when I use GM_setValue?
问题描述
我正在尝试使用GM_setValue将DOM元素选择到Tampermonkey变量中，以便以后在不同页面上进行注入.
I'm trying to select DOM elements into a Tampermonkey variable using GM_setValue, for later injection on different pages.
我创建了一个示例，其中可以使用.clone()在普通jQuery中执行此操作，但是当我在Tampermonkey中将其设置为值时，它将更改已保存变量的值.
I've created an example where I can do this in normal jQuery using .clone(), but when I set it as a value in Tampermonkey, it changes the value of the saved variable.
这是一个HTML页面，用于测试以下脚本:
Here's an HTML page to test the script on:
<!DOCTYPE html>
<html><head>
<script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link rel="stylesheet" href="style.css"/>
<style>
div {
border: solid 1px black;
margin: 5px;
padding: 5px;
}
</style>
</head>
<body>
<!-- these buttons controlled by grease monkey-->
<div>
GreaseMonkey <button id="copy"> save</button>
<button id="paste"> paste </button>
</div>
<div>
Local <button id="copyLocal"> save</button>
<button id="pasteLocal"> paste </button>
</div>
<div id="bar"> hello world </div>
<script>
var ele;
$("#copyLocal").click(function() {
console.log("copy");
ele = $("#bar").clone();
console.log(ele);
});
$("#pasteLocal").click(function(){
console.log("paste");
console.log(ele);
$("body").append(ele);
});
</script>
</body>
</html>
这是对应的Tampermonkey/Greasemonkey脚本:
And here's the corresponding Tampermonkey/Greasemonkey script:
// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @require https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js
// @match file:///C:/david/sandbox/jquery/index.html
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==
(function() {
'use strict';
$(document).ready(function() {
$("#copy").click(function() {
console.log("copy");
var ele = $("#bar").clone();
console.log(ele);
GM_setValue("ele", ele);
});
$("#paste").click(function(){
console.log("paste");
var ele = GM_getValue("ele");
console.log(ele);
$("body").append(ele);
});
console.log("ready");
});
})();
这是控制台输出:
您可以看到-Tampermonkey(我也使用Greasemonkey尝试过此操作)似乎正在将jQuery从jQuery对象中剥离出来.
As you can see - Tampermonkey (I also tried this with Greasemonkey) appears to be stripping the jQuery out of the jQuery object.
推荐答案
GM_setValue() 仅适用于:字符串， (一些)整数和布尔值.
在您的代码中，ele是一个对象.
现在，对于简单对象，您可以通过先对它们进行JSON编码来对它们进行GM_setValue设置.但是您的对象是一个复杂的jQuery对象，并且不能使用JSON编码. (曾经一段时间尝试将引发JS错误.如今，JSON.stringify只会忽略所有有问题的属性，从而使您没有最需要的东西.)
In your code, ele is an object.
Now for simple objects, you can GM_setValue them by first JSON encoding them. BUT your object is a complex jQuery object and these cannot be JSON encoded. (Once upon a time the attempt would throw a JS error. Nowadays, JSON.stringify will just omit all the problematic properties, leaving you without the stuff you need the most.)
该问题显示您显然只是在克隆HTML.如果是这样，则无需尝试存储jQuery对象.只需存储HTML.
类似这样的东西:
// ==UserScript==
// @name New Userscript
// @require https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js
// @match file:///C:/david/sandbox/jquery/index.html
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==
$("#copy").click (function () {
console.log ("copy");
var ele = $("#bar").html ();
console.log (ele);
GM_setValue ("ele", ele);
} );
$("#paste").click (function () {
console.log ("paste");
var ele = GM_getValue ("ele");
console.log (ele);
$("body").append (ele);
} );
console.log ("ready");
PS:我省略的包装纸屑是您在GM/TM脚本中几乎不需要的东西.
PS: The wrapping cruft I omitted is stuff that you almost never need in a GM/TM script.
这篇关于当我使用GM_setValue时，Greasemonkey/Tampermonkey对我的jQuery对象做什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
