Faites fonctionner les sites Web un peu plus comme vous le souhaitez.

Commencez ici

How @grant fonctionne

Pour les nouveaux scripts, déclarez chaque API privilégié que vous utilisez. Social Browser exécute des scripts avec des autorisations explicites dans un monde User Script isolé et relie uniquement les fonctionnalités demandées. Un scénario avec @grant none fonctionne sans capacités 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');

Classique GM_* ou moderne GM.*?

Social Browser prend en charge les noms classiques familiers et leurs noms modernes GM.* forms for the main GM capability set. The modern form is Promise-friendly, so use await. Choisissez un style par script et restez cohérent.

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

Utilisez les informations de script lorsque vous devez inspecter le script actuel, la version, les autorisations, les correspondances ou les informations d'exécution Social Browser. Ne codez pas en dur le comportement autour des chaînes de version, sauf si vous avez vraiment besoin d'une logique de compatibilité.

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

Stockage

Mémoriser les petites données de script

Le stockage GM est limité au User Script au lieu d'être un stockage de pages ordinaire. Il est idéal pour les préférences, les compteurs et l'état des scripts inoffensifs. Ne l'utilisez pas comme coffre-fort occasionnel pour les mots de passe, les secrets 2FA, les cookies ou le matériel de session.

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

Observer un changement de valeur

GM_addValueChangeListener est utile lorsque le même script est ouvert dans plusieurs cadres ou onglets. Le rappel reçoit (name, oldValue, newValue, remote). Dans Social Browser, les événements de changement de valeur peuvent se synchroniser entre les images/onglets de la même Profile/session.

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

Assistants de pages

Ajouter des styles ou des petits éléments

GM_addStyle(css) / GM.addStyle(css)

Utilisez-le lorsqu'une personnalisation de page est principalement visuelle. C'est plus propre que de définir plusieurs element.style propriétés.

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

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

Créez un petit élément DOM et ajoutez-le en toute sécurité. Vous pouvez d'abord transmettre un élément parent ou l'omettre pour utiliser le corps de la page.

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

Réseau

Faites des demandes privilégiées avec GM_xmlhttpRequest

Page normale fetch() est contrôlé par les règles normales du navigateur/CORS de la page. Requête GM de Social Browser API utilise un canal de requête de processus de navigateur dédié. Avant qu'une requête ne soit envoyée, sa destination est vérifiée par rapport au script @connect règles.

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

Rappels et abandon

La requête API prend en charge les rappels de requêtes courants et renvoie un handle qui peut être abandonné. Utilisez un délai d'attente même si vous prenez également en charge l'abandon.

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

Forme moderne : GM.xmlHttpRequest(...) and GM.xmlhttpRequest(...) mapper à la même capacité de requête.

Ressources

Regroupez du texte réutilisable, CSS ou d’autres actifs

Déclarez un bien avec @resource, puis lisez-le par son nom. 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 le nom de la ressource n'existe pas, le API renvoie undefined. Gardez les noms de ressources courts et descriptifs.

Aides au navigateur

Onglets, notifications et presse-papiers

GM_openInTab(url, options)

Ouvrez un URL dans un onglet Social Browser. Utiliser active: false quand le nouvel onglet doit s’ouvrir sans prendre le focus.

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

État du script par onglet : GM_getTab, GM_saveTab, GM_getTabs

Ces API stockent le petit état User Script associé aux onglets. Ils sont utiles lorsqu'un script doit mémoriser quelle étape ou quelle vue appartient à un onglet particulier sans la mélanger avec les préférences globales du 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

Afficher une notification du navigateur pour quelque chose que l'utilisateur devrait réellement remarquer. Évitez le spam de notification pour les activités de script de routine.

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

GM_setClipboard(data, type)

Copiez le texte (ou HTML sur demande) dans le presse-papiers. Utilisez-le après une action claire de l'utilisateur lorsque cela est possible, afin que l'utilisateur comprenne pourquoi son presse-papiers a changé.

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

Menus et téléchargements

Ajouter des actions utilisateur délibérées

GM_registerMenuCommand / GM_unregisterMenuCommand

Enregistrez une commande dans le menu User Script. Il s'agit d'un bon modèle pour les actions qui ne devraient se produire que lorsque l'utilisateur les demande explicitement.

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

Démarrez un téléchargement via Social Browser. Donnez au fichier un nom clair et utilisez-le uniquement lorsque le téléchargement fait partie de l'objectif visible du script.

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

Avancé

unsafeWindow: pont vers les pages globales uniquement lorsque cela est nécessaire

User Scripts à autorisation explicite s'exécute normalement dans un monde isolé. unsafeWindow est un pont optionnel vers les éléments globaux dans le monde PRINCIPAL de la page. Utilisez-le uniquement lorsque le site Web expose une variable ou une fonction de page que l'accès de script isolé ordinaire ne peut pas atteindre.

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

Règle du monde d'exécution

Exemple complet

Un petit script qui combine stockage, styles, commandes de menu et presse-papiers

Cet exemple reste volontairement petit. Il se souvient si la mise en surbrillance est activée, ajoute une règle de style, permet à l'utilisateur de la basculer à partir du menu User Script et copie une valeur de page visible uniquement lorsque cela lui est demandé.

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