Merge pull request #2 from tomaschyly/version/2.3.0

Version/2.3.0

Author: tomaschyly

AGENTS.md

@@ -4,6 +4,11 @@ ModWe is a Chromium browser extension that modifies websites using user-defined
 
 These instructions apply to the whole repository unless a deeper `AGENTS.md` overrides them.
 
+## Branch safety rule
+
+- For implementation work (any non-planning/non-question-only task), if current branch is `main` or `master`, ask the user first whether to switch to a new `version/*` or `feature/*` branch before making edits.
+- Do not start code changes on `main`/`master` until the user confirms how to proceed.
+
 ## Release versioning rule
 
 - Files that must be updated for each extension version bump:

README.md

@@ -1,36 +1,48 @@
 # ModWe
 
-Originally for Firefox (v1.x.x), now for browsers based on Chromium (v2.x.x) extension to modify websites using custom CSS and JS snippets.
+ModWe is a Chromium extension that modifies websites using your own CSS and JS snippets.
 
-Usefull for Developers, you can add Pages for which you can write CSS and JS snippets wich will be injected into them. All of them are custom writen by you on the Options page.
+## Version Support
 
-Both CSS and JS get inserted only after Page has been fully loaded. They are also inserted only on Pages that match RegExp which you write for them.
+Only **v2** is supported and maintained.
 
-This extension does not sync with your profile, instead you can export and import your options from the Options page.
+The old **v1** Firefox extension is no longer supported.
 
-## Installation
+## Browser Compatibility
+
+ModWe v2 targets Chromium-compatible browsers with Manifest V3 support.
+
+It relies on `chrome.userScripts` for user JS execution.
 
-### Firefox (v1.x.x)
+Firefox support for v2 is **not provided**.
 
-1. Go [here](https://addons.mozilla.org/en-US/firefox/addon/modwe/) and click Add to Firefox.
+## Features
 
-### Chrome (v2.x.x)
+- Configure page rules using names, URLs, and RegExp matching.
+- Inject custom CSS and JS into matched pages.
+- Toggle ModWe quickly from the popup.
+- Import and export configuration as JSON.
+- Keep all data stored locally in extension storage.
+
+## Installation
 
-1. Go [here](https://github.com/tomaschyly/ModWe/releases) and download latest archive.
-2. Unzip somewhere.
-3. In your browser go to extensions and with developer mode enabled load unpacked extension.
+1. Download the latest release archive from: <https://github.com/tomaschyly/ModWe/releases>
+2. Unzip it to a local folder.
+3. Open your browser extension page.
+4. Enable Developer Mode.
+5. Load the unpacked extension folder.
 
-## Important Notes
+## Important Requirement
 
-There are no snippets provided with the extensions. You have to write all CSS and JS.
+For JS snippets to run, the browser option to allow user scripts for this extension must be enabled.
 
-All the data is stored locally, it is not transmitted online.
+If user scripts are disabled, CSS may still apply but JS snippets will not execute.
 
-## How to Use
+## Usage
 
-1. Use the toolbar button to open popup.
-2. Use the right button to open options.
-3. Add Page, write any Name you want as identifier. Url is used from popup for quick navigation. RegExp needs to be valid RegExp (e.g.: /google\.com/), it is used by script to determine correct Page for CSS/JS injection.
-4. Use the settings button to open Page settings, here you can write your CSS/JS.
-5. In popup make sure to toggle to Enabled.
-6. Now when you visit any Page which is valid by your RegExp, CSS/JS will be injected.
+1. Open the popup from the toolbar.
+2. Open Options from the popup.
+3. Add a page entry and provide a valid RegExp (for example: `/google\.com/`).
+4. Open page settings and write CSS/JS snippets.
+5. Enable ModWe in the popup.
+6. Visit a matching page to apply your snippets.

assets/icons/download.svg

@@ -1,7 +1,7 @@
 {
 	"manifest_version": 3,
 	"name": "ModWe",
-	"version": "2.2.0",
+	"version": "2.3.0",
 	"description": "Modify websites using custom CSS and JS snippets.",
 	"icons": {
 		"48": "icons/ic_dashboard_48dp_1x.png",

assets/icons/search.svg

@@ -35,6 +35,34 @@ h1 { margin: 0; color: var(--mw-secondary); font-size: 22px; line-height: 1.2; }
 h2 { margin: 0 0 16px 0; color: var(--mw-text-primary); font-size: 20px; line-height: 1.2; }
 p { margin: 0 0 16px 0; }
 
+.mw-icon {
+	display: inline-block;
+	width: 22px;
+	height: 22px;
+	background-color: currentColor;
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+	-webkit-mask-position: center;
+	mask-position: center;
+	-webkit-mask-size: contain;
+	mask-size: contain;
+}
+
+.mw-icon-upload {
+	-webkit-mask-image: url("../assets/icons/upload.svg");
+	mask-image: url("../assets/icons/upload.svg");
+}
+
+.mw-icon-download {
+	-webkit-mask-image: url("../assets/icons/download.svg");
+	mask-image: url("../assets/icons/download.svg");
+}
+
+.mw-icon-x {
+	-webkit-mask-image: url("../assets/icons/x.svg");
+	mask-image: url("../assets/icons/x.svg");
+}
+
 button {
 	padding: 4px 8px;
 	border: 1px solid #ffffff;
@@ -109,7 +137,7 @@ form textarea {
 	width: 100%;
 	max-width: none;
 	height: auto;
-	padding: 0 0 16px 0;
+	padding: 56px 0 16px 0;
 	margin: 0;
 }
 
@@ -129,13 +157,18 @@ form textarea {
 .titlebar {
 	display: flex;
 	align-items: center;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 100;
 	width: 100%;
 	max-width: none;
 	padding: 8px 16px;
 	border: 0;
 	border-bottom: 1px solid var(--mw-secondary-dark);
 	border-radius: 0;
-	margin: 0 0 16px 0;
+	margin: 0;
 	background: var(--mw-primary-dark);
 	box-shadow: none;
 }
@@ -145,7 +178,7 @@ form textarea {
 .controls button { display: inline-block; padding: 0; border: 0; margin: 0 0 0 auto; color: var(--mw-text-primary); background: transparent; }
 .controls button:hover,
 .controls button:focus { color: var(--mw-secondary); background: transparent; }
-.controls svg { display: inline-block; width: 22px; height: 22px; }
+.controls .mw-icon { width: 22px; height: 22px; }
 
 .import-area { display: none; }
 
@@ -203,6 +236,13 @@ form textarea {
 	background: var(--mw-success);
 }
 
+#toggle-hint {
+	margin: -8px 0 16px 0;
+	color: var(--mw-text-muted);
+	font-size: 14px;
+	line-height: 1.35;
+}
+
 #page-settings-panel { display: none; }
 #page-settings { position: relative; }
 #page-settings-panel .controls { position: absolute; top: 0; right: 0; }
@@ -216,7 +256,7 @@ form textarea {
 	margin-bottom: 16px;
 }
 
-#modal { display: none; justify-content: center; position: fixed; left: 0; top: 0; right: 0; transition: top 0.4s linear; }
+#modal { display: none; justify-content: center; position: fixed; left: 0; top: 0; right: 0; z-index: 200; pointer-events: none; transition: top 0.4s linear; }
 #modal.visible { display: flex; }
 
 #modal .modal-content {
@@ -229,6 +269,8 @@ form textarea {
 	margin-top: 8px;
 	background: var(--mw-primary-light);
 	box-shadow: 0 2px 10px var(--mw-shadow);
+	pointer-events: auto;
+	cursor: pointer;
 }
 
 #modal .modal-content p { margin-bottom: 8px; color: var(--mw-text-primary); }

assets/icons/settings.svg

@@ -16,16 +16,19 @@ <h1>ModWe</h1>
 
 				<div class="controls">
 					<button type="button" id="import" title="Import options">
-						<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="upload" class="svg-inline--fa fa-upload fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"/></svg>
+						<span class="mw-icon mw-icon-upload" aria-hidden="true"></span>
 					</button>
 					<button type="button" id="export" title="Export options">
-						<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="download" class="svg-inline--fa fa-download fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"/></svg>
+						<span class="mw-icon mw-icon-download" aria-hidden="true"></span>
 					</button>
 				</div>
 			</div>
 
 			<div class="panel">
 				<button type="button" id="toggle-enabled">Disabled</button>
+				<p id="toggle-hint">
+					User scripts must be enabled for this extension in browser extension settings, otherwise ModWe will not work.
+				</p>
 			</div>
 
 			<div class="panel import-area">
@@ -70,7 +73,7 @@ <h2>Page Settings</h2>
 
 					<div class="controls">
 						<button type="button" id="page-settings-close-nosave" title="Close page settings without saving">
-							<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg>
+							<span class="mw-icon mw-icon-x" aria-hidden="true"></span>
 						</button>
 					</div>