I'm writing a Chrome extension that captures the user text selection and sends the selected text to Google search.
manifest.json
{
"manifest_version": 2,
"name": "Selection Extension",
"description": "Search your selected text",
"version": "1.0",
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "Mark it!!"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content_script.js"]
}
]
content_script.js
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
if (request.method == "getSelection") {
sendResponse({data: window.getSelection().toString()});
} else {
sendResponse({});
}
});
background.js
function initBackground() {
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.sendMessage(tab.id, {method: "getSelection"}, function(response){
sendServiceRequest(response.data);
});
});
}
function sendServiceRequest(selectedText) {
var serviceCall = '=' + selectedText;
chrome.tabs.create({url: serviceCall});
}
initBackground();
This code works for selection in webpages (such as Gmail, Facebook, news.)
I also want to be able to get the selection in PDF, and Google Docs (viewed in the browser).
In these cases: window.getSelection returns an empty string...
Someone knows how to do it?
I'm writing a Chrome extension that captures the user text selection and sends the selected text to Google search.
manifest.json
{
"manifest_version": 2,
"name": "Selection Extension",
"description": "Search your selected text",
"version": "1.0",
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "Mark it!!"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content_script.js"]
}
]
content_script.js
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
if (request.method == "getSelection") {
sendResponse({data: window.getSelection().toString()});
} else {
sendResponse({});
}
});
background.js
function initBackground() {
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.sendMessage(tab.id, {method: "getSelection"}, function(response){
sendServiceRequest(response.data);
});
});
}
function sendServiceRequest(selectedText) {
var serviceCall = 'http://www.google./search?q=' + selectedText;
chrome.tabs.create({url: serviceCall});
}
initBackground();
This code works for selection in webpages (such as Gmail, Facebook, news.)
I also want to be able to get the selection in PDF, and Google Docs (viewed in the browser).
In these cases: window.getSelection returns an empty string...
Someone knows how to do it?
Share Improve this question edited Jan 3, 2017 at 8:57 Noam antebi asked Jan 1, 2017 at 21:22 Noam antebiNoam antebi 2713 silver badges9 bronze badges 5- Thanks you for this! I'll remove the executeScript. – Noam antebi Commented Jan 3, 2017 at 8:56
- 3 For google-docs there's an HTML elements with class "kix-selection-overlay". This class is the actual div that creates the selection look (i.e. teal background). But it's not connected in anyway to the div that contains the text... – Elad Tabak Commented Jan 3, 2017 at 12:34
- 1 Regarding PDF: stackoverflow./questions/15527095/… – Elad Tabak Commented Jan 3, 2017 at 12:35
-
@Makyen in such case minimal, plete and verifiable example is the only
window.getSelection().toString(). – Vitaly Zdanevich Commented Nov 21, 2017 at 14:29 - This video tutorial does pretty much exactly what you are tempting. – Olian04 Commented Nov 27, 2017 at 22:00
3 Answers
Reset to default 11Google Docs document does not really follow the normal ways of how a to access text on from a Extension. I have for this reason created a tool to work with Google Docs, which can be found here
This should enable you to:
//contentScript.js
var googleDocument = googleDocsUtil.getGoogleDocument();
console.log("The selected text is: " + googleDocument.selectedText);
You can get this from the context menu. I bet you'll be adding a context menu item anyway.
chrome.contextMenus.create({
id:"g-search",
title:"Search %s",
contexts:["selection"]
});
chrome.contextMenus.onClicked.addListener(function(sel){
console.log(sel.selectionText);
});
Thanks to Mr. Java Wolf answer.
I created a fork of his project, and then rewrite his project pletely to adopt it for my own needs. Core concepts were keeped, but now it is easier to use because it supports both IIFE and CJS.
So, here is google-docs-utils package:
- GitHub - https://github./Amaimersion/google-docs-utils
- NPM - https://www.npmjs./package/google-docs-utils
You can use it with Node.js or directly in browser:
- Node.js:
npm install google-docs-utils - Browser: https://unpkg./google-docs-utils@latest/dist/iife/index.js
Here is the code which solves your task using google-docs-utils package:
const linesData = GoogleDocsUtils.getSelection();
let selectionData = null;
for (const lineData of linesData) {
if (lineData) {
selectionData = lineData;
// we handle only single selection
break;
}
}
if (selectionData) {
console.log(selectionData.selectedText);
}