Chrome extension: create div on text highlight

Question

I'm looking to create a create a chrome extension which gets the currently highlighted text and creates a div just under the text, like the chrome dictionary app. Does anyone know what sort of popup this is, or how it is achieved? Thanks! Tom

score 1 · Answer 1 · answered Aug 25 '12 at 08:22

There will be two HTMLs, a popup.html - the view, and a background.html - that will be for routing, calculations, etc., the base functionality of your Extension.
As an attempt to answer your question, the way you communicate from one html to other is like:

chrome.extension.sendRequest({'action' : 'function_name', 'url' : 'ajax_url'},
    function(response) {
        callback_function(response);                 
    }); 
});

But since you want to deal with a div in page DOM, I think we use posetMessage

yourDoc.postMessage(message, 'domain_url');

score 0 · Answer 2 · edited May 23 '17 at 12:09

0

Already answered, Just some of them...

and more for reading...

Good luck in your extension!

edited May 23 '17 at 12:09

Community

1
1

answered Aug 24 '12 at 18:02

gmo

8,860
3
40
51

Hi, sorry, I should have been clearer; its the popup box I'm struggling to create, not getting the text. I was wondering what sort of extension this would be. Should I be looking at background extensions, and if I tried to create my 'popup' by injecting a div tag into the highlighted page (which appears to be how it is achieved), how could I communicate with the page as opposed to the extension? – Tom Kail Aug 24 '12 at 18:13
@gmo, Its about chrome extension & DOM, not about jQuery and your HTML DOM, etc. As an answer for communication, as per my knowledge, there are 2 `html`s (background.html & popup.html). Both can have JavaScript that can communicate between each other per Chrome API. Check the answer. – Om Shankar Aug 25 '12 at 08:11

Chrome extension: create div on text highlight

2 Answers2

Linked