Editace Tampermonkey skriptů v externím editoru

Č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\FirstScript
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.