Hi,

I tried to write my first plugin but I have problem and I can't solve it.
I wanna get selected text from active tab to default plugin file popup.html

Could you give me some advice how to get access into document.getSelection (active tab) from popup.html ?

PS: Sorry for my English

Only content scripts can access tab/page content. So your popup.html needs to send/receive messages to/from a content script.

1. Prepare the manifest to include a content script

Code:

   "content_scripts": [ {
      "all_frames": true,
      "js": [ "content.js" ],
      "matches": [ "http://*/*", "https://*/*" ],
      "run_at": "document_end"
   } ],

2. Create content.js and add a listener for messages coming from popup.html. This listener will then send the selection back with sendResponse

Code:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    var data = window.getSelection().toString();
    sendResponse(data);
});

3. Send a message from popup.html and react on response

Code:

chrome.tabs.sendRequest(tab.id, 'getSelection', sendRequestCallbackHandler);

function sendRequestCallbackHandler(response) {
   // response contains the selected text
}

devnull69 thank you for the answer.
Now i understand it, but still i have one problem.
How can i use "response.data" outside "sendRequestCallbackHandler" ?
I've tried to save it in localstorage but it isn't visible in "sendRequestCallbackHandler" :/

Ahem ... you can do anything you want with response (it's just "response" and not "response.data") inside sendRequestCallbackHandler. That's what callbacks are for. Either put it somewhere on the popup.html page, store it in some global variable or in localStorage (mind the upper case S!).

Maybe I'll show the code to avoid misunderstand.

My popup file:

Code:

      var tid = 0;
      var text = "";

      chrome.tabs.getSelected(null, getSelectedCallbackHandler);
      
      function getSelectedCallbackHandler(tab) {
      
          tid = tab.id;
      }
      
      document.write(tid);
      
      chrome.tabs.sendRequest(tid, 'getSelection', sendRequestCallbackHandler);

      function sendRequestCallbackHandler(response) {
      
          text = response;
      }

      document.write(text);

Let's focus on the first part i.e. getSelectedCallbackHandler().
If I inside it write "document.write(tid)" I'll see a number of the tab.
But if i try "document.write(tid)" after this function I'll see value "0".

I'm sure that the reason of this problem is my very very low knowledge of javascript (uh... beginnings are hard ).

First of all ... get rid off document.write. I know it is common in a lot of online tutorials and older books, but it's deprecated. You should really use DOM oriented methods or maybe innerHTML of an element to attach new elements to the existing DOM.

Nevertheless, your problem is related to a general misunderstanding of asynchronous threads and callbacks in Javascript. If you start an asynchronous thread like sendRequest or getSelected, your normal program flow will continue without waiting for the asynchronous calls to end. That's why you don't get any results from their calls outside of the callbacks. Those callbacks are automatically being called right after the asynchronous call finished. So inside the callbacks you can react on the results of the original asynchronous calls. Any other action that depends on those results must either be done inside the callbacks or after the callbacks finished (maybe you can make visible an additional button from inside the callback. Clicking the button will then only be possible after the callback finished).