How to use Chrome Extension functions (NaCl) in my website?

Question

I have a website and a Google Chrome extension. The extension uses the NaCl API (JavaScript) to write/read files (C++) from user's computer.

My question is: Can I load my extension in my website, for example, in an iFrame and keep its functions?

I tried to do it, but it only loads the extension "visual" part. The write/read (NaCl) functions didn't work.

An example to better explain what I wanna do:

It's actually working this way:

I'd like to do this:

Or this another way, but I think it's not possible, is it?

Is it possible? How can I do it?

EDIT

Here is the code:

In manifest.json I put this:

"externally_connectable": {
    "matches": ["http://www.example.com/index.html"]
},

"web_accessible_resources": [
    "/*"
],
"content_scripts" : [
    {
        "matches" : ["http://www.example.com/index.html"],
        "js": ["index.js"]
    }
],

My website's Iframe:

<iframe src="chrome-extension://myextensionid/index.html"></iframe>

In my extension index.js file, just has two buttons. Their functions (JavaScript) communicate with the .cc file (through NaCl) to save or load a string in a file on computer.

As I said, the extension is working fine, but when I try to load it in my website through an Iframe, it only loads the html (visual). The JavaScript doesn't load, consequently, the C++ neither, as long as the JS calls the C++ functions with NaCl.

Any solution?

Answer 1

<embed name="nacl_module" id="nacl_module" width="100%" height="100%" path src="//storage.googleapis.com/gonacl/demos/publish/236779/voronoi/voronoi.nmf" type="application/x-pnacl">

And the above tag is in this iframe:

<iframe frameborder="0" width="100%" height="100%" src="/static/voronoi/index.html">

This is from https://gonativeclient.appspot.com/demo/voronoi

Also the https://gonativeclient.appspot.com/static/voronoi/example.js contains the script of how is that done.

I've done 10 min search to find that. Just to know NaCl won't work on other browsers.

If you want pure javascript that will work on all browsers. Use this snippet below. It creates a link that when you click it, it downloads a text file caintaining the text data. Add an `.innerHTML' attribute like "Save", and then you can click it. HTML5 has no limits for long attributes.

var file = document.createElement('a');
file.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
file.setAttribute('download', filename);

You can have the text variable be set from a multiline textbox and with a keyevent that updates its value. Same goes for filename, e.g. "Saved draft.txt". You can experiment with other types of data too other than text/plain. To check the other types, search for what a header can take at its data field.

For file load you can check this http://www.html5rocks.com/en/tutorials/file/dndfiles/