226226< body >
227227 < div class ="container ">
228228 < nav class ="nav-header ">
229- < a href ="index.html ">
229+ < a href ="../../ index.html>
230230 < svg class ="icon " viewBox ="0 0 24 24 ">
231231 < path d ="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z "/>
232232 < polyline points ="9 22 9 12 15 12 15 22 "/>
@@ -246,6 +246,59 @@ <h1>
246246 </ h1 >
247247 < p > Learn to write powerful userscripts with practical examples, from basic DOM manipulation to advanced techniques using Greasemonkey APIs.</ p >
248248 </ header >
249+
250+ < h2 > Userscript Metadata</ h2 >
251+ < p >
252+ Userscripts often start with a metadata block that describes the script and how it should run.
253+ < strong > You don’t have to add this manually</ strong > —CodeTweak can generate and maintain it for you based on the sidebar settings.
254+ If you do add or edit a metadata block in the code editor, CodeTweak will sync those values with the sidebar and keep them up to date.
255+ </ p >
256+
257+ < div class ="feature-card ">
258+ < h3 > What the Metadata Block Contains</ h3 >
259+ < p > Common fields you’ll see and what they do:</ p >
260+ < ul >
261+ < li > < strong > @name</ strong > — Display name of your script</ li >
262+ < li > < strong > @namespace</ strong > — Unique namespace to avoid conflicts (optional)</ li >
263+ < li > < strong > @version</ strong > — Script version (semantic versioning recommended)</ li >
264+ < li > < strong > @description</ strong > — Short description of what your script does</ li >
265+ < li > < strong > @author</ strong > — Your name or handle</ li >
266+ < li > < strong > @match</ strong > /< strong > @include</ strong > — URL patterns where your script runs</ li >
267+ < li > < strong > @run-at</ strong > — When the script executes (e.g., document-start, document-idle)</ li >
268+ < li > < strong > @grant</ strong > — Permissions/APIs your script needs (e.g., GM_getValue, GM_setValue)</ li >
269+ < li > < strong > @require</ strong > — External scripts to load before your script (optional)</ li >
270+ < li > < strong > @resource</ strong > — Named assets your script can access (optional)</ li >
271+ < li > < strong > @icon</ strong > — Icon URL for your script (optional)</ li >
272+ < li > < strong > @license</ strong > — License identifier (optional)</ li >
273+ </ ul >
274+
275+ < h4 > Example</ h4 >
276+ < pre > < code class ="language-javascript "> // ==UserScript==
277+ // @name Example Script
278+ // @namespace https://codetweak.local
279+ // @version 1.0.0
280+ // @description Demonstrates a typical metadata header
281+ // @author You
282+ // @match *://example.com/*
283+ // @run-at document-idle
284+ // @grant GM_getValue
285+ // @grant GM_setValue
286+ // @require https://cdn.example.com/some-lib.min.js
287+ // @resource logo https://example.com/logo.png
288+ // ==/UserScript==
289+ </ code > </ pre >
290+
291+ < div class ="alert alert-info ">
292+ < svg class ="icon " viewBox ="0 0 24 24 ">
293+ < circle cx ="12 " cy ="12 " r ="10 "/>
294+ < line x1 ="12 " y1 ="16 " x2 ="12 " y2 ="12 "/>
295+ < line x1 ="12 " y1 ="8 " x2 ="12.01 " y2 ="8 "/>
296+ </ svg >
297+ < div >
298+ < strong > Good to know:</ strong > You can omit the entire metadata block. The editor will generate it from your sidebar selections (name, URLs, run at, grants, requires, resources, etc.) and keep both the header and sidebar in sync.
299+ </ div >
300+ </ div >
301+ </ div >
249302
250303 < h2 > Quick Start</ h2 >
251304 < p > Open the editor by clicking "New Script" from the dashboard. The sidebar helps you configure your script settings while you write code in the main area.</ p >
0 commit comments