当我使用 GM_setValue 时，Greasemonkey/Tampermonkey 对我的 jQuery 对象做了什么？答案

【问题标题】：What is Greasemonkey/Tampermonkey doing to my jQuery object when I use GM_setValue?当我使用 GM_setValue 时，Greasemonkey/Tampermonkey 对我的 jQuery 对象做了什么？
【发布时间】：2020-01-15 16:07:15
【问题描述】：

我正在尝试使用 GM_setValue 将 DOM 元素选择到 Tampermonkey 变量中，以便稍后在不同页面上注入。

我创建了一个示例，我可以在普通 jQuery 中使用.clone() 执行此操作，但是当我在 Tampermonkey 中将其设置为值时，它会更改已保存变量的值。

这是一个用于测试脚本的 HTML 页面：

<!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 脚本：

// ==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 对象中剥离出来。

【问题讨论】：

标签： jquery greasemonkey tampermonkey

【解决方案1】：

GM_setValue()only works on: strings, (some) integers and booleans.

在您的代码中，ele 是一个对象。
现在对于 simple 对象，您可以通过首先对它们进行 JSON 编码来 GM_setValue 它们。但是你的对象是一个复杂的 jQuery 对象，这些不能是 JSON 编码的。（曾几何时the attempt would throw a JS error。如今，JSON.stringify 将忽略所有有问题的属性，让您没有最需要的东西。）

问题显示 您显然只是在克隆 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 脚本中几乎不需要的东西。

【讨论】：

嗨 - 感谢您的回答。不幸的是，这不适用于我实际尝试做的事情——即将数据绑定到我的 DOM 元素，并保存它们的状态。我打算改用 cookie。
您仍然可以绑定数据。只是不要使用 jQuery 的.data()。使用数据属性；这样数据就存储在 HTML 中，因此存储在 GM_setValue 中。您可能必须先对数据进行 JSON 编码。 ... 最后，不要使用 cookie。这些被发送到服务器并且作为退出（出于某种原因）是不稳定的。如果你走那条路，请改用localStorage。