Реализуем clippyjs в Tampermonkey

Question

Моя цель - написать скрипт Tampermonkey, который поместит помощника Clippy из Microsoft Office на любую веб-страницу, которую я выберу.Для этого я использую https://github.com/pi0/clippyjs. Вот что я получил до сих пор:

// ==UserScript==
// @name        Clippy!
// @include     https://stackoverflow.com/questions/*
// @require     https://unpkg.com/jquery@3.2.1/dist/jquery.js
// @require     https://unpkg.com/clippyjs@0.0.3/dist/clippy.js
// @grant       GM_addStyle
// ==/UserScript==

/*--- For this to work well, we must also add-in the jQuery-UI CSS.
    We add the CSS this way so that the embedded, relatively linked images load correctly.
    (Use //ajax... so that https or http is selected as appropriate to avoid "mixed content".)
*/
$("head").append (
    '<link '
  + 'href="//gitcdn.xyz/repo/pi0/clippyjs/master/assets/clippy.css" '
  + 'rel="stylesheet" type="text/css">'
);

clippy.load('Merlin', function(agent){
    // Do anything with the loaded agent
    agent.show();
});

Это приводит к:

Uncaught ReferenceError: clippy is notопределены

Есть ли способ заставить Clippyjs работать как скрипт Tampermonkey?

Answer 1

Clippyjs не очень хорошо спроектирован для сценариев Tampermonkey, он ajaxes в других JS-файлах, таких как agent.js, которые ожидают, что clippy будет определено в области действия window.

Это означает, что вы должны вставьте все в область страницы, например:

// ==UserScript==
// @name        Clippy script demo injection
// @include     https://stackoverflow.com/questions/*
// @grant       none
// ==/UserScript==
/* global $, clippy */
/* eslint-disable no-multi-spaces */

//-- These particular target page(s) already have jQuery, otherwise addJS_Node() it too.

$("head").append ( `
    <link  href="//gitcdn.xyz/repo/pi0/clippyjs/master/assets/clippy.css"
    rel="stylesheet" type="text/css">
` );

addJS_Node (null, "https://unpkg.com/clippyjs@latest", null, startClippy);

//-- addJS_Node waits for clippyjs to load before running this... 
function startClippy () {
    clippy.load ('Merlin', function (agent) {
        agent.show ();
    } );
}

function addJS_Node (text, s_URL, funcToRun, runOnLoad) {
    var D                                   = document;
    var scriptNode                          = D.createElement ('script');
    if (runOnLoad) {
        scriptNode.addEventListener ("load", runOnLoad, false);
    }
    scriptNode.type                         = "text/javascript";
    if (text)       scriptNode.textContent  = text;
    if (s_URL)      scriptNode.src          = s_URL;
    if (funcToRun)  scriptNode.textContent  = '(' + funcToRun.toString() + ')()';

    var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    targ.appendChild (scriptNode);
}