Browser Window App Files

This tool does two things with a web page, whose .html file is on your computer:

1) The "Make Body Editable" bookmarklet lets you display the web page, and change its contents in the browser window. For example, it lets you change the value of a div, or the value of a table td element.

2) The code in "BrowserWindowApp.js" saves the current text contents of the web page (ex: the changes that you typed into a div). It also saves the current non-text state of the web page (ex: which radio button is currently selected). The tool creates a string of characters that contain the web page, with the text and the state hard-coded into the html. If you save this modified html into a file, and then display the new html file in a web browser, then your changes will appear in the new html file's web page.

The tool was tested on a Mac, using
1) Mac OS X 10.8.5 / Safari Version 6.2.8 (8537.85.17.9.1) / AppleScript Editor Version 2.5.1 (138.1), AppleScript 2.2.4
and also using
2) OS X El Capitan 10.11.1 (15B42) / Safari Version 9.0.1 (11601.2.7.2) / ScriptEditor Version 2.8.1 (183.1), AppleScript 2.5.

----

To use the Browser Window App tool:

1) In your web browser, create the bookmarklets that are listed in bookmarklets.txt. For each bookmarklet, bookmarklets.txt lists a recommended name for the bookmarklet, followed by the URL (command) of the bookmarklet. You only have to do this step once.

2) Put the html file that you want to modify, and the folder "browserWindowApp", into the same folder.

3) In your web browser, display the html file that you want to modify.

4) Execute the bookmarklet labeled "Make Body Editable". (It might take a few seconds for the web page to become editable. If you click on some text in the web page, and the the cursor is a text insertion point, then the web page is editable.)

5) Execute the bookmarlket labeled "Add .js Element". This makes the contents of file "BrowserWindowApp.js" available for your web page to use. When this .js file has loaded, you will see an alert that says that the file has loaded.

After you run "Add .js Element", you can run the "Alert Head Contents" bookmarklet, if you want, to make sure that the .js element was added to your web page. If the alert window displays enough characters, then you will see the "BrowserWindowApp.js" file listed in the head element.

6) Make your changes to the web page. Change the web page's text, and select and unselect checkboxes and radio buttons.

7) Save the web page, with the changes that you just made. There are three ways to do this:

a) Run the bookmarklet labeled "Get, Show Window Contents". This will create a new window that displays html that contains your changes. Copy and paste this html to a new .html file.

b) If you have a Mac, you can use one of two AppleScripts to save the modified html. One AppleScript is called writeToOpenTextWranglerDocument.app. To use this AppleScript, open a blank TextWrangler file, and make sure that the modified web page is the top-most Safari web page. Then double-click on the "writeToOpenTextWranglerDocument.app" icon in the Finder. That AppleScript will query the Safari web page to get the modified html, and will then write that html into the open TextWrangler file.

c) Or (if you're using a Mac), you can save your changes by running createDateTimeFileAndWriteToIt.app. To use that AppleScript, make sure that the modified web page is the top-most Safari web page. Then double-click on the "createDateTimeFileAndWriteToIt.app" icon in the Finder. The AppleScript will get the html string from Safari, then create a new file whose name is the current date and time, then write the html string to that file. (The new file will be automatically put into the same folder as the AppleScript, which is the "browserWindowApp" folder.)

If you have trouble saving the web page, make sure that you ran the bookmarklet "Add .js Element".

----

Below is a description of the files in the tool.

The folder browserWindowApp contains the software that is used by the tool:

- BrowserWindowApp.js contains the JavaScript of the tool.

- createDateTimeFileAndWriteToIt.app is an AppleScript. It writes the modified html to files, as described above.

- writeToOpenTextWranglerDocument.app is another AppleScript. It writes the modified html to files, as described above.

Outside the folder browserWindowApp:

- bookmarklets.txt contains the bookmarklets that you execute, in order to execute the JavaScript that is in BrowserWindowApp.js. For each bookmark in this file, you see a recommended label, followed by the value (the URL) of the bookmark.

- README.txt is this file.

- testAll.html is a web page that contains all html elements that you might want to change. You might want to test this tool by changing the values of the elements in testAll.html, and then saving the values into an html file as described above.

----

CAUTION: If you type a password into a password input field, then this tool will save the password into the HTML in plain text, like this: value="MY PASSWORD". If there are any fields that you don't want saved (ex: password), then in BrowserWindowApp.js, change the code so that the fields that you don't want saved are not saved. For example, at the bottom of updateElementValues(), you might add code that removes the value attributes of all password fields. Then the html text that this tool creates won't contain the password's value.