Tampermonkey Editors on vscode.dev shows nametags instead of script names

[cyber-sec0]

Expected Behavior

Tampermonkey Editors on vscode.dev shows script names instead of nametags

Actual Behavior

Tampermonkey Editors on vscode.dev shows nametags instead of script names

// ==UserScript==
// @name Endless Google pages
// @namespace DeveloperName_OR_Installation_URL
// @Version 1.0
// @description try to take over the world!
// @author Me
// @match http://mywebsite.com/*
// ==/UserScript==

@name is always more helpful and nearly the only thing that devs pay attention to, while @namespace is usually a random username or URL, or anything that doesn't let anyone understand which/what the script actually is/does.

The TM dashboard shows the script @name, why show it differently on vscode.dev?
That's really confusing, vscode.dev is impossible to use because of that, I can't really find anything...

[derjanb]

TM Editors shows @namespace/@name. Feel free to create a settings UI to change this.

[cyber-sec0]

@derjanb

The issue with that would be that I would have to change the TM extension code or try doing that using a user script.
I tried the user script way, and it's way trickier than I remembered, which is why I made this suggestion.

document.querySelectorAll(".monaco-tl-contents").forEach(e=>{ let parts=e.innerText.split("\\"); if(parts.length>1)e.innerText=parts.pop(); });

The code above works, but only after I've already clicked on the namespace. VSCODE doesn't show the script name unless the namespace is clicked first.
Looking at the onclick javascript function call, it's just a bunch of single letters, so it's a minified code, and I don't want to take forever figuring that out, or having a script auto click on all script namespaces just to load the script name, then split and replace the current namespace/script name, with just the script name.

Couldn't you just add that option to the TM Editor's extension?

I would like to see only the script name, as I see when I open the TM extension. But VSCODE even adds folders to the same namespace, which I really dislike. Is there a way that we could also get rid of all folders?

[derjanb]

Now there is a settings UI. Adding an option and changing the code to use another folder structure shouldn't be a big issue.

[cyber-sec0]

@derjanb
Where are the settings for that?

I can't see it

The process that the AI told me to do isn't easy at all.

Click to show the process

1. Add the Setting to the Config (src/background/config.ts)

First, find the ExtensionConfig type and add a new property:

export type ExtensionConfig = {
    logLevel: LogLevel;
    useScriptNameInsteadOfNamespace: boolean;  // Add this
};

2. Add the UI Control (src/popup/PopupApp.vue)

Add a new option in the Settings section (lines 85-94):

<div class="settings-row">
    <label class="field">
        <span class="field-label">Script display</span>
        <select v-model="scriptDisplayMode" class="field-input field-select" @change="onScriptDisplayChange">
            <option :value="false">Show namespace</option>
            <option :value="true">Show script name</option>
        </select>
    </label>
</div>

3. Add the Vue Script Logic (src/popup/PopupApp.vue)

Add this to the <script setup> section:

const scriptDisplayMode = ref<boolean>(false);

async function loadScriptDisplayMode() {
    const stored = await getOptionRequest('useScriptNameInsteadOfNamespace');
    if (typeof stored === 'boolean') {
        scriptDisplayMode.value = stored;
    } else {
        scriptDisplayMode.value = false;
    }
}

function onScriptDisplayChange() {
    const payload = createSetOptionRequest('useScriptNameInsteadOfNamespace', scriptDisplayMode.value);
    runtime.sendMessage(payload);
}

And update onMounted() to load this setting:

onMounted(async () => {
    // ... existing code ...
    loadLogLevel();
    loadScriptDisplayMode();  // Add this
    getState();
});

4. Use the Setting in the File Display Logic (src/tab/page/userscripts.ts)

Modify the makeDirHandleFromList function to check the setting:

export async function makeDirHandleFromList (
    root: FolderHandle, 
    list: ListExternalResponseListItem[], 
    handler: ExternalHandler,
    useScriptName: boolean = false  // Add parameter
) {
    for (const { path: source_path, name: script_name, namespace, requires, storage } of list) {
        // Use script_name if useScriptName is true, otherwise use namespace
        const displayName = useScriptName && script_name ? script_name : (namespace || '<namespace missing>');
        
        const [ , type, ...url_parts ] = full_path.split('/');
        const path = [ sanitize(displayName), sanitize(script_name) ];
        // ... rest of the function
    }
}

5. Pass the Setting When Loading Scripts

Update wherever makeDirHandleFromList is called to pass the setting value.

---

Summary

The settings system already exists:

• Config storage: src/background/config.ts (ExtensionConfig type)
• Settings UI: src/popup/PopupApp.vue (has a settings section)
• Message handlers: Use getOptionRequest() and createSetOptionRequest() to communicate between popup and background
• Usage point: src/tab/page/userscripts.ts (where scripts are listed for display)