From 6c1a8891e3e319d6c408353b153d7c6eba27e0b6 Mon Sep 17 00:00:00 2001 From: Nils Date: Sun, 31 Jan 2016 15:42:09 +0100 Subject: [PATCH] Update README.md --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 7ed178b..f3fa890 100644 --- a/README.md +++ b/README.md @@ -22,11 +22,11 @@ A chrome extension for tagging words with semantic information. Technology stack (roughly): Angular.js, Typescript, Lodash and Rangy.js. -**How is the plugin loaded?** `Manifest.json` adds an icon and defines an [event page](https://developer.chrome.com/extensions/event_pages) called `background.js`. The event page adds a click listener to the plugin's browser icon. When triggered it will first load jquery and then inject the html menu in an iframe as well as create an iframe for housing the page content. The plugin is in fact reloading the page inside an iframe on the page. It will then continue loading dependencies before finally calling `tagit.init()` on the plugin which makes angular initialize itself making it possible to interact with the injected menu. When loading the plugin will check local storage for previously made tags and add them the page. The plugin will also add click listeners to the iframe(s) containing content to be tagged. +**How is the plugin loaded?** `Manifest.json` adds an icon and defines an [event page](https://developer.chrome.com/extensions/event_pages) called `background.js`. The event page adds a click listener to the plugin's browser icon. When triggered it will first load jquery and then inject the html menu in an iframe as well as create an iframe for housing the page content. The plugin is in fact reloading the page inside an iframe on the page. It will then continue loading dependencies before finally calling `tagit.init()` on the plugin which makes angular initialize itself making it possible to interact with the injected menu. When loading the plugin it will check localstorage for previously made tags and add them to the page. The plugin will also add click listeners to the iframe(s) containing the content to be tagged. -**Why iframes?** I originally tried just injecting the menu into the page to tag. This was the source of a number of issues. Tags need to be related to the original page structure but was disturbed by the injected non-static plugin menu. CSS was also quite unmanageable as the original page css would disturb the plugin menu and vice versa. In really bad cases the content to be tagged would seep out of its containing `
` element and overlap the plugin menu. All things considered iframes seem like a decent approach since they shield our menu and the taggable content from each other. +**Why iframes?** I originally tried to just inject the menu into the page to tag. This was the source of a number of issues. Tags need to be related to the original page structure but was disturbed by the injected non-static plugin menu. CSS was also quite unmanageable as the original page's css would disturb the plugin menu and vice versa. In really bad cases the content to be tagged would seep out of its containing `
` element and overlap the plugin menu. All things considered iframes seem like a decent approach since they shield our menu and the taggable content from each other. -**How does tagging happen?** After the plugin has been loaded it will have added click listeners to the iframe(s) containing the taggable content. When a click is registered the plugin will check if a word was selected. If a new word had been selected it will query a backend service (url endpoint) for possible definitions to tag the word with. When the user selects a definition the plugin tags the word, saves the tag in localstorage and posts the result back to the backend service. +**How does tagging happen?** After the plugin has been loaded it will have added click listeners to the iframe(s) containing the taggable content. When a click is registered the plugin will check if a word was selected. If a new word has been selected it will query a backend service (url endpoint) for possible definitions to tag the word with and display them in the menu. When the user selects a definition the plugin tags the word, saves the tag in localstorage and posts the result back to the backend service. **Particularities to tagging:** When tagging a selection the plugin must always relate the tag position to the original DOM object (original web page structure). Thus the plugin will remove all tags and selections before saving a word selection or saving a tag. Tags also need to be loaded in a bottom up order so that their `range.startOffset` is always in relation to the original DOM. `StartOffset` is simply a position number of where the node (html element etc.) is located within the DOM tree-structure that starts with 0 (document root).