Create a webextension who open and read a zim file

Add-ons Development
#1

Hi,

I’d like to create a webextension who open a zim file.
Someone can explain to me how i need to tell to firefox that he can open it and how can i mention that is my extension who must do it.

My actual solution (dirty) :
a python script who
1.decode zim file and extract all files in a temp directory.
2. launch firefox with the index.html

Open in browser : https://addons.mozilla.org/en-us/firefox/addon/open-in-browser/
do the job but is not using webextensions.
What about fileBrowserHandler API (https://developer.chrome.com/extensions/fileBrowserHandler) in Firefox ?

#2

Assuming your file is not too big (i mean not over a few MBs), you can easily read a local file just using the HTML5 API (not need for a special add-on API here). The only requirement is that the file opening is initiated by the user clicking on an <input type="file"> element. You will find many examples of this method, for instance here).

#3

thanks for answer, Mig

I know Html5 API.

I redefine my project : I created a web app who add interactive content to pictures or svg : https://mothsart.github.io/labo/frontend/edit_interactive_svg/
In a second time, i contribute to a french and educative linux distribution : Primtux.
Finally, i start to work on a picture book and his editor (just a proof of concept actually) : https://mothsart.github.io/labo/frontend/edit_interactive_svg/picture_book.html
Teachers who use this app, must use this like a native and offline app and share her work with a unique file.
One illustration can bring 1 or several Mo and the picture book have no real limit.
For this 2 reasons, i don’t want to open firstly firefox and using a input file.
I want to propose opening a zim file, with a proper extension (like picture_book.illu).

#4

Wouldn’t it be possible to monitor loaded URLs in tabs and when you see one that ends with .illu, you inject a script that modifies the DOM the way you want ?

#5

That seems a real good idea : how can i do-it so ? (doc, tuto or something like).

#6

I don’t know about specific tutorial but something like this (untested) should work.

In your background script:

browser.tabs.onUpdated.addListener((tabId,info)=>{
    if(info.url && /\.illu$/.test(info.url.current)) 
        browser.tabs.executeScript(tabId,{
            frameId: 0,
            file: "my_modifier_content_script.js"
        });
});

Then you do the smart job from your my_modifier_content_script.js file.

#7

interresting, seems good on http protocol (http://…my_file.illu) but not for file protocol (file://…/my_file.illu) :
Firefox open a dialog (what should firefox do with this file?) instead of going on background script.