Skip to content

Persist search settings using chrome.storage.sync #17

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
eashwarpaka wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Persist search settings using chrome.storage.sync #17

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
247 changes: 154 additions & 93 deletions js/popup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,73 +1,113 @@
import config from './config.js'
import config from './config.js';

chrome.runtime.connect({ name: "popup" })
chrome.runtime.connect({ name: "popup" });

// Progressbar object
var progressBar = document.querySelector(config.domElements.progressBar)
var progressBar = document.querySelector(config.domElements.progressBar);

setDefaultUI()
checkRunningState()
/* ================================
STORAGE HELPERS
================================ */

// Listen for messages from background script
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
function saveSettings() {
chrome.storage.sync.set({
searches: config.searches
});
}

function loadSavedSettings() {
chrome.storage.sync.get(['searches'], (data) => {
if (data.searches) {
Object.assign(config.searches, data.searches);
}

updateInputsFromConfig();
});
}

/* ================================
INIT
================================ */

loadSavedSettings();
setDefaultUI();
checkRunningState();

/* ================================
MESSAGE LISTENER
================================ */

chrome.runtime.onMessage.addListener((message) => {
if (message.type === 'progress') {
setProgress(message.progress);
} else if (message.type === 'phaseChange') {
console.log(`Phase changed to: ${message.phase}`);
} else if (message.type === 'complete') {
setProgress(0);
activateForms();
} else if (message.type === 'stopped') {
} else if (message.type === 'complete' || message.type === 'stopped') {
setProgress(0);
activateForms();
}
});

// Check if searches are already running when popup opens
/* ================================
CHECK RUNNING STATE
================================ */

async function checkRunningState() {
chrome.runtime.sendMessage({ type: 'getState' }, (response) => {
if (response && response.isRunning) {
deactivateForms();
const progress = parseInt((response.currentSearch / response.totalSearches) * 100);
const progress = parseInt(
(response.currentSearch / response.totalSearches) * 100
);
setProgress(progress);
}
});
}

$(config.domElements.totDesktopSearchesForm).on('change', function () {
config.searches.desktop = $(config.domElements.totDesktopSearchesForm).val()
})
/* ================================
INPUT HANDLERS (SAVE TO SYNC)
================================ */

$(config.domElements.totMobileSearchesForm).on('change', function () {
config.searches.mobile = $(config.domElements.totMobileSearchesForm).val()
})
$(config.domElements.totDesktopSearchesForm).on('input', function () {
config.searches.desktop = parseInt(this.value) || 0;
saveSettings();
});

$(config.domElements.waitingBetweenSearchesFormMin).on('change', function () {
config.searches.millisecondsMin = $(config.domElements.waitingBetweenSearchesFormMin).val()
})
$(config.domElements.totMobileSearchesForm).on('input', function () {
config.searches.mobile = parseInt(this.value) || 0;
saveSettings();
});

$(config.domElements.waitingBetweenSearchesFormMax).on('change', function () {
config.searches.millisecondsMax = $(config.domElements.waitingBetweenSearchesFormMax).val()
})
$(config.domElements.waitingBetweenSearchesFormMin).on('input', function () {
config.searches.millisecondsMin = parseInt(this.value) || 0;
saveSettings();
});

// Start search desktop
$(config.domElements.desktopButton).on("click", async () => {
$(config.domElements.waitingBetweenSearchesFormMax).on('input', function () {
config.searches.millisecondsMax = parseInt(this.value) || 0;
saveSettings();
});

/* ================================
BUTTON CLICK HANDLERS
================================ */

$(config.domElements.desktopButton).on("click", () => {
startSearches('desktop');
})
});

// Start search mobile
$(config.domElements.mobileButton).on('click', async () => {
$(config.domElements.mobileButton).on("click", () => {
startSearches('mobile');
})
});

// Start search desktop&mobile
$(config.domElements.desktopMobileButton).on('click', async () => {
$(config.domElements.desktopMobileButton).on("click", () => {
startSearches('desktopMobile');
})
});

/* ================================
START SEARCHES
================================ */

/**
* Start searches via background script
*/
async function startSearches(searchType) {
deactivateForms();

Expand All @@ -78,73 +118,94 @@ async function startSearches(searchType) {
millisecondsMax: parseInt(config.searches.millisecondsMax)
};

chrome.runtime.sendMessage({
type: 'startSearches',
searchType: searchType,
settings: settings
}, (response) => {
if (!response || !response.success) {
console.error('Failed to start searches:', response?.error);
activateForms();
chrome.runtime.sendMessage(
{
type: 'startSearches',
searchType,
settings
},
(response) => {
if (!response || !response.success) {
console.error('Failed to start searches:', response?.error);
activateForms();
}
}
});
);
}

/**
* Set links on bottom navbar and forms
*/
function setDefaultUI() {
// Set the app version number
$(config.domElements.appVersion).html(config.general.appVersion)

// Set numberOfSearches default values inside the input
$(config.domElements.totDesktopSearchesForm).val(config.searches.desktop)
$(config.domElements.totMobileSearchesForm).val(config.searches.mobile)
$(config.domElements.waitingBetweenSearchesFormMin).val(config.searches.millisecondsMin)
$(config.domElements.waitingBetweenSearchesFormMax).val(config.searches.millisecondsMax)
/* ================================
UI HELPERS
================================ */

function setDefaultUI() {
$(config.domElements.appVersion).html(config.general.appVersion);

updateInputsFromConfig();

$(config.domElements.authorWebsiteLink).attr(
'href',
config.general.authorWebsiteLinkThanks[0]
);
$(config.domElements.repositoryGithubLink).attr(
'href',
config.general.repositoryGithubLink
);
$(config.domElements.storeLink).attr(
'href',
config.general.storeLink
);
$(config.domElements.rewardsLink).attr(
'href',
config.general.rewardsLink
);
$(config.domElements.f1PromoLink).attr(
'href',
config.general.authorWebsiteLinkThanks[1]
);
}

$(config.domElements.authorWebsiteLink).attr('href', config.general.authorWebsiteLinkThanks[0])
$(config.domElements.repositoryGithubLink).attr('href', config.general.repositoryGithubLink)
$(config.domElements.storeLink).attr('href', config.general.storeLink)
$(config.domElements.rewardsLink).attr('href', config.general.rewardsLink)
$(config.domElements.f1PromoLink).attr('href', config.general.authorWebsiteLinkThanks[1])
function updateInputsFromConfig() {
$(config.domElements.totDesktopSearchesForm).val(config.searches.desktop);
$(config.domElements.totMobileSearchesForm).val(config.searches.mobile);
$(config.domElements.waitingBetweenSearchesFormMin).val(
config.searches.millisecondsMin
);
$(config.domElements.waitingBetweenSearchesFormMax).val(
config.searches.millisecondsMax
);
}

/**
* Deactivate Make search button
* and Number of Search form
*/
/* ================================
FORM STATE
================================ */

function deactivateForms() {
$(config.domElements.desktopButton).prop("disabled", true)
$(config.domElements.mobileButton).prop("disabled", true)
$(config.domElements.desktopMobileButton).prop("disabled", true)
$(config.domElements.totDesktopSearchesForm).prop("disabled", true)
$(config.domElements.totMobileSearchesForm).prop("disabled", true)
$(config.domElements.waitingBetweenSearchesFormMin).prop("disabled", true)
$(config.domElements.waitingBetweenSearchesFormMax).prop("disabled", true)
$(config.domElements.desktopButton).prop("disabled", true);
$(config.domElements.mobileButton).prop("disabled", true);
$(config.domElements.desktopMobileButton).prop("disabled", true);

$(config.domElements.totDesktopSearchesForm).prop("disabled", true);
$(config.domElements.totMobileSearchesForm).prop("disabled", true);
$(config.domElements.waitingBetweenSearchesFormMin).prop("disabled", true);
$(config.domElements.waitingBetweenSearchesFormMax).prop("disabled", true);
}

/**
* Activate Make search button
* and Number of Search form
*/
function activateForms() {
$(config.domElements.desktopButton).prop("disabled", false)
$(config.domElements.mobileButton).prop("disabled", false)
$(config.domElements.desktopMobileButton).prop("disabled", false)
$(config.domElements.totDesktopSearchesForm).prop("disabled", false)
$(config.domElements.totMobileSearchesForm).prop("disabled", false)
$(config.domElements.waitingBetweenSearchesFormMin).prop("disabled", false)
$(config.domElements.waitingBetweenSearchesFormMax).prop("disabled", false)

$(config.domElements.desktopButton).prop("disabled", false);
$(config.domElements.mobileButton).prop("disabled", false);
$(config.domElements.desktopMobileButton).prop("disabled", false);

$(config.domElements.totDesktopSearchesForm).prop("disabled", false);
$(config.domElements.totMobileSearchesForm).prop("disabled", false);
$(config.domElements.waitingBetweenSearchesFormMin).prop("disabled", false);
$(config.domElements.waitingBetweenSearchesFormMax).prop("disabled", false);
}

/**
* Update progressbar value
* @param {*} value
*/
/* ================================
PROGRESS BAR
================================ */

function setProgress(value) {
progressBar.style.width = value + "%"
progressBar.innerText = value + "%"
}
progressBar.style.width = value + "%";
progressBar.innerText = value + "%";
}