Sorgen Sie dafür, dass Websites ein wenig mehr so funktionieren, wie Sie es möchten.

Beginnen Sie hier

How @grant funktioniert

Deklarieren Sie für neue Skripte jedes privilegierte API, das Sie verwenden. Social Browser führt Skripte mit expliziten Berechtigungen in einer isolierten User Script-Welt aus und überbrückt nur die angeforderten Funktionen. Ein Skript mit @grant none läuft ohne GM-Fähigkeiten.

// ==UserScript==// @name Remember display mode// @namespace https://example.com/my-scripts// @match https://example.com/*// @grant GM_getValue// @grant GM_setValue// ==/UserScript== const mode = GM_getValue('displayMode', 'compact');console.log('Saved mode:', mode); GM_setValue('displayMode', 'comfortable');

Klassisch GM_* oder modern GM.*?

Social Browser unterstützt die bekannten klassischen Namen und ihre modernen GM.* forms for the main GM capability set. The modern form is Promise-friendly, so use await. Wählen Sie einen Stil pro Skript und bleiben Sie konsistent.

const theme = GM_getValue('theme', 'dark');GM_setValue('theme', 'light');

const theme = await GM.getValue('theme', 'dark');await GM.setValue('theme', 'light');

GM_info / GM.info

Verwenden Sie Skriptinformationen, wenn Sie das aktuelle Skript, die aktuelle Version, Berechtigungen, Übereinstimmungen oder Social Browser-Laufzeitinformationen überprüfen müssen. Kodieren Sie das Verhalten rund um Versionszeichenfolgen nicht fest, es sei denn, Sie benötigen wirklich Kompatibilitätslogik.

// @grant GM_info console.log('Script:', GM_info.script.name);console.log('Version:', GM_info.version);console.log('Handler:', GM_info.scriptHandler);console.log('Grants:', GM_info.scriptGrants);console.log('Matches:', GM_info.scriptMatches);

Lagerung

Denken Sie an kleine Skriptdaten

GM-Speicher ist auf User Script beschränkt und kein gewöhnlicher Seitenspeicher. Es ist ideal für harmlose Einstellungen, Zähler und Skriptstatus. Verwenden Sie es nicht als zufälligen Tresor für Passwörter, 2FA-Geheimnisse, Cookies oder Sitzungsmaterial.

// @grant GM_getValue// @grant GM_setValue// @grant GM_deleteValue const settings = GM_getValue('settings', { compact: true, rowsPerPage: 25}); settings.rowsPerPage = 50;GM_setValue('settings', settings); // Reset later if the user asks for defaults.// GM_deleteValue('settings');

Beobachten Sie eine Werteveränderung

GM_addValueChangeListener ist nützlich, wenn dasselbe Skript in mehr als einem Frame oder Tab geöffnet ist. Der Rückruf erhält (name, oldValue, newValue, remote). In Social Browser können Wertänderungsereignisse über Frames/Tabs hinweg in derselben Profile/Sitzung synchronisiert werden.

// @grant GM_addValueChangeListener// @grant GM_removeValueChangeListener const listenerId = GM_addValueChangeListener( 'displayMode', (name, oldValue, newValue, remote) => { console.log({ name, oldValue, newValue, remote }); }); // Remove it when you no longer need it.// GM_removeValueChangeListener(listenerId);

Seitenhelfer

Fügen Sie Stile oder kleine Elemente hinzu

GM_addStyle(css) / GM.addStyle(css)

Verwenden Sie dies, wenn eine Seitenanpassung überwiegend visueller Natur ist. Es ist sauberer als viele einzelne Einstellungen vorzunehmen element.style Eigenschaften.

// @grant GM_addStyle GM_addStyle(` .important-total { font-weight: 700; outline: 2px solid currentColor; padding: 4px 8px; }`);

GM_addElement(...) / GM.addElement(...)

Erstellen Sie ein kleines DOM-Element und hängen Sie es sicher an. Sie können zuerst ein übergeordnetes Element übergeben oder es weglassen, um den Seitentext zu verwenden.

// @grant GM_addElement const panel = document.querySelector('#account-panel');if (panel) { GM_addElement(panel, 'button', { type: 'button', textContent: 'Copy account ID', className: 'my-copy-button', onclick() { const id = panel.querySelector('.account-id')?.textContent?.trim(); if (id) navigator.clipboard.writeText(id); } });}

Netzwerk

Stellen Sie privilegierte Anfragen mit GM_xmlhttpRequest

Normale Seite fetch() wird durch die normalen Browser-/CORS-Regeln der Seite gesteuert. Die GM-Anfrage Social Browser API verwendet einen dedizierten Browser-Prozess-Anfragekanal. Bevor eine Anfrage gesendet wird, wird ihr Ziel mit dem des Skripts verglichen @connect Regeln.

// ==UserScript==// @match https://app.example.com/*// @connect api.example.com// @grant GM_xmlhttpRequest// ==/UserScript== const response = await GM_xmlhttpRequest({ method: 'GET', url: 'https://api.example.com/status', responseType: 'json', timeout: 10000, headers: { Accept: 'application/json' }}); console.log(response.status, response.response);

Rückrufe und Abbruch

Die Anfrage API unterstützt allgemeine Anfragerückrufe und gibt ein Handle zurück, das abgebrochen werden kann. Verwenden Sie eine Zeitüberschreitung, auch wenn Sie auch den Abbruch unterstützen.

// @connect api.example.com// @grant GM_xmlhttpRequest const request = GM_xmlhttpRequest({ url: 'https://api.example.com/slow-report', timeout: 15000, onload(response) { console.log('Loaded:', response.status); }, onerror(error) { console.error('Request failed:', error); }, ontimeout() { console.warn('Request timed out'); }, onabort() { console.log('Request aborted'); }}); // Cancel only if your script no longer needs the result.// request.abort();

Moderne Form: GM.xmlHttpRequest(...) and GM.xmlhttpRequest(...) Zuordnung zur gleichen Anforderungsfunktion.

Ressourcen

Bündeln Sie wiederverwendbaren Text, CSS oder andere Assets

Deklarieren Sie einen Vermögenswert mit @resource, dann lies es namentlich vor. GM_getResourceText returns decoded text. GM_getResourceURL returns a data URL that preserves the response MIME type.

// ==UserScript==// @resource helperCss https://example.com/assets/helper.css// @grant GM_getResourceText// @grant GM_getResourceURL// ==/UserScript== const css = await GM_getResourceText('helperCss');console.log(css); const dataUrl = await GM_getResourceURL('helperCss');console.log(dataUrl);

Wenn der Ressourcenname nicht vorhanden ist, wird API zurückgegeben undefined. Halten Sie Ressourcennamen kurz und aussagekräftig.

Browser-Helfer

Registerkarten, Benachrichtigungen und Zwischenablage

GM_openInTab(url, options)

Öffnen Sie einen URL in einer Registerkarte Social Browser. Benutzen active: false wann der neue Tab geöffnet werden soll, ohne den Fokus zu nehmen.

// @grant GM_openInTab GM_openInTab('https://example.com/report', { active: false});

Skriptstatus pro Registerkarte: GM_getTab, GM_saveTab, GM_getTabs

Diese APIs speichern den kleinen User Script-Status, der mit Registerkarten verknüpft ist. Sie sind nützlich, wenn ein Skript sich merken muss, welcher Schritt oder welche Ansicht zu einer bestimmten Registerkarte gehört, ohne dies mit globalen Skripteinstellungen zu vermischen.

// @grant GM_getTab// @grant GM_saveTab// @grant GM_getTabs const tabState = await GM_getTab();await GM_saveTab({ ...tabState, lastPanel: 'orders'}); const allScriptTabs = await GM_getTabs();console.log(allScriptTabs);

GM_notification

Zeigen Sie eine Browserbenachrichtigung für etwas an, das der Benutzer tatsächlich bemerken sollte. Vermeiden Sie Benachrichtigungs-Spam für routinemäßige Skriptaktivitäten.

// @grant GM_notification await GM_notification({ title: 'Report ready', text: 'The page data is ready to review.'});

GM_setClipboard(data, type)

Kopieren Sie den Text (oder HTML auf Anfrage) in die Zwischenablage. Verwenden Sie es nach Möglichkeit nach einer eindeutigen Benutzeraktion, damit der Benutzer versteht, warum sich seine Zwischenablage geändert hat.

// @grant GM_setClipboard const orderId = document.querySelector('.order-id')?.textContent?.trim();if (orderId) { GM_setClipboard(orderId, 'text');}

Menüs & Downloads

Fügen Sie bewusste Benutzeraktionen hinzu

GM_registerMenuCommand / GM_unregisterMenuCommand

Registrieren Sie einen Befehl im Menü User Script. Dies ist ein gutes Muster für Aktionen, die nur dann ausgeführt werden sollten, wenn der Benutzer ausdrücklich danach fragt.

// @grant GM_registerMenuCommand// @grant GM_unregisterMenuCommand const commandId = GM_registerMenuCommand( 'Highlight overdue rows', () => { document.querySelectorAll('.row.overdue').forEach((row) => { row.style.fontWeight = '700'; }); }); // Remove the menu item later if the script no longer needs it.// GM_unregisterMenuCommand(commandId);

GM_download

Starten Sie einen Download über Social Browser. Geben Sie der Datei einen eindeutigen Namen und verwenden Sie diesen nur, wenn das Herunterladen zum sichtbaren Zweck des Skripts gehört.

// @grant GM_download await GM_download({ url: 'https://example.com/reports/today.csv', name: 'today-report.csv'});

Fortgeschritten

unsafeWindow: Brücke zu Seiten-Globals nur bei Bedarf

Explicit-Grant User Scripts wird normalerweise in einer isolierten Welt ausgeführt. unsafeWindow ist eine Opt-in-Brücke zu Globals in der MAIN-Welt der Seite. Verwenden Sie es nur, wenn die Website eine Seitenvariable oder Funktion verfügbar macht, auf die ein normaler isolierter Skriptzugriff nicht zugreifen kann.

// @grant unsafeWindow const appVersion = unsafeWindow.appConfig?.version;if (appVersion) { console.log('Page app version:', appVersion);}

Hinrichtungsweltherrschaft

Vollständiges Beispiel

Ein kleines Skript, das Speicher, Stile, Menübefehle und Zwischenablage kombiniert

Dieses Beispiel bleibt bewusst klein. Es merkt sich, ob die Hervorhebung aktiviert ist, fügt eine Stilregel hinzu, ermöglicht dem Benutzer das Umschalten über das User Script-Menü und kopiert einen sichtbaren Seitenwert nur, wenn er dazu aufgefordert wird.

// ==UserScript==// @name Helpful order-page tools// @namespace https://example.com/my-scripts// @version 1.0.0// @match https://example.com/orders/*// @grant GM_getValue// @grant GM_setValue// @grant GM_addStyle// @grant GM_registerMenuCommand// @grant GM_setClipboard// ==/UserScript== (() => { 'use strict';  GM_addStyle(` .sb-order-highlight { outline: 2px solid currentColor; font-weight: 700; } `);  const applyHighlight = () => { const enabled = GM_getValue('highlightEnabled', true); document.querySelectorAll('.order-total').forEach((element) => { element.classList.toggle('sb-order-highlight', enabled); }); };  GM_registerMenuCommand('Toggle order highlighting', () => { const current = GM_getValue('highlightEnabled', true); GM_setValue('highlightEnabled', !current); applyHighlight(); });  GM_registerMenuCommand('Copy current order ID', () => { const orderId = document.querySelector('.order-id')?.textContent?.trim(); if (orderId) { GM_setClipboard(orderId, 'text'); } });  applyHighlight();})();