What is Greasemonkey/Tampermonkey doing to my jQuery object when I use GM_setValue?

问题

I'm trying to select DOM elements into a Tampermonkey variable using GM_setValue, for later injection on different pages.

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.

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>

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");
    });
})();

Here's the console output:

As you can see - Tampermonkey (I also tried this with Greasemonkey) appears to be stripping the jQuery out of the jQuery object.

回答1:

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

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.)

The question shows you are apparently just cloning HTML. If that's true, you don't need to try and store a jQuery object. Just store the HTML.

Something like this:

// ==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: The wrapping cruft I omitted is stuff that you almost never need in a GM/TM script.

来源：https://stackoverflow.com/questions/57929417/store-dexie-database-in-tampermonkey-storage

标签

jquery

greasemonkey

tampermonkey