Smuggling AutoIt into IE embedded

[MarkRobbins]

In my >previous adventures, I got a bare-bones AutoIt proxy object injected into MSScriptControl.ScriptControl.

The proxy had just enough functionality that a basic form application could be coded from Javascript. That was kind of fun but the ScriptControl is old and iffy, its environment is like using an old version of JScript, sometimes mere comments would trigger non-compilation.

What would be really good is to get a full-fledged proxy injected into IE, so that you had ECMA5-ish language features and a more stable platform. I had no idea how to do this though, so I was shocked when it worked, which is why I call it 'smuggling'.

Once you had a decked out proxy in there, you could code your entire app in Js, and use IE as a GUI (or not). I am most interested in coding in an OOP language, so that is what is driving my attempts.

Long story short, it worked. So now I have an initial framework for doing this, and I put together this stress test of an application and demo.

The clip from the header:

expandcollapse popup

; OVERVIEW
;  Name: Jsaioie -- Javascript, AutoItObject, Internet Explorer
;
;  This is an advanced demo of using an embedded IE control as a GUI.
;  What is noteworthy is that the main application code is in javascript, which makes calls
;  to core AutoIt functions via an imported AutoItObject which has been constructed.
;  This means that virtually all of the application can be coded as JS, which means OOP.
;  JS OOP is really not demonstrated here within this demo however.
;
;  What is demonstrated in the JS code is how JS can be persuaded to behave asynch, and emulate
;  a threaded application.
;
;  When the application starts, it will analyze all the files in the users AutoIt include directory in order
;  to build a series of collapsable divs with information on the constants and functions found.
;  While this process is occuring, the UI is still relatively responsive, and you can watch the nested div
;  items being added, or even filter them while it is loading.
;
;  The application will pick up about 14k identifiers from the include directory, each having its own div
;  and tt tag containing documentation. Some research shows that IE8 has problems when the div count exceeds
;  1000, but I am using IE 10. Your results will depend on your IE version. It is said that IE9+ should have
;  not much problem with 100k divs. The real lag is filtering them, which could be optimized.
;
;  Parsing the files, loading and building html and listeners for 14k items takes 5.5 minutes on my machine.
;  That breaks down to 42 items per second, or 24k bytes per second. Tweaking seems to have no effect. The
;  goal is to keep the thing responsive during load, the html I mean, but the application will hourglass
;  when it encounters the bigger files, probably a IO thing.
;
;  The application consists of the following files:
;   Jsaioie.au3         - Backbone code file
;   Jsaioie.au3.ini     - Config, will be created
;   Jsaioie.au3.js      - Application code
;   Jsaioie.au3.html    - Simple html skeleton
;   Jsaio-inc-AiFn.au3  - Constructs the AutoIt proxy AutoItObject
;   Jsaio-utils.au3     - Some misc utils
;   jquery-1.10.2.js    - For dom manipulation
;   Jsaioie.au3.log.txt - Output log for debugging
;   Jsaio-loaded.js     - A preview of the javascipt to be loaded after preprocessing
;
;  OPERATION
;   1. $AutoItForCom AutoItObject is created and core AutoIt functionality appended to it
;   2. Small amount of application specific functionality is also appended
;   3. Form with Embedded IE constructed
;   4. Html is constructed from assets, preprocessed and injected into IE
;   5. $AutoItForCom is injected into IE (the real magic part)
;   6. Javascript init() function is called which grabs the injected $AutoItForCom and assigns it to window.A var
;   7. Javascript Main() function is called which begins the application
;
;  JAVASCRIPTS USE OF $AutoItForCom
;   1. Getting file list from include directory
;   2. Getting file contents
;   3. Logging
;   4. Running a specified editor to edit file
;   5. Placing text on clipboard
;   6. Reading config ini
;   7. Browse for folder
;   8. Browse for file
;   9. Getting ScriptFullPath
;  10. Checking @Error
;
;  FEATURES
;    1. Dynamic html nested accordian browser
;    2. Filter for file, or for identifier
;    3. Up Down, Page Up Page Down keys while in filter boxes will scroll document
;    4. Clear filter will collapse all
;    5. Click on Icon to copy signatures to clip
;    6. Unfold Items to see documentation if exists
;    7. Click on file link to edit file
;    8. Specify your editor, saved in config
;    9. Specify your include dir, saved in config
;   10. Asynch loading, file icons change color
;
;  NOTES
;   This is not intended to be a finished app, but a stess test and demo. A lot of the JS coding has been
;   unrolled and exposed in a simplistic manner for illustration purposes. Familiarity with Javascript and
;   jQuery are neccessary for understanding how the application works. All the AutoIt code is essentially
;   a framework so that it is possible to code the app in the browser, and have access to autoit.

And a pretty pic:

And the zip:

Jsaioie.zip

 

[eimhym]

This >old project use ScriptControl, but already has wrapper for AutoIt and JScript to communicate with ease (calling methods, passing variables, arrays etc). The bridge is closure compiled but the unpacked version is included, hopefully readable
And FYI Chakra JScript Engine can be used directly without ScriptControl nor IE, see here for hint, use Chakra's GUID instead.

[MarkRobbins]

This >old project use ScriptControl, but already has wrapper for AutoIt and JScript to communicate with ease (calling methods, passing variables, arrays etc). The bridge is closure compiled but the unpacked version is included, hopefully readable

And FYI Chakra JScript Engine can be used directly without ScriptControl nor IE, see here for hint, use Chakra's GUID instead.

 

Yes. Your code is what got me started! I even made a helper so that you can set the property of an AutoItObject using a property name string : >Index into an AutoItObject? Back then I was just using the JSOs for Assoc Arrays.

I tried to get AIO proxy into Moz, but it wouldn't accept the same technique.

Is Chakra the same obj as ScriptControl, or a newer version. My coding experience with ScriptControl has been too full of gotchas for me to use it.

Long term, what needs to be done is wrap the imported AutoIt proxy with OO oriented facade, so all the AI UI controls can be dealt with as objects. Then the entire app can be coded in Js. Though moving across com has a slight delay, my testing shows that Js is going to be much faster as an overall language.

Can you give any pointers as to capturing Js errors, and debugging? That part seems really bad, especially when you have a syntax error in js.

[eimhym]

I tried to get AIO proxy into Moz, but it wouldn't accept the same technique.

 

If you refer Mozilla Firefox then we can't use AIO with javascript other than IE.

Is Chakra the same obj as ScriptControl

 

Chakra (used since IE9) is the core JS engine, M$ Active Scripting version of V8. ScriptControl and IE are Active Scripting Hosts, where you can select the engine you like (JS, VB, Python, etc).

But Chakra by default is not visible to ScriptControl, only for IE. By implementing IActiveScriptSite you can instantiate it.

You can make script host wrapper dll for AutoIt, or implement it directly (yes AutoIt CAN implement Interface ) I'm onto the later but my responsibilities lately hold me from messing with the idea.

Can you give any pointers as to capturing Js errors, and debugging? That part seems really bad, especially when you have a syntax error in js.

 

Try google for 'javascript stacktrace', to get detailed info about exception/error thrown. As for syntax checking you can first pass the code into JSLint or similar.

Good luck digging

[eimhym]

Chakra is now reachable, >check it out