# Problem with window.getSelection

**URL:** <https://discourse.mozilla.org/t/problem-with-window-getselection/70452>\
**Category:** Development\
**Tags:** webextensions-api\
**Created:** [November 12, 2020, 2:48pm UTC](https://discourse.mozilla.org/t/problem-with-window-getselection/70452 "2020-11-12T14:48:55Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![msaroff](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/msaroff/32/20303_2.png) [@msaroff](https://discourse.mozilla.org/u/msaroff)\
**Post date:** [November 12, 2020, 2:48pm UTC](https://discourse.mozilla.org/t/problem-with-window-getselection/70452/1 "2020-11-12T14:48:55Z")

</div>

About a week ago, some sort of update has broken my web extension, [bbCode for Web Extensions](https://addons.mozilla.org/en-US/firefox/addon/bbcodewebex) (bbCodeWebEx).

While doing something like adding tags to a piece of text still works just fine in compose mode (though it serves no purpose there, because you cannot add tags directly), in HTML editing mode, it is not picking up the selected text.

Specifically, if I highlight a text, and right click to add a tag, this line of code is supposed to, and has until about a week ago, get the value of the selected text:

`let currentSelection = window.getSelection().toString().trim();`

Gives me the selected text in the compose window, and on other websites, but it gives me ​`<empty string>`​ in the HTML editing window.

Anyone know what might be causing this or if there might be a work around?

Also, am I the only one who thinks that chasing Google’s regular changes that brake stuff is a major PITA?

---

<div class="post-metadata">

**Author:** ![freaktechnik](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/freaktechnik/32/37766_2.png) [@freaktechnik](https://discourse.mozilla.org/u/freaktechnik)\
**Post date:** [November 12, 2020, 5:38pm UTC](https://discourse.mozilla.org/t/problem-with-window-getselection/70452/2 "2020-11-12T17:38:42Z")

</div>

You are referring to google and a HTML editing window? What exactly are you referring to? A specific editor?

---

<div class="post-metadata">

**Author:** ![msaroff](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/msaroff/32/20303_2.png) [@msaroff](https://discourse.mozilla.org/u/msaroff)\
**Post date:** [November 12, 2020, 6:27pm UTC](https://discourse.mozilla.org/t/problem-with-window-getselection/70452/3 "2020-11-12T18:27:45Z")

</div>

Google Blogger ([Blogspot.com](http://Blogspot.com)) has an editor that has a WYSIWYG mode, and a mode in which one can edit the HTML code directly.

They updated both earlier this year, and in the past week, some update to their HTML editor appears to have broken `window.getSelection`.

I continues to work in their WYSIWYG mode, so a recent update on their HTML mode broke something.

I am looking for one of two things:

- A good work around, I am looking at using `clickedElement.selectionStart` among other things.
- What exactly Google did to break the page, which I cannot determine.

Since I have not ported this extension to Chrome, I cannot determine if the problem is Goggle is not playing nice with WebExtensions, or if Google is not playing nice with Firefox.

---

<div class="post-metadata">

**Author:** ![jscher2000](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/jscher2000/32/28202_2.png) [@jscher2000](https://discourse.mozilla.org/u/jscher2000)\
**Post date:** [November 12, 2020, 9:25pm UTC](https://discourse.mozilla.org/t/problem-with-window-getselection/70452/4 "2020-11-12T21:25:05Z")

</div>

Maybe the selection is in a textarea. You probably have a different code path for textarea controls.

---

<div class="post-metadata">

**Author:** ![msaroff](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/msaroff/32/20303_2.png) [@msaroff](https://discourse.mozilla.org/u/msaroff)\
**Post date:** [November 13, 2020, 7:35pm UTC](https://discourse.mozilla.org/t/problem-with-window-getselection/70452/5 "2020-11-13T19:35:44Z")

</div>

I actually do have a different code path for non-https text areas.

I would think that this would be a major change though, and they just rolled whatever this is out about 2 weeks ago in a silent update.

When they rolled out the new blogger editor I actually had to switch away from that.

I will check out the text area possibility though.

---

<div class="post-metadata">

**Author:** ![msaroff](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/msaroff/32/20303_2.png) [@msaroff](https://discourse.mozilla.org/u/msaroff)\
**Post date:** [November 13, 2020, 8:52pm UTC](https://discourse.mozilla.org/t/problem-with-window-getselection/70452/6 "2020-11-13T20:52:26Z")

</div>

Something interesting digging through the console log, while  
`let currentSelection = window.getSelection().toString().trim();`  
gives no output,  
`let currentSelection = window.getSelection();`  
gives the following output:

```
Selection
anchorNode: <div style="overflow: hidden; positi…top: 4px; left: 1107px;">
anchorOffset: 0
caretBidiLevel: 0
focusNode: <div style="overflow: hidden; positi…top: 4px; left: 1107px;">
focusOffset: 0
isCollapsed: true
rangeCount: 1
type: "Caret"
<prototype>: SelectionPrototype { getRangeAt: getRangeAt(), addRange: addRange(), removeRange: removeRange(), … }

```

It looks like there is some sort of obfuscation on the page.

Why oh why does Google make everything so damn complex.

---

<div class="post-metadata">

**Author:** ![msaroff](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/msaroff/32/20303_2.png) [@msaroff](https://discourse.mozilla.org/u/msaroff)\
**Post date:** [November 19, 2020, 9:35pm UTC](https://discourse.mozilla.org/t/problem-with-window-getselection/70452/7 "2020-11-19T21:35:04Z")

</div>

Ok, I’ve sound a solution that a Firefox screen reader uses. It will read the text, but I’m unclear as to what is happening at a programming level.

[Native Text to Speech -TTS](https://addons.mozilla.org/en-US/firefox/addon/native-text-to-speech-tts/) uses the following call to get selected text:

```auto
browser.contextMenus.onClicked.addListener(function(info, tab) {
	tabId = tab.id;
	menuId = info.menuItemId;
	console.log(menuId)
	texT = info.selectionText;
	browser.tabs.sendMessage(
		tabId,
		{
			command: "test"
		}
	).catch(function(aaa){
		if (aaa.toString().includes("connection") == true){
			let speak = browser.tabs.executeScript({
				file: "data/speak.js",
				//frameId: true
			});
			speak.then(onExecuted)
		}else{
			onExecuted()
		}
	})
});

```

And this does read the selected text in the HTML edit window.

I don’t quite get the notation (I’m a lousy programmer), so I’m not sure how this works, and if there would be a drop in to replace `window.getSelection` in my extension.

I use:

```auto
		browser.runtime.onMessage.addListener(function(commandString) {
			CommandParse(commandString)}); 

```

To get my program running.

I’ve forgotten half of what I knew about JavaScript in the past year.

---

<div class="post-metadata">

**Author:** ![freaktechnik](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/freaktechnik/32/37766_2.png) [@freaktechnik](https://discourse.mozilla.org/u/freaktechnik)\
**Post date:** [November 20, 2020, 2:43am UTC](https://discourse.mozilla.org/t/problem-with-window-getselection/70452/8 "2020-11-20T02:43:56Z")

</div>

This uses the “selectionText” you get from the context menu API, which is passed whenever a selection is right-clicked:

> **[menus.OnClickData - Mozilla | MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus/OnClickData)**
>
> Information passed to the menus.onClicked event listener when a menu item is clicked.

---

<div class="post-metadata">

**Author:** ![msaroff](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/msaroff/32/20303_2.png) [@msaroff](https://discourse.mozilla.org/u/msaroff)\
**Post date:** [November 20, 2020, 3:04am UTC](https://discourse.mozilla.org/t/problem-with-window-getselection/70452/9 "2020-11-20T03:04:45Z")

</div>

So, I would attach this to the listener, and pass the variable to my command parsing function.

Got it.

Thanks.

---

<div class="post-metadata">

**Author:** ![msaroff](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/msaroff/32/20303_2.png) [@msaroff](https://discourse.mozilla.org/u/msaroff)\
**Post date:** [November 23, 2020, 2:27am UTC](https://discourse.mozilla.org/t/problem-with-window-getselection/70452/10 "2020-11-23T02:27:31Z")

</div>

I’ve found a solution that works, it appears that  
`txtcont = document.activeElement.value;`  
gets the text value.

One odd thing is that it inserts a zero width space `&#8203;`

So this:

 ![](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/4/8/486944e967f3fe7b7f4c5c3a8600b4d3a0157809.png)

Becomes this when adding the `[b]` tag:

 ![](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/f/d/fdb1518dc1ada2fb1b38011398d48efc68720da2.png)

The red dot is the zero width space.