A Firefox extension to open custom image file by dropping on it

  Kiến thức lập trình

Windows 10
Firefox 128.0

I’m trying to create a Firefox extension that handles custom file format (XPX) drop on Firefox.
The file is zlib compressed binary data. As per the extension guide here are the contents of
“xpx.zip”

  1. icon.png
  2. manifest.json
  3. pako.min.js
  4. content.js
  5. background.js

manifest.json

{
  "manifest_version": 2,
  "name": "XPX 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": ["content.js"]
    }
  ],
  "web_accessible_resources": [
    "pako.min.js"
  ],
  "browser_action": {
    "default_icon": {
      "48": "icon.png"
    },
    "default_title": "XPX File Opener"
  }
}

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);
      handleCustomFile(file);
    }
  }
}

function handleCustomFile(file) {
  const reader = new FileReader();
  reader.onload = async (event) => {
    const compressedData = new Uint8Array(event.target.result);
    const decompressedData = await decompressZlib(compressedData);
    const htmlContent = new TextDecoder().decode(decompressedData);
    const newTab = window.open('', '_blank');
    newTab.document.write(htmlContent);
    newTab.document.close();
  };
  reader.readAsArrayBuffer(file);
}

function decompressZlib(compressedData) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = browser.runtime.getURL('pako.min.js');
    script.onload = () => {
      const decompressed = pako.inflate(compressedData);
      resolve(decompressed);
    };
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

background.js

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

Once the extension (xpx.zip) is loaded and a .xpx file is dropped on an empty tab, instead of opening the file it shows file “Open” & “Save As” dialog.

Because the extension is not working right now, I have no idea about the way I have handled “pako.min.js”. Plesae suggest me if I handled it incorrectly.

Cheers.

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website

LEAVE A COMMENT