feat: build for firefox

[docjon09]

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

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Code style update (formatting, local variables)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update

How Has This Been Tested?

Checklist:

• [x] My code follows the "contribution guidelines" of this project.
• [x] I have performed a self-review of my own code.
• [x] I have commented my code, particularly wherever it was hard to understand.
• [x] My changes generate no new warnings.
• [x] Any dependent changes have been merged and published in downstream modules.

Screenshots (Only for Front End and UI/UX Designers)

Original	Updated
Original Screenshot	Updated Screenshot

[docjon09]

Hi @akhileshthite , pls review these changes.

[akhileshthite]

Hi @akhileshthite , pls review these changes.

Hey @docjon09,

Have you tested it on firefox browser?

Steps:

1. Install firefox.
2. Type about:debugging in search bar.
3. Click -> This Firefox.
4. Click -> Load Temporary Add-on...
5. Open the BuidlFF folder (select manifest.json).

I faced following two issues while testing the extension:

1. Functionality: The extension disappears after clicking on the upload button.

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).

2. UI: Horizontal and vertical scroll bar.

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

[docjon09]

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.

[akhileshthite]

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.

[docjon09]

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

[akhileshthite]

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:

1.

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
  },

2.

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.

[docjon09]

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.

[akhileshthite]

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 :)

[docjon09]

@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]

@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?

[akhileshthite]

@docjon09 are you still working on this?