How to create a chrome plugin/extensions with Bubble button (floating property)? - javascript

I am developing a chrome extensions, so that this plugin used to send the selected text from a site to a server and return the text back to client.
How can I make my plugin to float on the site, once the user select any text then my plugin must appear beside the selected text (Bubble), exactly like google translation plugin, which appears immediately when a user select some text.
I attached some picture to explain what I want exactly!

You can read out the current element where you select the text and from there you can put your icon with some distance.
Here you can find out how to get the current element:
How can I get the DOM element which contains the current selection?
With jQuery, you can easily put your icon next to the start of the selection. I have not tried id but this is how I would do that.

Related

JavaScript Background Text Selection

I have a contenteditable container and I would like to accomplish a similar effect that Google Docs has when you insert a link - via typing in a panel and keep the original text selected:
desired effect(Google Docs)
However, I don't seem to be able to keep the selection while focusing on the new panel without changing the background ie whenever I focus on the new input, the original text in the contenteditable loses focus(the cursor in the contenteditable is not the real one):
current state(my contenteditable)
This 2016 answer says that Google Docs uses <iframe> to display the background color, but I inspected the elements in my latest docs and I didn't find any iframes/spans specifically for a highlighted background color.(Perhaps they're using a different method?) I also noticed that this is possible in other scenarios: when you prompt a dialog/click on the inspect console, the existing selected text will not be lost and its background changes to a color similar to what Google Docs uses:
Is it possible to keep an "in-the-background-gray-selection" while inputting in another panel? If not, why could the selection be kept when inputting into a dialog? I feel like the answer is obvious but I just missed an important attribute.

It is possible to manipulate the 'autocomplete browser data' in a text field?

Today I read some posts about the 'autocomplete' browser generated in the text fields, and i was wondering if it's possible to manipulate those results with jQuery, like highlight some part of the results or change the bg color (not that yellow one) or something like that.
I'm not talking about any plug-in 'autocomplete'.
Here's a example of what I'm talking about (Double click inside the text input and probably will show up some 'emails')
The browser handles that auto complete. Your page can't edit it. I for example, have it disabled so I don't see anything in the drop down list.
Sort of related:
You can disable it by adding the autocomplete="off" property to the input element.

How do I simulate browser 'select-all' in GWT

I've got a GWT application that displays largely text spans. I'd like to programatically select all of the text currently in the browser window (similar to pressing from the browser menu).
Can anybody give me a pointer to this?
cheers,
Ian
The select all function is not available for the entire DOM, however there is a selectAll message for TextBoxBase, so what is commonly used for large quantities of text where you automatically want to do a select all is to put the text inside a TextArea. If you don't like the look you can remove the borders from the text area and set it to read-only so that it would appear as just plain text.

Is it possible to detect text selection from a search with Ctrl+F?

How can I detect text selection from a text search using the browsers Ctrl+F.
For example, I want to make a FAQ, where are the items are closed (to remove clutter), and clicking them opens the text within them, but at the same time I don't want Ctrl+F to be broken.
So I'm thinking, is there a way for JavaScript to detect that I have searched for some text within a non visible (but selectable) block of text, and to automatically open it.
Is it even possible to detect text selection from a search with Ctrl+F? If so, how?
A more specific example: I have a div with the id of "one" and a div with the id of "two"
both have their own text:
<div id="one">Google is a search engine</div>
<div id="two">Stackoverflow users are very informative</div>
both have their text hidden from view but still selectable, but not by mouse (using margins or covering)
So a user searches for "Stackoverflow" on this page, I want to trigger a JavaScript function upon the search selection (how??), and I need the function that runs to know which div, with what ID has some text selected.
This is browser dependent. In Chrome (maybe Webkit in general?), it seems to use a selection that is separate from the one in the DOM API.
However, Firefox will use the DOM selection when highlighting text from a Ctrl+F.
For example, go to google.com, and type this in Firebug:
window.getSelection().toString()
This will return ""
Now do a Ctrl+F, type in Privacy, press enter.
Enter the above command again in Firebug, and you will get:
"Privacy"
As far as I know, there is no way. The content of the search field entirely under the control of the browser, and you can't access this from within the page.
What you might be able to do however, is detect a selection in the document and react to that. This will however probably produce many false positives (because you can't distinguish between an ordinary selection and a search), and it won't work with browsers that do not use an ordinary selection to highlight search results.
More info on detecting selections: Introduction to Range on Quirksmode
Why not make the FAQ search friendly and use a service for that. Google Custom Search Engine might be a good place to start.

Where to find on-hover or on-select dictionaries for web pages?

I would like to add to my site a on-hover/on-select dictionary. What are they usually called, so I can search on the web?
I am thinking in a piece of javascript code that detects which word the mouse is currently hovering/selecting and after some time it shows a baloon with the hovered word definition.
Using onMouseover for this could be very annoying to your users. The NYTimes website uses the selected text (highlighted by double-clicking a word or dragging to select) to display a bubble that, when clicked, opens a popup with a query on that word or term.
See http://graphics8.nytimes.com/js/common/screen/altClickToSearch.js.
Are you thinking of tooltips that display the definition? You can achieve this with a style sheet by adding alt tags and adding a style="cursor:help" attribute.
Alternatively you could use a tooltip library like these jQuery ones.

Categories