Add cross-browser popup status handling
This commit is contained in:
parent
9c65a61ebb
commit
7e17470356
38 changed files with 1242 additions and 199 deletions
3
public/bulma.css
vendored
Normal file
3
public/bulma.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
public/logo.png
Normal file
BIN
public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
|
|
@ -3,10 +3,19 @@
|
|||
"name": "VibeGuard",
|
||||
"version": "0.1.0",
|
||||
"description": "Hide toxic social-media posts locally.",
|
||||
"icons": {
|
||||
"16": "icons/logo16.png",
|
||||
"32": "icons/logo32.png",
|
||||
"48": "icons/logo48.png",
|
||||
"64": "icons/logo64.png",
|
||||
"96": "icons/logo96.png",
|
||||
"128": "icons/logo128.png"
|
||||
},
|
||||
"permissions": ["storage", "tabs", "offscreen"],
|
||||
"host_permissions": ["https://*.reddit.com/*", "https://*.x.com/*", "https://*.twitter.com/*", "https://*.facebook.com/*"],
|
||||
"host_permissions": ["<all_urls>"],
|
||||
"background": { "service_worker": "background.js", "type": "module" },
|
||||
"content_scripts": [{ "matches": ["https://*.reddit.com/*", "https://*.x.com/*", "https://*.twitter.com/*", "https://*.facebook.com/*"], "js": ["content.js"], "run_at": "document_idle" }],
|
||||
"content_scripts": [{ "matches": ["<all_urls>"], "js": ["content.js"], "run_at": "document_idle" }],
|
||||
"action": { "default_icon": "icons/logo32.png", "default_popup": "popup.html" },
|
||||
"options_page": "options.html",
|
||||
"web_accessible_resources": [{ "resources": ["inference.js", "models/*"], "matches": ["<all_urls>"] }]
|
||||
"web_accessible_resources": [{ "resources": ["inference.js", "models/toxicity/*", "models/toxicity/onnx/*"], "matches": ["<all_urls>"] }]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,18 @@
|
|||
"name": "VibeGuard",
|
||||
"version": "0.1.0",
|
||||
"description": "Hide toxic social-media posts locally.",
|
||||
"permissions": ["storage", "tabs", "https://*.reddit.com/*", "https://*.x.com/*", "https://*.twitter.com/*", "https://*.facebook.com/*"],
|
||||
"icons": {
|
||||
"16": "icons/logo16.png",
|
||||
"32": "icons/logo32.png",
|
||||
"48": "icons/logo48.png",
|
||||
"64": "icons/logo64.png",
|
||||
"96": "icons/logo96.png",
|
||||
"128": "icons/logo128.png"
|
||||
},
|
||||
"browser_action": { "default_icon": "icons/logo32.png", "default_popup": "popup.html" },
|
||||
"permissions": ["storage", "tabs", "<all_urls>"],
|
||||
"background": { "scripts": ["background.js"], "persistent": true },
|
||||
"content_scripts": [{ "matches": ["https://*.reddit.com/*", "https://*.x.com/*", "https://*.twitter.com/*", "https://*.facebook.com/*"], "js": ["content.js"], "run_at": "document_idle" }],
|
||||
"content_scripts": [{ "matches": ["<all_urls>"], "js": ["content.js"], "run_at": "document_idle" }],
|
||||
"options_ui": { "page": "options.html", "open_in_tab": true },
|
||||
"web_accessible_resources": ["inference.js", "models/*"]
|
||||
"web_accessible_resources": ["inference.js", "models/toxicity/*", "models/toxicity/onnx/*"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,70 @@
|
|||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>VibeGuard settings</title></head><body><main><h1>VibeGuard settings</h1><form id="settings">
|
||||
<label for="threshold">Toxicity threshold: <output id="threshold-value">80%</output></label><input id="threshold" type="range" min="0" max="1" step=".01">
|
||||
<label for="filter-mode">Filtering mode</label><select id="filter-mode"><option value="collapse">Collapse with Show button</option><option value="hide">Hide completely</option></select>
|
||||
<label><input id="show-score" type="checkbox"> Show toxicity score</label>
|
||||
<fieldset><legend>Supported sites</legend><label><input id="site-reddit" type="checkbox"> Reddit</label><label><input id="site-twitter" type="checkbox"> X/Twitter</label><label><input id="site-facebook" type="checkbox"> Facebook</label></fieldset>
|
||||
<button type="submit">Save settings</button> <span id="status" role="status"></span></form></main><script type="module" src="/options.js"></script></body></html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>VibeGuard settings</title>
|
||||
<link rel="stylesheet" href="/bulma.css">
|
||||
</head>
|
||||
<body>
|
||||
<section class="section">
|
||||
<main class="container vibeguard-options">
|
||||
<div class="box">
|
||||
<figure class="has-text-centered mb-4">
|
||||
<img src="/icons/logo64.png" alt="VibeGuard" class="vibeguard-logo">
|
||||
</figure>
|
||||
<h1 class="title">VibeGuard settings</h1>
|
||||
<p class="subtitle">Configure local toxicity filtering for supported sites.</p>
|
||||
<form id="settings">
|
||||
<div class="field">
|
||||
<label class="label" for="threshold">Toxicity threshold: <output id="threshold-value">80%</output></label>
|
||||
<div class="control">
|
||||
<input class="slider is-fullwidth" id="threshold" type="range" min="0" max="1" step=".01">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label" for="filter-mode">Filtering mode</label>
|
||||
<div class="control">
|
||||
<div class="select is-fullwidth">
|
||||
<select id="filter-mode">
|
||||
<option value="collapse">Collapse with Show button</option>
|
||||
<option value="hide">Hide completely</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="checkbox"><input id="show-score" type="checkbox"> Show toxicity score</label>
|
||||
</div>
|
||||
|
||||
<fieldset class="field">
|
||||
<legend class="label">Site definitions</legend>
|
||||
<div class="content">
|
||||
<p>VibeGuard includes <code>mastodon</code> for the official Mastodon web interface. Add a custom definition with the same ID to override it, or add its ID to <code>disabledDefinitionIds</code> to disable it.</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="definitions">Custom definitions (JSON)</label>
|
||||
<div class="control">
|
||||
<textarea class="textarea vibeguard-json" id="definitions" rows="18" spellcheck="false"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button class="button" type="button" id="import-definitions">Import JSON</button>
|
||||
<button class="button" type="button" id="export-definitions">Export JSON</button>
|
||||
<input id="definition-file" type="file" accept="application/json" hidden>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="is-flex is-align-items-center is-flex-wrap-wrap mt-5">
|
||||
<button class="button is-primary" type="submit">Save settings</button>
|
||||
<span class="vibeguard-status ml-3" id="status" role="status"></span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
<script type="module" src="/options.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
26
public/popup.html
Normal file
26
public/popup.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>VibeGuard</title>
|
||||
<link rel="stylesheet" href="/bulma.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="section">
|
||||
<div class="container vibeguard-popup">
|
||||
<div class="has-text-centered mb-4">
|
||||
<img src="/icons/logo64.png" alt="VibeGuard" class="vibeguard-logo">
|
||||
<h1 class="title is-5 mt-2 mb-1">VibeGuard</h1>
|
||||
</div>
|
||||
<div id="status-panel" class="notification is-light" role="status" aria-live="polite">Checking this page…</div>
|
||||
<p id="definition" class="help mb-4"></p>
|
||||
<div class="buttons is-flex is-flex-direction-column">
|
||||
<button class="button is-primary is-fullwidth" id="pause" type="button" hidden></button>
|
||||
<button class="button is-fullwidth" id="settings" type="button">Open settings</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script type="module" src="/popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue