Editace Tampermonkey skriptů v externím editoru

08. 11. 2018 | Návody a tutoriály

V tomto krátkém tutoriálu Vám ukážu jak si nastavit Google Chrome s Tampermonkey rozšířením tak, aby bylo možné používat vlastní editor pro úpravu Vašich skriptů.

Čtete-li tento článek, pravděpodobně již víte co hledáte. Nebudu se tedy dlouze rozepisovat o tom, co, nebo k čemu Tampermonkey je, a přejdu rovnou k věci. Je neskutečně otravné psát a upravovat skripty v nativním Tampermonkey editoru. Proto Vám v následujících pár bodech popíšu jak a co kde nastavit, aby k psaní bylo možné používat jakýkoliv jiný editor.

Nejprve je však třeba přidělit Tampermonkey přístup k lokálním souborům. Vaše skripty jsou uložené mimo prohlížeč a bez tohoto oprávnění se k nim Tampermonkey nebude moci dostat. Přístup můžete přidělit následovně:

  1. Klikněte na menu troj-tečku v Google Chrome.
  2. Nástroje > Rozšíření > Tampermonkey > Detaily
  3. Najeďte dolů a zapněte Allow access to file URLs (respektive český překlad tohoto nastavení; mělo by to být něco na způsob: povolit přístup k lokálním souborům).

Poznámka pod čáru: Tohle nastavení nechcete zapínat pro kdejaké rozšíření. Z bezpečnostních důvodů je tato možnost v základu vypnuta. Jakmile je přístup k lokálním souborům povolen, můžeme pokračovat:

  1. Vytvořte složku, do které budete své skripty ukládat: C:\Scripts\FirstScriptCreated C:/Scripts/FirstScript folder.
  2. Ve složce vytvořte hlavní soubor vašeho skriptu: main.js a vložte do něj Váš kód, včetně Tampermonkey skript hlaviček. Váš kód by mohl vypadat nějak takto:
    // ==UserScript==
    // @name         FirstScript
    // @namespace    http://tampermonkey.net/
    // @version      0.1
    // @description  Log 'hello world' into console.
    // @author       You
    // @match        https://danieldusek.com/*
    // @require      utils.js
    // @grant        none
    // ==/UserScript==
    console.log('Hello world');
    
    if (typeof logExternal === 'function') { // Function defined in utils.js
        console.log('Hello from external file.');
    } else { console.log('Unable to import utils.js'); }​
  3. V Google Chrome klikněte na Tampermonkey ikonku a vyberte 'Create a new script'.
    1. Otevře se Tampermonkey editor s předgenerovaným kódem. Všechen ho vymažte.
    2. Zkopírujte do editoru pouze hlavičky Vašeho skriptu (viz výše).
    3. Přidejte @require anotaci, která bude obsahovat absolutní cestu k hlavnímu souboru Vašeho skriptu s využitím protokolu file://, takto:
      // ==UserScript==
      // @name         FirstScript
      // @namespace    http://tampermonkey.net/
      // @version      0.1
      // @description  Log 'hello world' into console.
      // @author       You
      // @match        https://danieldusek.com/*
      // @require      file://C:\Scripts\FirstScript\main.js
      // @require      file://C:\Scripts\FirstScript\utils.js
      // @grant        none
      // ==/UserScript==​
    4. Pokud máte další soubory vkládané přes anotaci @require, opět před jejich název přidejte file:// a absolutní cestu do složky, kde jsou uloženy (viďte utils.js soubor v předchozím úryvku kódu)
  4. Uložte skript (CTRL+S) a načtěte stránku, odpovídající stránce u @match anotace (danieldusek.com v mém případě).
  5. Kód uložený v C:\Scripts\FirstScript\main.js bude vložen do stránky a proveden.

A to je vše. Soubor main.js (a ostatní, které používáte) nyní můžete upravovat v editoru dle Vaší volby - po uložení změn a znovunačtění stránky jsou změny okamžitě reflektovány.

Doplňující poznámky v případě problémů:

  • Chcete-li svůj skript rozdělovat na více částí, použijte k tomu @require anotaci, jako normálně, ale nezapomeňte i přidat příslušný řádek do hlavičky souboru definované v Tampermonkey UI.
  • Nepojmenovávejte Vaše soubory *.user.js (takže žádné main.user.js apod.). Chrome se Vás pokusí sabotovat, pokud zvolíte takový název.