Script Editing
From CYW-Wiki
Contents |
The Basic Procedures
The basic procedure to customize a website for the first time is as follows:
- Navigate to the website you want to customize.
- Switch to the edit mode.
- Select the entry 'New Script' from the menulist "Matching Scripts" in the sidebar window.
- Add actions by selecting elements in the content window and choose the appropriate action from the context menu.
- Check whether the automatically added include URL pattern is correct and modify it if needed.
- Save the script.
The basic procedure to edit an existing script is as follows:
- Navigate to the website for which you want to edit an exisiting script.
- Switch to the edit mode.
- Select the script you want to edit from the menulist "Matching Scripts" in the sidebar window
If your script is not listed select it from the dialog by pressing the "Select" button. - Add, remove or modify actions, modify the include/exclude URL patterns or any other parameter of the script.
- Save the script.
Start/Stop Editing
You can switch to the edit mode by either clicking on the statusbar icon or by pressing F10 (this shorcut can be changed in the config dialog). In the editing mode all normal events like clicking a button/or link will be suppressed. It is possible to reload the page but no scripts will be applied in that case. Stop editing is achieved by either saving or canceling the editing or by pressing F10 again which has the same effect as pressing the cancel button.
Selecting the Script You Want to Edit
When you switch to the edit mode the sidebar window is opened and a form is loaded which contains all information about the currently selected script. The menulist "Matching Scripts" at the top of the sidebar window contains all scripts which URL patterns match one of URLs currently loaded into the content window (the content could contain multiple frames, i.e. multiple URLs). The labels of the menulist entries are created by concatination of the name of the script and its first include URL pattern.
Before you start editing you have to select the script you want to edit or select the entry "New Script". After you have selected one entry the sidebar window will be filled with the data stored in the script. Addionally all frames in the content window not matching the URL pattern of the selected script will be shadowed so that you get a clear feedback for which part of the website the script applies.
Adding Actions
You can now start adding actions to the script. Except the "Insert JavaScript" action all actions refer to one specific element in the content window. So to add an action you first have to select the target element for which an action should apply. If you move the mouse around the content window you will see that the currently selected element gets a blue frame. Addionally the tag name of the element is displayed in the right upper corner.
Sometimes it is difficult to select the right element with the mouse. Therefore the following shortcuts are available to enable selection also via the keyboard:
- Arrow-Down/Right moves the selection to the next sibling of the current element.
- Arrow-Up/Left moves the selection to the previous sibling of the current element.
- Ctrl+Arrow-Down moves the selection to the first child of the current element.
- Ctrl+Arrow-Up moves the selection to the parent of the current element.
If you have selected the right element you can either click on it (both left or right click are possible) or press the context key to open the context menu. You can now select the desired action which results in opening the corresponding edit dialog. Almost every action also has a shortcut key which can be found either behind the menuitems in the context menu or by pressing F1 while you are in the edit mode.
After you've edited the action properties in its dialog the action will be added to the actions tree in the sidebar window. By default the action will be added to the root element. If you want to add an action to an existing container action (container actions are actions which can contain other actions) you have to select the container action in the tree before adding a new action.
Editing Actions
To edit an existing action select it in the actions tree and press the "Edit" button or press "Enter". The target element of the selected action will be automatically selected in the content window.
Actions can be deleted by either pressing the "Delete" button or by pressing the "Delete" key. You can also move actions around by pressing the "Up"/"Down" buttons or by pressing the "Ctrl+Arrow Up/Down" keys.
The actions tree also support full cut/copy/paste behavior of actions either via the context menu or via the standard shortcuts.
Include/Exclude URL Patterns
One important information of a script is for which websites - or to be more precise - for which URLs the script should be applied. This information can be specified in the "Include URL Patterns" listbox on the first tab of the sidebar window and with the corresponding listbox "Exclude URL Patterns" on the second tab.
At the lastest after adding the first action to a script CYW will automatically add the most likely URL pattern to the "Include URL Pattern" list. CYW takes the full URL as the default value whereas URL parameters (everthing behing the '?') will be replaced by a wildcard character ('*'). You can edit this entry by either double clicking it or by pressing "Enter" if the keyboard focus is on the entry you want to edit. After doing this the entry will be replaced with an editable menulist containing a list of reasonable URL patterns. To confirm your choice press "Enter" again or cancel editing by pressing "Escape".
You can add new entries either via the context menu or by pressing the "+" key. Removing an entry can also be done via the context menu or by pressing the "Delete" key.
Exclude URL patterns overule include URL patterns i.e. if one exclude URL pattern matches the URL of the content window the script will not be applied.
Other Script Parameters
The following parameter can also be configured for a script:
- Name
To give the script a name helps you to better distinguish your scripts. - Disabled
You can temporarily disable the script by ticking on the checkbox - Time when the Script should run
There are two alternatives listed: Before the website is fully (techn. that is the DOMContentLoaded event) and after the website is fully loaded (techn. that is the "pageshow" event). The first one is the default and you only have to change that in rare cases. One such case could be if you want to set the keyboard focus to another element than the default selected one. The reason is that script of website runs not before the page is fully loaded. - Behavior on dynamic page change
More and more websites (e.g. Gmail, Facebook) uses JavaScript to change the user interface on the fly. This necessitates control over re-execution of Scripts and Actions. By default a script is re-executed every time an element is added to or removed via JavaScript. This re-execution can be deactivated on the second pane of the sidebar window. This behavior can also be defined on the action level within their edit dialogs (this is not relevant for all action types). The default behavior for an actions depends on the type of action.
