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: enter image description here

I'd like to do this: enter image description here

Or this another way, but I think it's not possible, is it? enter image description here

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?

The graphics might help someone else, but I'm having trouble parsing it. Why don't you post a code sample instead so others can reproduce the issue you're seeing? — sowbug, Feb 09 '14 at 03:15
have you tried adding "all_frames": true in the content_scripts ? — João Augusto, Feb 13 '14 at 11:10
@JoãoAugusto - Yes, I did. It, apparently, changed nothing. — Andre Amaral Braga, Feb 14 '14 at 10:31
Maybe the problem is with the "matches", apparently you are only allowing content scripts to run in "http://www.mysite.com/index.html" — João Augusto, Feb 14 '14 at 10:58

Theofilos Mouratidis · Accepted Answer · 2014-02-14T14:02:12.777

<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/

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

1 Answers1