JS - Chrome Extension - Getting selection

Question

A little issue while trying to develop a chrome extension. The target is simple and I know there are existing post on the matter but whatever I found did not work for me. It feels like what works in a normal script (html/js) does not work within the chrome extension.

I am trying to make a simple extension which on click on its icon will get the selection (at least text, if possible more info) but somehow it does not work. i get a selection Item but it is with an empty selection.

Here is the code. Manifest.json

{
  "manifest_version": 2,

  "name": "Paster",
  "description": "Bla",
  "version": "1.0",

  "browser_action": {
    "default_icon": "camera.png",
    "default_title": "Bla"
  },

  "background": {
    "page": "background.html"
  },

  "permissions": [
    "tabs",
    "activeTab",
    "https://ajax.googleapis.com/",
    "clipboardRead",
    "clipboardWrite"
  ]
}

background.html

<textarea id="temp_textarea_draft_paster"></textarea>
<div>BLA BLA BLA</div>
<script src="jquery-3.1.1.min.js"></script>
<script src="background.js"></script>

background.js

chrome.browserAction.onClicked.addListener(function() {
    getSelectionText()
});

getSelectionText = function (info, tab) {
    selection = window.getSelection();
    console.log(selection);
    alert('yeah' + selection);
};

If I open the dev console from background.html I get the console.log but with an empty selection, whatever I have selected. The alert pops up too but just with 'yeah'.

if I go to the chrome-extensions://ext-id/background.html page and select a text there and click on the button, it works with a selection including its data... How come ? It feels like the extension does not get the selection from the tabs, just from the background.html page.

Refer this http://stackoverflow.com/questions/12424631/get-selected-text-in-a-chrome-extension it's implemented using `chrome contextMenu api` — nivas, Feb 16 '17 at 08:50
Read the docs. https://developer.chrome.com/extensions/overview#arch — Daniel Herr, Feb 17 '17 at 01:13
I would suggest that you read the [Chrome extension overview](https://developer.chrome.com/extensions/overview) (and perhaps along with the pages linked from the overview). The [architecture section](https://developer.chrome.com/extensions/overview#arch) has overall architecture information which should help your understanding of how things are generally organized/done. You will probably also want to read [Content Scripts](https://developer.chrome.com/extensions/content_scripts), and [Message Passing](https://developer.chrome.com/extensions/messaging). — Makyen, Feb 18 '17 at 00:03

score 2 · Accepted Answer · answered Feb 21 '17 at 16:35

I found the solution after quite a lot of research. Yes reading the documentation (again) as suggested helped but I still think it is not too clearly explained. However if someone gets the same issue it has to be understood that background.js is only linked to background.html but not to the content of the page been shown on the active tab.

On the contrary the content script is being 'added' or 'applied' inside the active page and therefor can use functions such as the window.getSelection().

Steps are as followed:

In manifest.json refer to content_scripts that you want to be 'inserted' inside the active page as well as to the relevant "matches". (which page it affects, e.g. "".

Your background page can then send a message (https://developer.chrome.com/extensions/messaging) to the content script when the browser action is triggered (click on the icon) and the content script will listen to this message and reply with the getSelection results.

JS - Chrome Extension - Getting selection

1 Answers1