Haga que los sitios web funcionen un poco más como usted desea.

Empieza aquí

How @grant funciona

Para scripts nuevos, declare cada API privilegiado que utilice. Social Browser ejecuta scripts con concesiones explícitas en un mundo User Script aislado y une solo las capacidades solicitadas. un guión con @grant none se ejecuta sin capacidades de GM.

// ==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');

Clásico GM_* o moderno GM.*?

Social Browser admite los nombres clásicos familiares y sus modernos GM.* forms for the main GM capability set. The modern form is Promise-friendly, so use await. Elija un estilo por guión y sea coherente.

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

Utilice la información del script cuando necesite inspeccionar el script actual, la versión, las concesiones, las coincidencias o la información del tiempo de ejecución de Social Browser. No codifique el comportamiento en torno a las cadenas de versión a menos que realmente necesite lógica de compatibilidad.

// @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);

Almacenamiento

Recuerde pequeños datos de script

El almacenamiento GM está limitado al User Script en lugar de ser un almacenamiento de páginas normal. Es ideal para preferencias, contadores y estados de script inofensivos. No lo utilice como una bóveda informal para contraseñas, secretos 2FA, cookies o material de sesión.

// @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');

Ver un cambio de valor

GM_addValueChangeListener Es útil cuando el mismo script está abierto en más de un marco o pestaña. La devolución de llamada recibe (name, oldValue, newValue, remote). En Social Browser, los eventos de cambio de valor se pueden sincronizar entre marcos/pestañas en la misma sesión Profile.

// @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);

Ayudantes de página

Añade estilos o pequeños elementos.

GM_addStyle(css) / GM.addStyle(css)

Utilice esto cuando la personalización de una página sea principalmente visual. Es más limpio que establecer muchos individuos element.style propiedades.

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

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

Cree un pequeño elemento DOM y agréguelo de forma segura. Puede pasar un elemento principal primero u omitirlo para usar el cuerpo de la página.

// @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); } });}

Red

Realice solicitudes privilegiadas con GM_xmlhttpRequest

pagina normal fetch() está controlado por las reglas normales del navegador/CORS de la página. La solicitud GM de Social Browser API utiliza un canal de solicitud de proceso de navegador dedicado. Antes de enviar una solicitud, su destino se compara con el del script. @connect reglas.

// ==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);

Devoluciones de llamada y aborto

La solicitud API admite devoluciones de llamadas de solicitudes comunes y devuelve un identificador que se puede cancelar. Utilice un tiempo de espera incluso cuando también apoye el aborto.

// @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();

Forma moderna: GM.xmlHttpRequest(...) and GM.xmlhttpRequest(...) asignar a la misma capacidad de solicitud.

Recursos

Paquete de texto reutilizable, CSS u otros activos

Declarar un activo con @resource, luego léelo por su nombre. 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);

Si el nombre del recurso no existe, API devuelve undefined. Mantenga los nombres de los recursos breves y descriptivos.

Ayudantes del navegador

Pestañas, notificaciones y portapapeles

GM_openInTab(url, options)

Abra un URL en una pestaña Social Browser. uso active: false cuando la nueva pestaña debería abrirse sin enfocarse.

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

Estado del script por pestaña: GM_getTab, GM_saveTab, GM_getTabs

Estos API almacenan pequeños estados User Script asociados con pestañas. Son útiles cuando un script necesita recordar qué paso o vista pertenece a una pestaña en particular sin mezclarlo con las preferencias globales del script.

// @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

Muestra una notificación del navegador sobre algo que el usuario realmente debería notar. Evite el spam de notificaciones para actividades rutinarias de secuencias de comandos.

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

GM_setClipboard(data, type)

Copie el texto (o HTML cuando se solicite) al portapapeles. Úselo después de una acción clara del usuario cuando sea posible, para que el usuario comprenda por qué cambió su portapapeles.

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

Menús y descargas

Agregar acciones de usuario deliberadas

GM_registerMenuCommand / GM_unregisterMenuCommand

Registre un comando en el menú User Script. Este es un buen patrón para acciones que deberían ocurrir sólo cuando el usuario las solicite explícitamente.

// @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

Inicie una descarga a través de Social Browser. Asigne al archivo un nombre claro y utilícelo solo cuando la descarga sea parte del propósito visible del script.

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

Avanzado

unsafeWindow: puente a páginas globales solo cuando sea necesario

La concesión explícita User Scripts normalmente se ejecuta en un mundo aislado. unsafeWindow es un puente de suscripción voluntaria hacia los elementos globales en el mundo PRINCIPAL de la página. Úselo solo cuando el sitio web exponga una variable de página o función a la que el acceso ordinario a un script aislado no pueda acceder.

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

Regla del mundo de ejecución

Ejemplo completo

Un pequeño script que combina almacenamiento, estilos, comandos de menú y portapapeles.

Este ejemplo se mantiene intencionalmente pequeño. Recuerda si el resaltado está habilitado, agrega una regla de estilo, permite al usuario alternarla desde el menú User Script y copia un valor de página visible solo cuando se le solicita.

// ==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();})();