mirror of
https://github.com/GetOpenScript/OpenScript.git
synced 2026-09-18 09:45:43 +00:00
Switch popup UI to light mode
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
<title>OpenScript</title>
|
||||
<link rel="stylesheet" href="./styles/index.css" />
|
||||
</head>
|
||||
<body class="bg-navy-950 text-slate-100 flex flex-col h-[560px] w-[480px] overflow-hidden select-none">
|
||||
<body class="bg-slate-50 text-slate-900 flex flex-col h-[560px] w-[480px] overflow-hidden select-none">
|
||||
<div id="app" class="flex flex-col h-full"></div>
|
||||
<script type="module" src="./popup.js"></script>
|
||||
</body>
|
||||
|
||||
134
src/popup.js
134
src/popup.js
@@ -117,26 +117,26 @@ const removeSecret = async k => {
|
||||
|
||||
// UI Templates
|
||||
const renderHeader = () => `
|
||||
<header class="bg-navy-900 border-b border-navy-700/60 px-3 py-2 flex items-center justify-between shrink-0">
|
||||
<header class="bg-white border-b border-slate-200 px-3 py-2 flex items-center justify-between shrink-0 shadow-xs">
|
||||
<div class="flex items-center gap-2 cursor-pointer" id="nav-brand">
|
||||
<img src="/icons/icon-16.png" class="w-4 h-4 rounded-sm" />
|
||||
<span class="font-bold text-sm tracking-tight text-white flex items-center gap-1.5">
|
||||
<span class="font-bold text-sm tracking-tight text-slate-900 flex items-center gap-1.5">
|
||||
OpenScript
|
||||
<span class="text-[10px] font-mono px-1 py-0.2 rounded bg-navy-800 text-sky-400 border border-navy-700">1.0</span>
|
||||
<span class="text-[10px] font-mono px-1 py-0.2 rounded bg-slate-100 text-sky-700 border border-slate-200">1.0</span>
|
||||
</span>
|
||||
</div>
|
||||
<nav class="flex items-center gap-1.5 text-xs font-medium">
|
||||
<button id="nav-list" class="px-2.5 py-1 rounded transition-colors ${
|
||||
state.tab === 'list' ? 'bg-navy-700 text-white font-semibold' : 'text-slate-300 hover:text-white hover:bg-navy-800'
|
||||
state.tab === 'list' ? 'bg-slate-100 text-slate-900 font-semibold border border-slate-300 shadow-xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100'
|
||||
}">
|
||||
Scripts <span class="text-[10px] opacity-75">(${state.scripts.length})</span>
|
||||
</button>
|
||||
<button id="nav-secrets" class="px-2.5 py-1 rounded transition-colors ${
|
||||
state.tab === 'secrets' ? 'bg-navy-700 text-white font-semibold' : 'text-slate-300 hover:text-white hover:bg-navy-800'
|
||||
state.tab === 'secrets' ? 'bg-slate-100 text-slate-900 font-semibold border border-slate-300 shadow-xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100'
|
||||
}">
|
||||
Secrets <span class="text-[10px] opacity-75">(${Object.keys(state.secrets).length})</span>
|
||||
</button>
|
||||
<button id="nav-new" class="ml-1 text-amber-400 hover:text-amber-300 font-bold px-2 py-0.5 rounded border border-amber-500/40 bg-amber-500/10 transition-colors flex items-center gap-1">
|
||||
<button id="nav-new" class="ml-1 text-amber-900 hover:text-amber-950 font-bold px-2 py-0.5 rounded border border-amber-300 bg-amber-100 hover:bg-amber-200 transition-colors flex items-center gap-1 cursor-pointer">
|
||||
${icon('Plus', 'w-3 h-3')} New
|
||||
</button>
|
||||
</nav>
|
||||
@@ -144,14 +144,14 @@ const renderHeader = () => `
|
||||
`;
|
||||
|
||||
const renderBanner = () => state.userScriptsReady ? '' : `
|
||||
<div class="bg-amber-500/15 border-b border-amber-500/30 px-3 py-2 flex items-center justify-between text-amber-300 text-xs shrink-0 gap-2">
|
||||
<div class="bg-amber-50 border-b border-amber-200 px-3 py-2 flex items-center justify-between text-amber-900 text-xs shrink-0 gap-2">
|
||||
<div class="flex items-center gap-1.5 min-w-0">
|
||||
${icon('AlertTriangle', 'w-4 h-4 text-amber-400 shrink-0')}
|
||||
${icon('AlertTriangle', 'w-4 h-4 text-amber-600 shrink-0')}
|
||||
<span class="leading-tight">
|
||||
Enable <strong class="text-amber-200">"Allow User Scripts"</strong> in extension details to run scripts.
|
||||
Enable <strong class="text-amber-950">"Allow User Scripts"</strong> in extension details to run scripts.
|
||||
</span>
|
||||
</div>
|
||||
<button id="btn-open-settings" class="bg-amber-500/20 hover:bg-amber-500/30 border border-amber-500/40 text-amber-200 px-2 py-1 rounded text-[11px] font-medium shrink-0 flex items-center gap-1 transition-colors cursor-pointer">
|
||||
<button id="btn-open-settings" class="bg-white hover:bg-amber-100/60 border border-amber-300 text-amber-900 px-2 py-1 rounded text-[11px] font-medium shrink-0 flex items-center gap-1 transition-colors cursor-pointer shadow-xs">
|
||||
${icon('ExternalLink', 'w-3 h-3')} Details
|
||||
</button>
|
||||
</div>
|
||||
@@ -165,69 +165,69 @@ const renderScriptList = () => {
|
||||
);
|
||||
|
||||
return `
|
||||
<div class="flex flex-col flex-1 overflow-hidden bg-navy-950">
|
||||
<div class="p-2.5 border-b border-navy-800/80 flex items-center gap-2 shrink-0">
|
||||
<div class="flex flex-col flex-1 overflow-hidden bg-slate-50">
|
||||
<div class="p-2.5 border-b border-slate-200/90 bg-white flex items-center gap-2 shrink-0">
|
||||
<input
|
||||
id="script-search"
|
||||
type="text"
|
||||
placeholder="Filter scripts or matches..."
|
||||
value="${state.search}"
|
||||
class="bg-navy-900 border border-navy-800 text-slate-200 placeholder-slate-500 text-xs px-2.5 py-1 rounded w-full focus:outline-none focus:border-navy-600 font-mono"
|
||||
class="bg-slate-50 border border-slate-300 text-slate-900 placeholder-slate-400 text-xs px-2.5 py-1 rounded w-full focus:outline-none focus:border-slate-500 font-mono"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto p-2.5 space-y-2">
|
||||
${filtered.length ? filtered.map(s => `
|
||||
<div class="bg-navy-900/90 border border-navy-800 hover:border-navy-700/80 rounded p-2.5 transition-all flex flex-col gap-1.5">
|
||||
<div class="bg-white border border-slate-200 shadow-xs hover:border-slate-300 rounded p-2.5 transition-all flex flex-col gap-1.5">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<button
|
||||
data-action="toggle"
|
||||
data-id="${s.id}"
|
||||
class="relative inline-flex h-4 w-7 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
|
||||
s.enabled ? 'bg-emerald-500' : 'bg-slate-700'
|
||||
s.enabled ? 'bg-emerald-500' : 'bg-slate-300'
|
||||
}">
|
||||
<span class="pointer-events-none inline-block h-3 w-3 transform rounded-full bg-white shadow transition duration-200 ease-in-out ${
|
||||
s.enabled ? 'translate-x-3' : 'translate-x-0'
|
||||
}"></span>
|
||||
</button>
|
||||
<span class="font-semibold text-xs text-slate-100 truncate cursor-pointer hover:text-sky-300" data-action="edit" data-id="${s.id}">
|
||||
<span class="font-semibold text-xs text-slate-900 truncate cursor-pointer hover:text-sky-600" data-action="edit" data-id="${s.id}">
|
||||
${s.name}
|
||||
</span>
|
||||
<span class="text-[10px] font-mono text-slate-400 bg-navy-800 px-1 rounded border border-navy-700/60 shrink-0">
|
||||
<span class="text-[10px] font-mono text-slate-600 bg-slate-100 px-1 rounded border border-slate-200 shrink-0">
|
||||
v${s.version || '1.0'}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 shrink-0">
|
||||
<button data-action="edit" data-id="${s.id}" class="p-1 hover:bg-navy-800 rounded text-slate-400 hover:text-sky-400" title="Edit Script">
|
||||
<button data-action="edit" data-id="${s.id}" class="p-1 hover:bg-slate-100 rounded text-slate-500 hover:text-sky-600 cursor-pointer" title="Edit Script">
|
||||
${icon('Pencil', 'w-3.5 h-3.5')}
|
||||
</button>
|
||||
<button data-action="delete" data-id="${s.id}" class="p-1 hover:bg-navy-800 rounded text-slate-400 hover:text-red-400" title="Delete Script">
|
||||
<button data-action="delete" data-id="${s.id}" class="p-1 hover:bg-slate-100 rounded text-slate-500 hover:text-red-600 cursor-pointer" title="Delete Script">
|
||||
${icon('Trash2', 'w-3.5 h-3.5')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
${s.description ? `<p class="text-[11px] text-slate-400 line-clamp-1">${s.description}</p>` : ''}
|
||||
${s.description ? `<p class="text-[11px] text-slate-600 line-clamp-1">${s.description}</p>` : ''}
|
||||
<div class="flex flex-wrap gap-1 mt-0.5">
|
||||
${(s.matches || ['*://*/*']).slice(0, 3).map(m => `
|
||||
<span class="text-[10px] font-mono px-1.5 py-0.2 bg-navy-950 text-sky-300 border border-navy-800 rounded">
|
||||
<span class="text-[10px] font-mono px-1.5 py-0.2 bg-slate-100 text-sky-700 border border-slate-200 rounded">
|
||||
${m}
|
||||
</span>
|
||||
`).join('')}
|
||||
${(s.matches?.length > 3) ? `<span class="text-[10px] font-mono text-slate-400">+${s.matches.length - 3}</span>` : ''}
|
||||
${(s.matches?.length > 3) ? `<span class="text-[10px] font-mono text-slate-500">+${s.matches.length - 3}</span>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`).join('') : `
|
||||
<div class="h-full flex flex-col items-center justify-center text-center p-6 text-slate-400">
|
||||
${icon('FileCode', 'w-10 h-10 text-navy-700 mb-2')}
|
||||
<p class="text-xs font-medium text-slate-300">No user scripts found</p>
|
||||
<div class="h-full flex flex-col items-center justify-center text-center p-6 text-slate-500">
|
||||
${icon('FileCode', 'w-10 h-10 text-slate-300 mb-2')}
|
||||
<p class="text-xs font-medium text-slate-700">No user scripts found</p>
|
||||
<p class="text-[11px] text-slate-500 mt-1 max-w-[240px]">Create a new script or import a Tampermonkey script to get started.</p>
|
||||
<button id="btn-empty-new" class="mt-4 bg-white text-navy-950 hover:bg-slate-100 font-semibold text-xs px-3.5 py-1.5 rounded border border-slate-300 shadow-sm cursor-pointer">
|
||||
<button id="btn-empty-new" class="mt-4 bg-slate-900 text-white hover:bg-slate-800 font-semibold text-xs px-3.5 py-1.5 rounded shadow-sm cursor-pointer transition-colors">
|
||||
+ New Script
|
||||
</button>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
<footer class="bg-navy-900 border-t border-navy-800/80 px-3 py-1.5 flex items-center justify-between text-[10px] text-slate-400 shrink-0 font-mono">
|
||||
<footer class="bg-white border-t border-slate-200 px-3 py-1.5 flex items-center justify-between text-[10px] text-slate-500 shrink-0 font-mono">
|
||||
<span>${state.scripts.filter(s => s.enabled).length} active / ${state.scripts.length} total</span>
|
||||
<span>Storage: chrome.storage.local</span>
|
||||
</footer>
|
||||
@@ -241,34 +241,34 @@ const renderEditor = () => {
|
||||
const runAt = script?.runAt || 'document_idle';
|
||||
|
||||
return `
|
||||
<div class="flex flex-col flex-1 overflow-hidden bg-navy-950">
|
||||
<!-- Editor Textarea Area styled like reference image -->
|
||||
<div class="flex-1 p-2 bg-navy-900 flex flex-col min-h-0">
|
||||
<div class="flex flex-col flex-1 overflow-hidden bg-slate-50">
|
||||
<!-- Editor Textarea Area -->
|
||||
<div class="flex-1 p-2 bg-slate-100 flex flex-col min-h-0">
|
||||
<textarea
|
||||
id="editor-code"
|
||||
spellcheck="false"
|
||||
placeholder="// ==UserScript== // Paste or write script here..."
|
||||
class="flex-1 w-full p-2.5 bg-[#eef1f5] text-slate-900 font-mono text-[11px] leading-relaxed rounded border border-navy-800 focus:outline-none focus:ring-1 focus:ring-sky-500 resize-none overflow-y-auto"
|
||||
class="flex-1 w-full p-2.5 bg-white text-slate-900 font-mono text-[11px] leading-relaxed rounded border border-slate-300 focus:outline-none focus:ring-1 focus:ring-slate-400 resize-none overflow-y-auto shadow-inner"
|
||||
>${code}</textarea>
|
||||
</div>
|
||||
|
||||
<!-- Action Bar styled after reference image -->
|
||||
<div class="bg-navy-900 border-t border-navy-800 px-3 py-2 flex items-center justify-between gap-2 shrink-0">
|
||||
<!-- Action Bar -->
|
||||
<div class="bg-white border-t border-slate-200 px-3 py-2 flex items-center justify-between gap-2 shrink-0">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<button id="btn-save-script" class="bg-white hover:bg-slate-100 text-navy-950 font-semibold text-xs px-3 py-1 rounded border border-slate-300 shadow-sm cursor-pointer transition-colors">
|
||||
<button id="btn-save-script" class="bg-slate-900 hover:bg-slate-800 text-white font-semibold text-xs px-3 py-1 rounded shadow-sm cursor-pointer transition-colors">
|
||||
save script
|
||||
</button>
|
||||
<button id="btn-cancel-edit" class="bg-navy-800 hover:bg-navy-700 text-slate-200 text-xs px-2.5 py-1 rounded border border-navy-700 cursor-pointer transition-colors">
|
||||
<button id="btn-cancel-edit" class="bg-white hover:bg-slate-100 text-slate-700 text-xs px-2.5 py-1 rounded border border-slate-300 cursor-pointer transition-colors">
|
||||
cancel
|
||||
</button>
|
||||
<button id="btn-reset-boilerplate" class="bg-navy-800 hover:bg-navy-700 text-slate-300 text-xs px-2 py-1 rounded border border-navy-700 cursor-pointer transition-colors" title="Insert default template">
|
||||
<button id="btn-reset-boilerplate" class="bg-white hover:bg-slate-100 text-slate-600 text-xs px-2 py-1 rounded border border-slate-300 cursor-pointer transition-colors" title="Insert default template">
|
||||
template
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1.5">
|
||||
<label class="text-[10px] text-slate-400 font-mono">run-at:</label>
|
||||
<select id="run-at-select" class="bg-navy-950 border border-navy-700 text-slate-200 text-[11px] font-mono rounded px-1.5 py-1 focus:outline-none">
|
||||
<label class="text-[10px] text-slate-500 font-mono">run-at:</label>
|
||||
<select id="run-at-select" class="bg-white border border-slate-300 text-slate-800 text-[11px] font-mono rounded px-1.5 py-1 focus:outline-none">
|
||||
<option value="document_idle" ${runAt === 'document_idle' ? 'selected' : ''}>document_idle</option>
|
||||
<option value="document_start" ${runAt === 'document_start' ? 'selected' : ''}>document_start</option>
|
||||
<option value="document_end" ${runAt === 'document_end' ? 'selected' : ''}>document_end</option>
|
||||
@@ -276,8 +276,8 @@ const renderEditor = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notice Bar matching reference image -->
|
||||
<footer class="bg-navy-950 border-t border-navy-800/80 px-3 py-1 text-[10px] text-slate-400 font-mono shrink-0">
|
||||
<!-- Notice Bar -->
|
||||
<footer class="bg-slate-100 border-t border-slate-200 px-3 py-1 text-[10px] text-slate-500 font-mono shrink-0">
|
||||
notice: scripts run on matched URLs with synced secrets injected.
|
||||
</footer>
|
||||
</div>
|
||||
@@ -288,13 +288,13 @@ const renderSecrets = () => {
|
||||
const keys = Object.keys(state.secrets);
|
||||
|
||||
return `
|
||||
<div class="flex flex-col flex-1 overflow-hidden bg-navy-950">
|
||||
<div class="p-3 border-b border-navy-800/80 bg-navy-900/60 shrink-0">
|
||||
<h2 class="text-xs font-semibold text-slate-200 mb-1 flex items-center gap-1.5">
|
||||
${icon('Key', 'w-3.5 h-3.5 text-sky-400')} Synced Secrets / Environment Variables
|
||||
<div class="flex flex-col flex-1 overflow-hidden bg-slate-50">
|
||||
<div class="p-3 border-b border-slate-200 bg-white shrink-0 shadow-xs">
|
||||
<h2 class="text-xs font-semibold text-slate-800 mb-1 flex items-center gap-1.5">
|
||||
${icon('Key', 'w-3.5 h-3.5 text-sky-600')} Synced Secrets / Environment Variables
|
||||
</h2>
|
||||
<p class="text-[11px] text-slate-400 leading-tight">
|
||||
Secrets are saved to <span class="text-sky-300 font-mono">chrome.storage.sync</span> and available across all devices.
|
||||
<p class="text-[11px] text-slate-500 leading-tight">
|
||||
Secrets are saved to <span class="text-sky-700 font-mono font-medium">chrome.storage.sync</span> and available across all devices.
|
||||
</p>
|
||||
|
||||
<!-- Add Secret Form -->
|
||||
@@ -302,16 +302,16 @@ const renderSecrets = () => {
|
||||
<input
|
||||
id="new-secret-key"
|
||||
type="text"
|
||||
placeholder="KEY (e.g. API_KEY)"
|
||||
class="w-1/3 bg-navy-950 border border-navy-700 text-slate-100 text-xs px-2 py-1 rounded font-mono uppercase placeholder-slate-500 focus:outline-none focus:border-sky-500"
|
||||
placeholder="KEY (e.g. GH_PAT)"
|
||||
class="w-1/3 bg-slate-50 border border-slate-300 text-slate-900 text-xs px-2 py-1 rounded font-mono uppercase placeholder-slate-400 focus:outline-none focus:border-slate-500"
|
||||
/>
|
||||
<input
|
||||
id="new-secret-val"
|
||||
type="text"
|
||||
placeholder="Value..."
|
||||
class="flex-1 bg-navy-950 border border-navy-700 text-slate-100 text-xs px-2 py-1 rounded font-mono placeholder-slate-500 focus:outline-none focus:border-sky-500"
|
||||
class="flex-1 bg-slate-50 border border-slate-300 text-slate-900 text-xs px-2 py-1 rounded font-mono placeholder-slate-400 focus:outline-none focus:border-slate-500"
|
||||
/>
|
||||
<button id="btn-add-secret" class="bg-white hover:bg-slate-100 text-navy-950 font-semibold text-xs px-3 py-1 rounded border border-slate-300 shadow-sm shrink-0 cursor-pointer">
|
||||
<button id="btn-add-secret" class="bg-slate-900 hover:bg-slate-800 text-white font-semibold text-xs px-3 py-1 rounded shadow-sm shrink-0 cursor-pointer transition-colors">
|
||||
+ Add
|
||||
</button>
|
||||
</div>
|
||||
@@ -322,44 +322,44 @@ const renderSecrets = () => {
|
||||
const isRevealed = state.revealedSecrets.has(k);
|
||||
const val = state.secrets[k];
|
||||
return `
|
||||
<div class="bg-navy-900 border border-navy-800 rounded p-2 flex items-center justify-between gap-2">
|
||||
<div class="bg-white border border-slate-200 shadow-xs rounded p-2 flex items-center justify-between gap-2">
|
||||
<div class="flex items-center gap-2 min-w-0 flex-1">
|
||||
<span class="font-mono font-semibold text-xs text-sky-300 shrink-0">${k}</span>
|
||||
<span class="text-slate-500 text-xs shrink-0">=</span>
|
||||
<span class="font-mono text-xs text-slate-300 truncate select-all">
|
||||
<span class="font-mono font-semibold text-xs text-sky-700 shrink-0">${k}</span>
|
||||
<span class="text-slate-400 text-xs shrink-0">=</span>
|
||||
<span class="font-mono text-xs text-slate-700 truncate select-all">
|
||||
${isRevealed ? val : '••••••••••••'}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 shrink-0">
|
||||
<button data-action="toggle-secret" data-key="${k}" class="p-1 hover:bg-navy-800 rounded text-slate-400 hover:text-slate-200" title="${isRevealed ? 'Hide' : 'Reveal'}">
|
||||
<button data-action="toggle-secret" data-key="${k}" class="p-1 hover:bg-slate-100 rounded text-slate-500 hover:text-slate-800 cursor-pointer" title="${isRevealed ? 'Hide' : 'Reveal'}">
|
||||
${icon(isRevealed ? 'EyeOff' : 'Eye', 'w-3.5 h-3.5')}
|
||||
</button>
|
||||
<button data-action="copy-secret" data-key="${k}" class="p-1 hover:bg-navy-800 rounded text-slate-400 hover:text-sky-400" title="Copy Value">
|
||||
<button data-action="copy-secret" data-key="${k}" class="p-1 hover:bg-slate-100 rounded text-slate-500 hover:text-sky-600 cursor-pointer" title="Copy Value">
|
||||
${icon('Copy', 'w-3.5 h-3.5')}
|
||||
</button>
|
||||
<button data-action="delete-secret" data-key="${k}" class="p-1 hover:bg-navy-800 rounded text-slate-400 hover:text-red-400" title="Delete Secret">
|
||||
<button data-action="delete-secret" data-key="${k}" class="p-1 hover:bg-slate-100 rounded text-slate-500 hover:text-red-600 cursor-pointer" title="Delete Secret">
|
||||
${icon('Trash2', 'w-3.5 h-3.5')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('') : `
|
||||
<div class="h-full flex flex-col items-center justify-center text-center p-6 text-slate-400">
|
||||
${icon('Key', 'w-8 h-8 text-navy-700 mb-2')}
|
||||
<p class="text-xs font-medium text-slate-300">No secrets configured</p>
|
||||
<p class="text-[11px] text-slate-500 mt-1 max-w-[240px]">Add API tokens or credentials here to securely access them in your user scripts.</p>
|
||||
<div class="h-full flex flex-col items-center justify-center text-center p-6 text-slate-500">
|
||||
${icon('Key', 'w-8 h-8 text-slate-300 mb-2')}
|
||||
<p class="text-xs font-medium text-slate-700">No secrets configured</p>
|
||||
<p class="text-[11px] text-slate-500 mt-1 max-w-[240px]">Add API tokens or credentials (like GH_PAT) here to securely access them in your user scripts.</p>
|
||||
</div>
|
||||
`}
|
||||
|
||||
<div class="mt-4 p-2.5 bg-navy-900/40 border border-navy-800/80 rounded">
|
||||
<p class="text-[11px] text-slate-400 font-semibold mb-1">Code usage in scripts:</p>
|
||||
<pre class="bg-navy-950 p-2 rounded text-[10px] font-mono text-emerald-400 overflow-x-auto">const token = OpenScript.env.MY_API_KEY;
|
||||
// or: const token = env.MY_API_KEY;
|
||||
// or: const token = GM_getValue('MY_API_KEY');</pre>
|
||||
<div class="mt-4 p-2.5 bg-white border border-slate-200 rounded shadow-xs">
|
||||
<p class="text-[11px] text-slate-600 font-semibold mb-1">Code usage in scripts:</p>
|
||||
<pre class="bg-slate-100 p-2 rounded text-[10px] font-mono text-emerald-800 border border-slate-200/80 overflow-x-auto">const token = OpenScript.env.GH_PAT;
|
||||
// or: const token = env.GH_PAT;
|
||||
// or: const token = GM_getValue('GH_PAT');</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="bg-navy-900 border-t border-navy-800/80 px-3 py-1.5 flex items-center justify-between text-[10px] text-slate-400 shrink-0 font-mono">
|
||||
<footer class="bg-white border-t border-slate-200 px-3 py-1.5 flex items-center justify-between text-[10px] text-slate-500 shrink-0 font-mono">
|
||||
<span>${keys.length} secrets stored</span>
|
||||
<span>Storage: chrome.storage.sync</span>
|
||||
</footer>
|
||||
|
||||
@@ -10,6 +10,8 @@ body {
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
user-select: none;
|
||||
background-color: #f8fafc;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@@ -17,12 +19,12 @@ body {
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #072138;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #1e3a5f;
|
||||
background: #cbd5e1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #2563eb;
|
||||
background: #94a3b8;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user