Skip to content

Commit c1385bb

Browse files
jacknightjacknight
committed
v0.1.0
0 parents  commit c1385bb

File tree

7 files changed

+219
-0
lines changed

7 files changed

+219
-0
lines changed

‎.vscode/launch.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"version": "0.1.0",
3+
"configurations": [
4+
{
5+
"name": "Launch im-at.work",
6+
"type": "firefox",
7+
"request": "attach"
8+
}
9+
]
10+
}

‎icons/removebg-firefox-48.png‎

240 KB
Loading

‎jsconfig.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{ "typeAcquisition": { "include": ["firefox-webext-browser"] } }

‎manifest.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"manifest_version": 2,
3+
"name": "Remove.bg",
4+
"version": "0.1.0",
5+
"description": "Right click and Save wth Background Removed",
6+
"icons": {
7+
"48": "icons/removebg-firefox-48.png"
8+
},
9+
10+
"permissions": ["contextMenus", "storage", "notifications"],
11+
12+
"background": {
13+
"scripts": ["removebg-firefox.js"]
14+
},
15+
16+
"options_ui": {
17+
"page": "options.html",
18+
"browser_style": true
19+
},
20+
21+
"browser_action": {
22+
"default_popup": "options.html"
23+
},
24+
25+
"browser_specific_settings": {
26+
"gecko": {
27+
"id": "remove-bg@im-at.work",
28+
"strict_min_version": "42.0"
29+
}
30+
}
31+
}

‎options.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Remove.bg - API Key</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<img
12+
src="icons/removebg-firefox-48.png"
13+
width="150"
14+
height="150"
15+
style="align-self: center"
16+
/>
17+
<form id="form">
18+
<label>API Key:</label>
19+
<input type="password" id="apikey" />
20+
<button type="submit">Save</button>
21+
</form>
22+
<a
23+
href="https://www.remove.bg/dashboard#api-key"
24+
id="findkey"
25+
target="_blank"
26+
style="align-self: center; font-size: smaller"
27+
>Find Your API Key</a
28+
>
29+
30+
<hr width="100%" />
31+
<div class="removebg-links">
32+
<a href="https://www.remove.bg/pricing" target="_blank">Pricing</a>
33+
<a href="https://www.remove.bg/help" target="_blank">Help</a>
34+
<a href="https://www.remove.bg/tos" target="_blank">Terms of Service</a>
35+
</div>
36+
</div>
37+
</body>
38+
<style>
39+
.container {
40+
display: flex;
41+
flex-direction: column;
42+
align-items: center;
43+
justify-items: center;
44+
gap: 1rem;
45+
width: 100%;
46+
height: 100%;
47+
margin: auto;
48+
padding: 0;
49+
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
50+
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
51+
}
52+
a {
53+
color: black;
54+
text-decoration: none;
55+
padding: 4px;
56+
border-bottom: 2px solid transparent;
57+
transition: all 0.5s;
58+
}
59+
a:hover {
60+
border-bottom: 2px solid black;
61+
transition: all 0.5s;
62+
}
63+
64+
#findkey {
65+
color: red;
66+
border-bottom: 1px solid transparent;
67+
}
68+
#findkey:hover {
69+
border-bottom: 1px solid red;
70+
}
71+
</style>
72+
<script src="options.js"></script>
73+
</html>

‎options.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const saveOptions = async (e) => {
2+
e.preventDefault();
3+
const apiKey = document.getElementById("apikey").value || "";
4+
browser.storage.local.set({
5+
removebgapikey: apiKey,
6+
});
7+
browser.runtime.reload();
8+
};
9+
10+
const restoreOptions = async () => {
11+
const apiKey = (await browser.storage.local.get("removebgapikey"))
12+
.removebgapikey;
13+
console.log(apiKey);
14+
document.getElementById("apikey").value = apiKey || "";
15+
};
16+
17+
document.addEventListener("DOMContentLoaded", restoreOptions);
18+
document.getElementById("form").addEventListener("submit", saveOptions);

‎removebg-firefox.js‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
const onClick = async (url, quality, apiKey) => {
2+
const formData = new FormData();
3+
formData.append("image_url", url);
4+
formData.append("size", quality);
5+
try {
6+
const resp = await fetch("https://api.remove.bg/v1.0/removebg", {
7+
method: "POST",
8+
body: formData,
9+
headers: {
10+
"X-Api-Key": apiKey,
11+
},
12+
});
13+
14+
if (resp.status === 200) {
15+
const blob = new Blob([await resp.blob()]);
16+
const blobUrl = window.URL.createObjectURL(blob);
17+
const link = document.createElement("a");
18+
link.href = blobUrl;
19+
link.setAttribute(
20+
"download",
21+
`removebg_${quality}_${url.split("/").pop()}`
22+
);
23+
document.body.appendChild(link);
24+
link.click();
25+
link.parentNode.removeChild(link);
26+
window.URL.revokeObjectURL(blobUrl);
27+
} else {
28+
const json = await resp.json();
29+
console.log(json);
30+
browser.notifications.create({
31+
title: "Failed to process image",
32+
message: json?.errors?.[0]?.title || "Unknown error",
33+
type: "basic",
34+
});
35+
}
36+
} catch (e) {
37+
console.error("Some error:", e);
38+
}
39+
};
40+
41+
const createMenuItems = (apiKey) => {
42+
browser.contextMenus.removeAll();
43+
44+
if (apiKey) {
45+
browser.contextMenus.create({
46+
id: "removebg-preview",
47+
title: "Preview Quality (max. 0.25 megapixels)",
48+
contexts: ["image"],
49+
});
50+
51+
browser.contextMenus.create({
52+
id: "removebg-hq",
53+
title: "High Quality (max. 25 megapixels)",
54+
contexts: ["image"],
55+
});
56+
57+
browser.contextMenus.onClicked.addListener(async (info) => {
58+
if (info.mediaType !== "image") return;
59+
60+
onClick(
61+
info.srcUrl,
62+
info.menuItemId === "removebg-hq" ? "auto" : "preview",
63+
apiKey
64+
);
65+
});
66+
} else {
67+
browser.contextMenus.create({
68+
id: "removebg-apikey",
69+
title: "Remove.bg - Add API Key",
70+
contexts: ["image"],
71+
});
72+
73+
browser.contextMenus.onClicked.addListener((info) => {
74+
if (info.mediaType !== "image") return;
75+
76+
if (info.menuItemId === "removebg-apikey") {
77+
browser.runtime.openOptionsPage();
78+
}
79+
});
80+
}
81+
};
82+
83+
browser.storage.local.get("removebgapikey").then((resp) => {
84+
const apiKey = resp.removebgapikey;
85+
createMenuItems(apiKey);
86+
});

0 commit comments

Comments
 (0)