2

I'm writing a Chrome userscript to locally auto-save content in a CKEditor. I'm using this CKEditor auto-save plugin as inspiration.

I have written a function that fires every half second (via an interval) to register the CKEditor event handler:

var intervalId = window.setInterval(function() {
    if (CKEDITOR) {
        window.clearInterval(intervalId);
        CKEDITOR.plugins.add("user-script-auto-save", {
            init : function(editor) {
                editor.on('key', startTimer);
            }
        });
    }
}, 500);

However, it never properly completes, and complains that "CKEDITOR is undefined" on the if (CKEDITOR) statement.

Meanwhile, if I drop into Chrome's console and type CKEDITOR, the console prints out the expected object.

What am I missing? The editor is embedded within an iframe; might that have an impact on scoping? Or am I fighting against Chrome's sandboxing here? And if so, is there some other way I can dig into CKEditor to pull out the content every second or something to do the auto-saves?

I have not yet tried the script in Firefox; that's next on my list.

Worth noting: I'm a long-time JavaScript novice. So I could easily be doing something dumb with scoping or something like that.

Brock Adams
  • 90,639
  • 22
  • 233
  • 295
Patrick Linskey
  • 1,124
  • 1
  • 13
  • 24
  • chrome script is targeted at the iframe url? Have you tried `if (CKEDITOR != undefined) {}` – mrtsherman Jan 29 '12 at 02:29
  • The script is currently targeted at the outer page's URL (and is properly firing in that context). Should I expect to be able to access the inner iframe data, or do I need to change the script to target both URLs? – Patrick Linskey Jan 29 '12 at 02:31
  • Regarding the undefined check -- that'll just mask the error, correct? I'm not too concerned about the error handling just yet; I'm mostly interested in figuring out how to get to the CKEDITOR variable (which is visible to me in whatever scope the console runs in). – Patrick Linskey Jan 29 '12 at 02:32
  • 2
    Take a look at this for iFrame. Definitely have to handle it - http://stackoverflow.com/questions/3937355/accessing-iframes-from-a-chrome-content-script-extension – mrtsherman Jan 29 '12 at 02:33
  • Link to the target page. If the iFrame is same-domain then you have more options. Otherwise, the script needs to fire on the frame's URL and `"all_frames": true` might be needed. – Brock Adams Jan 29 '12 at 02:43
  • @Brock Adams: It looks like the source for the iframe is unset. – Patrick Linskey Jan 29 '12 at 02:55

1 Answers1

2

According to this little tutorial video on YouTube, all the 3 "devices" are separated from each other in order to prevent XSS attacks from the user script to the browser / website and vice versa. Although the user scripts / content scripts are running in the website's context, they are still kept separated from the actual website script context. You can easily acknowledge this by simply trying to access for example jQuery from a content script. Just as the CKEditor, it will not be available.

So what I've come up with in order to deal with this is using the content script to include external JavaScripts in the head tag. AFAIK, this is not possible for files directly in the extension's root directory, so I've taken a remote server to host my files.

I'm not sure if this is the best approach and I think it is an ugly bypass, possibly way to powerfull and disabled by the Chromium Project some time.

(Edited by OP, so I can select this answer and route karma appropriately)

This answer, combined with some of the suggestions and links in the comments, ended up getting me to where I needed to be.

I ended up with the following function:

var insertScriptIntoDocument = function(scriptUrl, doc) {
    // inspired by http://blog.afterthedeadline.com/2010/05/14/how-to-jump-through-hoops-and-make-a-chrome-extension/
    var scriptText = doc.createTextNode(
        '(function(loc) {                                                    \
    var embeddedScript = document.createElement("script");                   \
    embeddedScript.type = "text/javascript";                                 \
    embeddedScript.src = loc;                                                \
    document.getElementsByTagName("head")[0].appendChild(embeddedScript);    \
})("' + scriptUrl + '");');

    var injectorElement = doc.createElement('script');
    injectorElement.appendChild(scriptText);
    doc.body.appendChild(injectorElement);
};

Usage looks like so:

var embeddedScriptUrl = chrome.extension.getURL("embedded-script.js");
insertScriptIntoDocument(embeddedScriptUrl, document);

For now, I'm executing this from within a Chrome extension, but I suspect that the pattern might work in a GreaseMonkey script deployed via the Chrome TamperMonkey extension provided that the URL of the script to be embedded was hosted somewhere reachable.

FTR, as it turns out, I did not actually need to get to the iframe -- the CKEDITOR variable was defined in the top-level document, but was simply not visible because of the rules of the Chrome sandbox

Patrick Linskey
  • 1,124
  • 1
  • 13
  • 24
Kiruse
  • 1,703
  • 1
  • 12
  • 23
  • I think it is possible to include external JS files from my extension directory. You just create script tag with proper src attribute: `chrome.extension.getURL("js/myfile.js");` – hamczu Jan 29 '12 at 02:58
  • To be honest, I've never tried. ;) If it works, that's great and I'll remember it for the next time I write an extension. Thank you. – Kiruse Jan 29 '12 at 03:08
  • You Chrome Extension's script can't access the page's scripts, just the page's content. If the CKEDITOR variable is defined in the page's script(s) and not in your extension, it won't be available to your extension. – WesleyJohnson Jan 29 '12 at 04:03
  • @WesleyJohnson That's basically what I've said. That's why I suggest bypassing this restriction by including a script tag linking an external JavaScript file which therefore has access to the CKEDITOR variable, but not to the extension. So this pretty much is a one-way communication. – Kiruse Jan 29 '12 at 04:45