वेबसाइटों को अपनी इच्छानुसार थोड़ा और कार्यशील बनाएं।

यहां से प्रारंभ करें

How @grant काम करता है

नई स्क्रिप्ट के लिए, आपके द्वारा उपयोग किए जाने वाले प्रत्येक विशेषाधिकार प्राप्त API की घोषणा करें। Social Browser एक अलग User Script दुनिया में स्पष्ट अनुदान के साथ स्क्रिप्ट चलाता है और केवल अनुरोधित क्षमताओं को पूरा करता है। के साथ एक स्क्रिप्ट @grant none जीएम क्षमताओं के बिना चलता है।

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

क्लासिक GM_* या आधुनिक GM.*?

Social Browser परिचित क्लासिक नामों और उनके आधुनिक नामों का समर्थन करता है GM.* मुख्य GM capability set के लिए फ़ॉर्म। आधुनिक फ़ॉर्म Promise-अनुकूल है, इसलिए इसका उपयोग करें await. प्रति स्क्रिप्ट एक शैली चुनें और सुसंगत रहें।

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

जब आपको वर्तमान स्क्रिप्ट, संस्करण, अनुदान, मिलान या Social Browser रनटाइम जानकारी का निरीक्षण करने की आवश्यकता हो तो स्क्रिप्ट जानकारी का उपयोग करें। जब तक आपको वास्तव में संगतता तर्क की आवश्यकता न हो, संस्करण स्ट्रिंग्स के आसपास हार्ड-कोड व्यवहार न करें।

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

भंडारण

छोटे स्क्रिप्ट डेटा याद रखें

जीएम स्टोरेज को सामान्य पेज स्टोरेज के बजाय User Script तक सीमित कर दिया गया है। यह हानिरहित प्राथमिकताओं, काउंटरों और स्क्रिप्ट स्थिति के लिए आदर्श है। इसे पासवर्ड, 2एफए रहस्य, कुकीज़ या सत्र सामग्री के लिए आकस्मिक वॉल्ट के रूप में उपयोग न करें।

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

मूल्य परिवर्तन देखें

GM_addValueChangeListener तब उपयोगी होता है जब एक ही स्क्रिप्ट एक से अधिक फ्रेम या टैब में खुली हो। कॉलबैक प्राप्त होता है (name, oldValue, newValue, remote). Social Browser में, मूल्य-परिवर्तन ईवेंट एक ही 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);

पेज सहायक

शैलियाँ या छोटे तत्व जोड़ें

GM_addStyle(css) / GM.addStyle(css)

इसका उपयोग तब करें जब पृष्ठ अनुकूलन अधिकतर दृश्यमान हो। यह कई व्यक्तियों को स्थापित करने की तुलना में अधिक स्वच्छ है element.style गुण.

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

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

एक छोटा DOM तत्व बनाएं और उसे सुरक्षित रूप से जोड़ें। आप पहले मूल तत्व को पास कर सकते हैं, या पेज बॉडी का उपयोग करने के लिए इसे छोड़ सकते हैं।

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

नेटवर्क

के साथ विशेषाधिकार प्राप्त अनुरोध करें GM_xmlhttpRequest

सामान्य पृष्ठ fetch() पृष्ठ के सामान्य ब्राउज़र/सीओआरएस नियमों द्वारा नियंत्रित किया जाता है। Social Browser का GM अनुरोध API एक समर्पित ब्राउज़र-प्रक्रिया अनुरोध चैनल का उपयोग करता है। अनुरोध भेजने से पहले, उसके गंतव्य को स्क्रिप्ट के विरुद्ध जांचा जाता है @connect नियम.

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

कॉलबैक और निरस्त करें

अनुरोध API सामान्य अनुरोध कॉलबैक का समर्थन करता है और एक हैंडल लौटाता है जिसे निरस्त किया जा सकता है। तब भी टाइमआउट का उपयोग करें जब आप गर्भपात का भी समर्थन करते हों।

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

आधुनिक रूप: GM.xmlHttpRequest(...) and GM.xmlhttpRequest(...) समान अनुरोध क्षमता पर मैप करें।

संसाधन

पुन: प्रयोज्य पाठ, CSS या अन्य संपत्तियों को बंडल करें

के साथ संपत्ति की घोषणा करें @resource, फिर इसे नाम से पढ़ें। GM_getResourceText returns decoded text. GM_getResourceURL ऐसा data URL लौटाता है जो 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);

यदि संसाधन नाम मौजूद नहीं है, तो API वापस आ जाता है undefined. संसाधन नाम संक्षिप्त और वर्णनात्मक रखें।

ब्राउज़र सहायक

टैब, सूचनाएं और क्लिपबोर्ड

GM_openInTab(url, options)

Social Browser टैब में एक URL खोलें। उपयोग करें active: false जब नया टैब बिना फोकस किए खुलना चाहिए।

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

प्रति-टैब स्क्रिप्ट स्थिति: GM_getTab, GM_saveTab, GM_getTabs

ये APIs टैब से जुड़ी छोटी User 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

उपयोगकर्ता को वास्तव में जिस चीज़ पर ध्यान देना चाहिए उसके लिए एक ब्राउज़र अधिसूचना दिखाएं। नियमित स्क्रिप्ट गतिविधि के लिए अधिसूचना स्पैम से बचें।

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

GM_setClipboard(data, type)

टेक्स्ट को क्लिपबोर्ड पर कॉपी करें (या अनुरोध किए जाने पर HTML)। जब संभव हो तो स्पष्ट उपयोगकर्ता कार्रवाई के बाद इसका उपयोग करें, ताकि उपयोगकर्ता समझ सके कि उनका क्लिपबोर्ड क्यों बदला गया।

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

मेनू और डाउनलोड

जानबूझकर उपयोगकर्ता क्रियाएं जोड़ें

GM_registerMenuCommand / GM_unregisterMenuCommand

User Script मेनू में एक कमांड पंजीकृत करें। यह कार्यों के लिए एक अच्छा पैटर्न है जो केवल तभी होना चाहिए जब उपयोगकर्ता स्पष्ट रूप से उनके लिए पूछे।

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

Social Browser के माध्यम से डाउनलोड प्रारंभ करें। फ़ाइल को एक स्पष्ट नाम दें और इसका उपयोग केवल तभी करें जब डाउनलोड करना स्क्रिप्ट के दृश्य उद्देश्य का हिस्सा हो।

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

उन्नत

unsafeWindow: आवश्यक होने पर ही पेज ग्लोबल्स पर ब्रिज करें

स्पष्ट-अनुदान User Scripts आम तौर पर एक अलग दुनिया में चलता है। unsafeWindow पेज की मुख्य दुनिया में ग्लोबल्स के लिए एक ऑप्ट-इन ब्रिज है। इसका उपयोग केवल तभी करें जब वेबसाइट एक पेज वेरिएबल या फ़ंक्शन को उजागर करती है जिस तक सामान्य पृथक स्क्रिप्ट पहुंच नहीं हो सकती है।

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

निष्पादन-विश्व नियम

पूरा उदाहरण

एक छोटी स्क्रिप्ट जो स्टोरेज, स्टाइल, मेनू कमांड और क्लिपबोर्ड को जोड़ती है

यह उदाहरण जानबूझकर छोटा रहता है. यह याद रखता है कि हाइलाइटिंग सक्षम है या नहीं, एक शैली नियम जोड़ता है, उपयोगकर्ता को इसे User Script मेनू से टॉगल करने देता है, और केवल पूछे जाने पर दृश्यमान पृष्ठ मान की प्रतिलिपि बनाता है।

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