Skip to content

gui #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
BowLuckie wants to merge 6 commits into
base: master
Choose a base branch
from
Open

gui #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
36e4659
basic increment popup
BowLuckie Jun 15, 2026
d4ab3a3
added more context menu options to gui
BowLuckie Jun 15, 2026
aafd567
made pretty
BowLuckie Jun 15, 2026
3a9b6b5
added reload button to GUI
BowLuckie Jun 15, 2026
b68f8f9
allowed GUI to be disable
BowLuckie Jun 16, 2026
34f56f6
improved gui light mode contrast
BowLuckie Jun 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 99 additions & 68 deletions background.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,92 +1,123 @@
// generate the context menus brought up by clicking the browser action
chrome.storage.sync.get("numHairImages", function(items) {
var hairCount = items.hasOwnProperty("numHairImages") ? items.numHairImages : 1;

chrome.contextMenus.removeAll();
chrome.contextMenus.create({
title: hairCountText(hairCount),
id: "hair_count",
contexts: ["action"],
enabled: false
});
chrome.contextMenus.create({
title: "More hair!",
id: "more_hair",
contexts: ["action"]
});
chrome.contextMenus.create({
title: "Less hair!",
id: "less_hair",
contexts: ["action"]
});
chrome.contextMenus.create({
title: "Reset hair!",
id: "reset_hair",
contexts: ["action"]
});
chrome.contextMenus.create({
title: "Randomize hair!",
id: "randomize_hair",
contexts: ["action"]
});
chrome.contextMenus.create({
title: "(reload after updating)",
id: "reload_prompt",
contexts: ["action"],
enabled: false
chrome.storage.sync.get("numHairImages", function (items) {
var hairCount = items.hasOwnProperty("numHairImages")
? items.numHairImages
: 1;

chrome.storage.local.get("guiEnabled", (data) => {
const enabled = data.guiEnabled ?? false;
updatePopup(enabled);

chrome.contextMenus.removeAll();
chrome.contextMenus.create({
title: hairCountText(hairCount),
id: "hair_count",
contexts: ["action"],
enabled: false,
});
chrome.contextMenus.create({
title: "More hair!",
id: "more_hair",
contexts: ["action"],
});
chrome.contextMenus.create({
title: "Less hair!",
id: "less_hair",
contexts: ["action"],
});
chrome.contextMenus.create({
title: "Reset hair!",
id: "reset_hair",
contexts: ["action"],
});
chrome.contextMenus.create({
title: "Randomize hair!",
id: "randomize_hair",
contexts: ["action"],
});
chrome.contextMenus.create({
title: "Allow GUI menu",
id: "toggleGui",
type: "checkbox",
checked: enabled,
contexts: ["action"],
});
chrome.contextMenus.create({
title: "(reload after updating)",
id: "reload_prompt",
contexts: ["action"],
enabled: false,
});
});
});

// handle context menu clicks
chrome.contextMenus.onClicked.addListener(function (info) {
chrome.contextMenus.onClicked.addListener((info) => {
if (info.menuItemId == "more_hair") incrementNumImages();
else if (info.menuItemId == "less_hair") decrementNumImages();
else if (info.menuItemId == "randomize_hair") randomizeHair();
else if (info.menuItemId == "reset_hair") resetNumImages();
else if (info.menuItemId == "toggleGui") toggleGui(info.checked);
});

// displays count
function hairCountText(num) {
return "Hair count: " + num;
}

// general function for updating the hair count
function updateNumImages(updateFunction) {
chrome.storage.sync.get("numHairImages", function(items) {
var numHairImages;
if (items.hasOwnProperty("numHairImages")) {
numHairImages = updateFunction(items.numHairImages);
}
else {
numHairImages = updateFunction(1);
}

chrome.storage.sync.set( {"numHairImages": numHairImages } );

chrome.contextMenus.update("hair_count", { title: hairCountText(numHairImages) });
chrome.storage.sync.get("numHairImages", function (items) {
var numHairImages = items.hasOwnProperty("numHairImages")
? updateFunction(items.numHairImages)
: updateFunction(1);
chrome.storage.sync.set({ numHairImages: numHairImages });
chrome.contextMenus.update("hair_count", {
title: hairCountText(numHairImages),
});
});
}

// increment count
function incrementNumImages() {
updateNumImages(function(num) {
return num + 1;
});
updateNumImages((num) => Math.min(2048, num + 1));
}

// decrement count
function decrementNumImages() {
updateNumImages(function(num) {
return Math.max(0, num-1);
});
updateNumImages((num) => Math.max(0, num - 1));
}

// reset count to 1
function resetNumImages() {
updateNumImages( function() { return 1; } );
updateNumImages(() => 1);
}

// randomize positions
function randomizeHair() {
chrome.storage.sync.set( { "hairImages": [] } );
}
chrome.storage.sync.set({ hairImages: [] });
}

function updatePopup(enabled) {
chrome.action.setPopup({ popup: enabled ? "popup.html" : "" });
}

function toggleGui(checked) {
chrome.storage.local.set({ guiEnabled: checked });
updatePopup(checked);
}

chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
let action = message.action;
if (action == "getNumImages") {
chrome.storage.sync.get("numHairImages", (items) => {
sendResponse({ numImages: items.numHairImages ?? 1 });
});
return true;
}
if (action == "popupCallIncrement") {
incrementNumImages();
sendResponse({});
} else if (action == "popupCallDecrement") {
decrementNumImages();
sendResponse({});
} else if (action == "popupCallReset") {
resetNumImages();
sendResponse({});
} else if (action == "popupCallRandomize") {
randomizeHair();
sendResponse({});
} else if (action == "popupCallSetExact") {
updateNumImages(() => message.value);
sendResponse({});
}
});
61 changes: 31 additions & 30 deletions content_script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,58 @@
var w = 200;
var h = 200;
var imageUrls = [
'assets/h1.png',
'assets/h2.png',
'assets/h3.png',
'assets/h4.png',
'assets/h5.png',
'assets/h6.png',
'assets/h7.png',
'assets/h8.png',
'assets/h9.png',
'assets/h10.png',
'assets/h11.png',
'assets/h12.png',
'assets/h13.png',
'assets/h14.png',
'assets/h15.png'
"assets/h1.png",
"assets/h2.png",
"assets/h3.png",
"assets/h4.png",
"assets/h5.png",
"assets/h6.png",
"assets/h7.png",
"assets/h8.png",
"assets/h9.png",
"assets/h10.png",
"assets/h11.png",
"assets/h12.png",
"assets/h13.png",
"assets/h14.png",
"assets/h15.png",
];

render();

function render() {
// get the number of images in the global store
chrome.storage.sync.get("numHairImages", function(items) {
chrome.storage.sync.get("numHairImages", function (items) {
var numHairImages = 1;
if (items.hasOwnProperty("numHairImages")) {
numHairImages = items.numHairImages;
}
// if no image number in the store, store the default number
else {
chrome.storage.sync.set( {"numHairImages": numHairImages } );
chrome.storage.sync.set({ numHairImages: numHairImages });
}

insertImages(numHairImages);
});
}

function insertImages(numHairImages) {
chrome.storage.sync.get("hairImages", function(items) {
chrome.storage.sync.get("hairImages", function (items) {
var hairImages = [];
var needUpdate = false;

if (items.hasOwnProperty("hairImages")) {
hairImages = items.hairImages;
}

for (var i=0; i<numHairImages; i++) {
for (var i = 0; i < numHairImages; i++) {
var imageObject = hairImages[i];
if (imageObject === undefined) {
needUpdate = true;
imageObject = constructImageObject();
hairImages[i] = imageObject;
}

var image = document.createElement("div");
image.className = "screenHairImage";

Expand All @@ -66,8 +66,8 @@ function insertImages(numHairImages) {

document.body.appendChild(image);
}
if (needUpdate) chrome.storage.sync.set( { "hairImages": hairImages } );

if (needUpdate) chrome.storage.sync.set({ hairImages: hairImages });
});
}

Expand All @@ -83,22 +83,23 @@ function randomImage() {

function constructImageObject() {
var offset = randomOffset();

return {
leftOffset: offset[0],
topOffset: offset[1],
url: randomImage()
url: randomImage(),
};
}

// debugging function
function resetStoreVariables() {
chrome.storage.sync.remove(["numHairImages", "hairImages"], function() {
chrome.storage.sync.get("numHairImages", function(items) {
chrome.storage.sync.remove(["numHairImages", "hairImages"], function () {
chrome.storage.sync.get("numHairImages", function (items) {
console.log(items);
});
chrome.storage.sync.get("hairImages", function(items) {
chrome.storage.sync.get("hairImages", function (items) {
console.log(items);
});
});
}
}

9 changes: 5 additions & 4 deletions manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,18 @@
"manifest_version": 3,
"name": "Hair on Screen",
"description": "Displays a helpful hair on the screen",
"version": "0.0.0.2",
"author": "Anton Bovin | Ported to MV3 by ZenithKnight",
"version": "0.0.1",
"author": "Anton Bovin | Ported to MV3 by ZenithKnight | GUI made by BowLuckie",
"action": {
"default_icon": "assets/icons/icon128.png"
"default_icon": "assets/icons/icon128.png",
"default_popup": "popup.html"
},
"icons": {
"16": "assets/icons/icon16.png",
"48": "assets/icons/icon48.png",
"128": "assets/icons/icon128.png"
},
"permissions": ["contextMenus", "storage"],
"permissions": ["contextMenus", "storage", "tabs"],
"background": {
"service_worker": "background.js"
},
Expand Down
Loading