I am developing a chrome extension and I am trying to output the selected text on the tab in a textarea inside the plugin.
The function to get the selected text works very well but I can't set the value to the textarea element inside the plugin.
Question: How do I correctly store the value to be able to then pass it to the textarea with data-binding?
HTML:
<div>
<p>Here will appear the selected text :</p>
<textarea name="selectedText" id="selectedText" [(ngModel)]="selectedText"></textarea>
<button (click)="getSelectedText()">Get the selected text</button>
</div>
TS:
export class CaptureComponent {
selectedText = '';
getSelectedText() {
chrome.tabs.executeScript( {
code: 'window.getSelection().toString();'
}, function(selection) {
this.selectedText = selection[0];
});
}
}
The selection[0] is working fine so I guess that the way I am trying to store the data is not correct, but I can't seem to find what to change it to.
In your current approach, this does not refer to your component.
Change your callback to use an arrow function to keep the scope:
getSelectedText() {
chrome.tabs.executeScript( {
code: 'window.getSelection().toString();'
}, (selection) => {
this.selectedText = selection[0];
});
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments