Skip to content

Commit e67c5b7

Browse files
haehnpthaehnpt
committed
Add version 1.1 - blur strength setting
1 parent 6273d98 commit e67c5b7

File tree

6 files changed

+125
-6
lines changed

6 files changed

+125
-6
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
build

‎README.md

+10
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,22 @@ A Firefox Extension to blur / unblur any element on a website via CTRL + Right C
33

44
https://addons.mozilla.org/en-US/firefox/addon/blur_anything
55

6+
|Version|Release|Details|
7+
|-------|-------|-------|
8+
|1.1|March 2024|Added settings for blur strength|
9+
|1.0|September 2019|Initial release|
10+
611
## Why does this exist?
712
It is sometimes useful to hide business information or personal details when presenting something e.g. in a customer review.
813

914
## Description
1015
The extension "blur anything" adds one simple command: CTRL + Right Click on any element on a website and it will be blurred to ensure that e.g. business details or personal information are hidden for e.g. a customer review. CTRL + Right Click again and the element will be readable / recognisable. That's it!
1116

17+
## Settings
18+
19+
You can set the strength of blur in the settings of the extension. You may choose in a range from 2px (weak) to 32px (strong) blur
20+
kernel radius.
21+
1222
## Example
1323
Selected content on this website has been blurred:
1424
![example](example.png)

‎blur.js

+18-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,26 @@
1+
function blur(strength) {
2+
document.querySelector("#blur").value = result.blur || 8;
3+
}
4+
5+
function onError(error) {
6+
console.log(`Error: ${error}`);
7+
}
8+
19
document.addEventListener('contextmenu', (e) => {
2-
if (e.ctrlKey) {
10+
if (e.ctrlKey) {
311
e.preventDefault();
4-
if (e.target.style.filter === 'blur(8px)') {
12+
13+
if (e.target.style.filter.includes('blur')) {
514
e.target.style.filter = '';
615
}
716
else {
8-
e.target.style.filter = 'blur(8px)';
17+
let getting = browser.storage.sync.get("blur");
18+
getting.then((result) => {
19+
let radius = result.blur;
20+
e.target.style.filter = `blur(${radius}px)`;
21+
}, (error) => {
22+
console.log(`Error: ${error}`);
23+
});
924
}
1025
}
1126
}, false);

‎manifest.json

+15-3
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
"manifest_version": 2,
44
"name": "blur",
5-
"version": "1.0",
5+
"version": "1.1",
66
"description": "Blur / unblur anything on a website via CTRL + Right Click",
77
"developer": {
88
"name": "Patrick Hähn",
9-
"url": "https://haehn.me"
9+
"url": "https://haehn.eu"
1010
},
1111

1212
"icons": {
@@ -19,5 +19,17 @@
1919
"matches": ["<all_urls>"],
2020
"js": ["blur.js"]
2121
}
22-
]
22+
],
23+
24+
"options_ui": {
25+
"page": "options.html"
26+
},
27+
28+
"permissions": ["storage"],
29+
30+
"browser_specific_settings": {
31+
"gecko": {
32+
"id": "{5f99ffac-7ddf-427e-8d4c-50c1218da421}"
33+
}
34+
}
2335
}

‎options.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<style>
7+
body {
8+
font: arial, sans-serif;
9+
}
10+
11+
.row {
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
min-width: 100%;
16+
padding: 5px;
17+
}
18+
19+
.blurrange {
20+
width: 80%;
21+
}
22+
23+
.blursubmit {
24+
padding-left: 40px;
25+
padding-right: 40px;
26+
padding-top: 5px;
27+
padding-bottom: 5px;
28+
}
29+
</style>
30+
</head>
31+
32+
<body>
33+
<form>
34+
<div>
35+
<div class="row">
36+
<h1>Configure the strength of blur</h1>
37+
</div>
38+
<div class="row">
39+
<span style="padding-right: 5px;">Weak</span>
40+
<input type="range" class="blurrange" id="blurrange" name="blurrange" min="2" max="32" step="2"/>
41+
<span style="padding-left: 5px;">Strong</span>
42+
</div>
43+
<div class="row">
44+
<p>Radius: <span id="strength"></span> px</p>
45+
</div>
46+
<div class="row">
47+
<button type="submit" class="blursubmit">Save</button>
48+
</div>
49+
</div>
50+
</form>
51+
52+
<script src="options.js"></script>
53+
</body>
54+
55+
</html>

‎options.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
function saveOptions(e) {
2+
e.preventDefault();
3+
browser.storage.sync.set({
4+
blur: document.querySelector("#blurrange").value
5+
});
6+
}
7+
8+
function restoreOptions() {
9+
function setCurrentChoice(result) {
10+
document.querySelector("#blurrange").value = result.blur || 8;
11+
document.querySelector("#strength").textContent = result.blur || 8;
12+
}
13+
14+
function onError(error) {
15+
console.log(`Error: ${error}`);
16+
}
17+
18+
let getting = browser.storage.sync.get("blur");
19+
getting.then(setCurrentChoice, onError);
20+
}
21+
22+
document.addEventListener("DOMContentLoaded", restoreOptions);
23+
document.querySelector("form").addEventListener("submit", saveOptions);
24+
document.querySelector("#blurrange").addEventListener("input", (event) => {
25+
document.querySelector("#strength").textContent = event.target.value;
26+
});

0 commit comments

Comments
 (0)