Firefox extension for opening a file with custom extension

[animator333]

Hello,

Windows 10
Firefox 128

The extension I am developing a custom image file format (xpx) and would like to open it in Firefox. Here is the initial code:

manifest.json

    {
      "manifest_version": 2,
      "name": "XPX Image File Opener",
      "version": "1.0",
      "description": "Open xpx, a zlib-compressed binary image file.",
      "background": {
        "scripts": ["background.js"]
      },
      "permissions": [
        "tabs",
        "activeTab",
        "webNavigation"
      ],
      "content_scripts": [
        {
          "matches": ["<all_urls>"],
          "js": ["xpx.js"],
          "css": ["style.css"]
        }
      ],
      "web_accessible_resources": [
        "pako.min.js"
      ],
      "browser_action": {
        "default_icon": {
          "48": "icon.png"
        },
        "default_title": "XPX Image File Opener"
      }
    }

background.js

browser.browserAction.onClicked.addListener((tab) => {
  browser.tabs.executeScript(tab.id, {
    file: 'xpx.js'
  });
});

xpx.js

console.log("Hello");

// Handle dropped files
document.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
  const dt = e.dataTransfer;
  const files = dt.files;

  if (files.length > 0) {
    const file = files[0];
    const fileExtension = file.name.split('.').pop().toLowerCase();
    if (fileExtension === 'xpx') {
      console.log(fileExtension);
      //handleCustomFile(file);
    }
  }
}

Instead of executing the extensions files, it shows file “Open” & “Save As” dialog window. How do I resolve the problem?

Cheers

[juraj.masiar]

I think you need to call:

e.preventDefault();

(for example on the top of your handleDrop function)
That will prevent the default action, which is the “Save as” dialog.

More info:

Drag operations - Web APIs | MDN

[animator333]

Hello @juraj.masiar
Here is new code as per the link you have suggested:
manifest.json

{
  "manifest_version": 2,
  "name": "Drop Interceptor",
  "version": "1.0",
  "description": "Intercepts file drops to prevent default browser behavior.",
  "permissions": ["<all_urls>"],
  "background": {
    "scripts": ["background.js"]
   },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

content.js

// Prevent default drag behaviors
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  document.addEventListener(eventName, preventDefaults, false)
});

function preventDefaults(e) {
  e.preventDefault();
  e.stopPropagation();
}

// Handle dropped files
document.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
  const dt = e.dataTransfer;
  const files = dt.files;
  if (files.length > 0) {
    const file = files[0];
    const fileExtension = file.name.split('.').pop().toLowerCase();
    if (fileExtension === 'xpx') {
      console.log(fileExtension);
    }
  }
}

background.js

browser.webNavigation.onCompleted.addListener(function(details) {
    console.log(details.url);
});

Still it shows “Open” & “Save As” dialog instead of calling the extension scripts.

[hans_squared]

Works for me.
Firefox 128.0 in Linux Mint 21.3

If you add a console.log() message to content.js, it lets you see if FF actually injects the content script into a tab.
E.g. when you create a new tab with Ctrl-T, FF doesn’t inject any content scripts until you navigate the tab to a URL.

edit:

• The new manifest.json doesn’t have the “webNavigation” permissions, so browser.webNavigation.onCompleted.addListener in background.js causes an error.
• You don’t need "permissions": ["<all_urls>"] , because in MV2, "matches": ["<all_urls>"] implicitly grants the “<all_urls>” host permission.

edit 2:
Did you drag the .xpx file into an existing tab?
Or did you drag it into the tab bar?

[animator333]

@hans_squared
I open a new tab in the Firefox and drop the xpx file from file explorer. I have removed ‘background.js’, removed ‘permissions’ from ‘manifest.json’. Created a zip file containing “manifest.json” and “content.js” and load the zip file as extension. No errors or warnings but when I drop a xpx file, still it opens the dialog window.

[juraj.masiar]

Add some console logs to make sure the content script is really there and running.
For example in the dragstart and dragover handlers.

[animator333]

@juraj.masiar

Here is the new “content.js” and none of the console messages are getting printed.

console.log("Hello World");

// Prevent default drag behaviors
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    console.log("Prevent defaults");
    document.addEventListener(eventName, preventDefaults, false)
});

function preventDefaults(e) {
  e.preventDefault();
  e.stopPropagation();
}

['dragenter', 'dragover'].forEach(eventName => {
  console.log("drag enter over");
});

['dragleave', 'drop'].forEach(eventName => {
  console.log("drag leave drop");
});

// Handle dropped files
document.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
  const dt = e.dataTransfer;
  const files = dt.files;

  if (files.length > 0) {
    const file = files[0];
    const fileExtension = file.name.split('.').pop().toLowerCase();
    if (fileExtension === 'xpx') {
      console.log(fileExtension);
    }
  }
}

[juraj.masiar]

@animator333

['dragleave', 'drop'].forEach(eventName => {
  console.log("drag leave drop");
});

Lol , are you using ChatGPT to generate this code based on our replies?
Or are you a chatbot?

[hans_squared]

@juraj.masiar

Lol , are you using ChatGPT to generate this code based on our replies?
Or are you a chatbot?

See “Creating a Custom Image File Dropping Firefox Extension on Windows 10” on a website called “devcodef1” (link removed).
Which is obivously AI-generated, because it uses the non-existent browser.tabs.onDrop listener.

I don’t know if OP generated the DevCodeF1 page, or if he found it and is now trying to follow the garbage “tutorial”.

OP asked the same question on Stackoverflow @ A Firefox extension to open custom image file by dropping on it

# I Have No Idea What I’m Doing

[animator333]

I myself is asked this question on stackoverflow yesterday but some one down voted it because of not enough research have done it before posting it. That’s why I have posted this question here.

Here is one more thing to laugh. I have asked this question on Microsoft’s Copilot because right now it’s freely available and than it just pasted back my post from stackoverflow as an answer. Than this happened:

Still the extension is not working.

[animator333]

Ok,

Finally it’s working & I’ll post the code soon. The reason is that I was dropping the file on an empty or newly opened tab. When I drop the file on a tab where a url is opened, the extension is working and I believe this property in the “manifest.json” is responsible for it.

"matches": ["<all_urls>"],

I need a way that can handle no url also. How do I do it?