Tampermonkey Filesystem VS Code Extension

Edit Tampermonkey browser scripts in the comfort of your everyday code editor (assuming that one is VS Code).

Features implemented

• List files
• Open individual scripts and edit them like local files.
  • Same for required files and storage content.
• Save editor changes back to Tampermonkey.
• Link a script with a local file using Link With Local File....
  • Keep the editor buffer in sync with both Tampermonkey and the linked local file at the same time!
  • Also allows opening that file with your file explorer.
  • Native diff to avoid deleting by mistake.
• Getting started (Command: Show Getting Started).

Future features for some day

• Easier flow, potentially automated flow to send the code to tampermonkey-editors extension.
• Text search feature. (Its VS Code API is currently experimental)
• File search feature. (Its VS Code API is currently experimental)

Architecture

• The extension uses a single virtual file-system scheme: tampermonkeyFS:///.
• src/extension.js is the composition root for provider setup, UI state, listeners, commands, and the connection loop.
• src/tampermonkeyFileSystem.js Is the heart of the virtual tree processed from tampermonkey with abstractions and translates from VSCode API to internal architecture.
• src/saveToDisk.js & src/syncManager.js Are the main files related to file read/write and handling the relationship between data from Tampermonkey vs data from filesystem.
• Sync is editor-centered: Editor <-> Tampermonkey and Editor <-> Linked File are the only active sync pairs.

Settings

• tampermonkeyfs.emitExternalChangeEvents (boolean, default: true)
  • Controls whether linked local file changes cause editor to update (or ask which version to keep).
• tampermonkeyfs.showDisconnectedConnectFiles (boolean, default: true)
  • Controls whether Connect to Tampermonkey helper files are shown while disconnected.
  • Opening the helper file explains how to connect back to Tampermonkey and copies the connection code.
• tampermonkeyfs.showExplorerOpenButton (boolean, default: true)
  • Controls whether the Explorer welcome action for opening/connecting Tampermonkey is shown when starting disconnected.
• tampermonkeyfs.showInStatusBar (enum, default: Always)
  • Always: Always show the Tampermonkey status bar item when the extension is active.
  • Any_TM: show the Tampermonkey status bar item when any workspace folder is Tampermonkey.
  • TM_Mode: only show the Tampermonkey status bar item when all workspace folders are Tampermonkey.

Filesystem code design and API usage based on

• VS Code fsprovider-sample

Getting Started

1. Install tampermonkey-editors
2. On first activation, getting-started walkthrough appears. You can reopen it later with Show Getting Started.
3. If the current window already has the Tampermonkey folder, use Copy Connection Code.
4. If the current window does not yet have the Tampermonkey folder, use Connect to Tampermonkey. It adds the folder first and then copies the connection code there.
5. After connecting, edit scripts normally and save to push changes back to Tampermonkey.
6. Right click a file and Link With Local File... when you want the same script backed by a file. Whenever you save, Tampermonkey and the linked file become the same content. Use it as a backup of what is in your browser or for committing to a repository.

Development

Docker way

1. Run npm docker:watch. Everything will be installed and setup automatically.
2. Execute Launch Extension configuration.

Local install way

1. Ensure you have the correct node version activated.
2. Install dependencies: npm install.
3. Build: npm run watch.
4. Execute Launch Extension configuration.

Release/test in other editors

Docker way

1. Run npm docker:package. the vsix file appears.
2. Upload extension to markets.