Closed docjon09 closed 7 months ago
Hi @akhileshthite , pls review these changes.
Hi @akhileshthite , pls review these changes.
Hey @docjon09,
Have you tested it on firefox browser?
about:debugging
in search bar.This Firefox
.Load Temporary Add-on...
After clicking on the upload button, it opens the file selector window (not shown in the below gif because it's not covering the whole window).
Can you resolve these issues?
Here's the firefox add-on documentation that might help you in debugging: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions
Sorry, I hadn't tested it completely thinking that since it added on Firefox fine, there won't be any fine. I am sorry for bothering you. Thanks for sharing the resources. I will try to fix this 2 problems as soon as possible.
Sorry, I hadn't tested it completely thinking that since it added on Firefox fine, there won't be any fine. I am sorry for bothering you. Thanks for sharing the resources. I will try to fix this 2 problems as soon as possible.
Hey, np :) Take your time.
Please feel free to reach out if you have any questions.
Hi. I researched about the problem of the popup closing when the file selector window is opened. I found out that it has been a major bug in firefox and hasn't been resolved so far. Link to the issue
One workaround is to open the extension in sidebar instead of in popup. https://github.com/bitwarden/clients/issues/3013#issuecomment-1176035802
Hi. I researched about the problem of the popup closing when the file selector window is opened. I found out that it has been a major bug in firefox and hasn't been resolved so far. Link to the issue
One workaround is to open the extension in sidebar instead of in popup. bitwarden/clients#3013 (comment)
Hey! Thanks for your time and research.
Yes, this is a typical behavior in Firefox, and it happens because the browser treats the opening of a file selector dialog as a focus shift away from the popup, thus closing the popup.
Instead of opening the extension in sidebar, we can:
To resolve this, we have to keep the popup open even after the file selector is opened. Here's a suggested approach to mitigate this problem:
Background Script: Use a background script to handle the file uploading process. This will prevent the popup from being dismissed as the background script is not tied to the popup UI.
Message Passing: We'll need to use message passing between our popup script and the background script to facilitate this process.
background.js:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.action === 'uploadFile') {
// Call the upload function here. For example:
// uploadToIPFS(request.file);
// Then send a response back to the popup script.
sendResponse({success: true, message: 'File uploaded successfully'});
}
});
web3Storage.js (formerly qrcode.js): Instead of directly initiating the upload in the popup script when a file is selected, send a message to the background script to handle the upload:
$("#fileUpload").on("change", async function() {
var files = fileUpload.files;
if (files.length === 0) return;
// Send a message to the background script to handle the file upload.
chrome.runtime.sendMessage({action: 'uploadFile', file: files[0]}, function(response) {
if (response.success) {
// Handle successful upload in the popup script.
// For example: update the UI, show a success message, etc.
} else {
// Handle any errors or issues.
}
});
});
manifest.json:
"background": {
"scripts": ["background.js"],
"persistent": false
},
Instead of directly initiating the file selection from the popup, consider creating a new tab or window from our popup and have the file selection take place there. This way, even if the popup closes, the user will have a dedicated window or tab where they can choose the file and proceed with the upload.
We can use the chrome.tabs.create()
method to open a new tab. Once the file is selected and the QR code is generated, we can either display the information in the tab itself or send it back to the popup (if reopened) or even save it in chrome.storage.local
temporarily for retrieval.
example:
document.getElementById("UPLOAD_BUTTON").addEventListener("click", function() {
chrome.tabs.create({ url: chrome.runtime.getURL("file.html") });
});
manifest.json would be:
{
"permissions": ["tabs", ...other permissions]
}
⚠️ In both of these cases we need a new firefox branch?
We can also check how other open source add-ons are dealing with this issue. I'm always open to any better suggestions.
Hi @akhileshthite, I agree it will be easier if you create a separate branch for the Firefox version in the main repository. You can commit these changes on the new branch and then I can start working on solving the bug.
Hi @akhileshthite, I agree it will be easier if you create a separate branch for the Firefox version in the main repository. You can commit these changes on the new branch and then I can start working on solving the bug.
Hey!
I've just created a new firefox
branch and changed the base branch from main
to firefox
for this PR.
You can continue with your work :)
@akhileshthite Can you merge this PR for now? I need to complete just one more PR for hacktoberfest and I have to do so before the end of October. I don't think I will be able to complete this work within October since I also have college assignments.
@akhileshthite Can you merge this PR for now? I need to complete just one more PR for hacktoberfest and I have to do so before the end of October. I don't think I will be able to complete this work within October since I also have college assignments.
But there are still 9 days remaining for the Hacktoberfest, right?
@docjon09 are you still working on this?
Related Issue (if any)
Closes: #30
Describe the add-ons or changes you've made
Created a new directory 'publicFF' same as 'public'. Only replaced 'service_worker' with 'scripts' in manifest.json file since firefox doesn't support 'service_worker' property.
Created 'webpack.configFF.js' config file similar to 'webpack.config.js' but modified to take read from 'publicFF' directory and to store the build output in 'buidlFF' directory.
Created 'webpack.prodFF.js' which uses the 'webpack.configFF.js' config file to create the build for firefox.
Modified 'package.json' so that the build for firefox can be produced by running this command 'npm run buildFF'.
Type of change
How Has This Been Tested?
Checklist:
Screenshots (Only for Front End and UI/UX Designers)