I wanna make an extension that takes the selected text and searches it in google translate but I can't figure out how to get the selected text.

Here is my manifest.json

{
"manifest_version": 2, 
"name": "Saeed Translate",
"version": "1",
"description": "Saeed Translate for Chrome",
 "icons": {
    "16": "icon.png"
  },
"content_scripts": [ {
      "all_frames": true,
      "js": [ "content_script.js" ],
      "matches": [ "http://*/*", "https://*/*" ],
      "run_at": "document_start"
   } ],
"background": {
    "scripts": ["background.js"]
  },
"permissions": [
"contextMenus",
"background",
"tabs"
]

}

and my background.js file

var text = "/";
function onRequest(request, sender, sendResponse) {
   text = "/";
   text = text + request.action.toString();

 sendResponse({});
};

chrome.extension.onRequest.addListener(onRequest);
chrome.contextMenus.onClicked.addListener(function(tab) {
  chrome.tabs.create({url:text});
});
chrome.contextMenus.create({title:"Translate '%s'",contexts: ["selection"]});

and my content_script.js file

var sel = window.getSelection();
var selectedText = sel.toString();
chrome.extension.sendRequest({action: selectedText}, function(response) {
  console.log('Start action sent');  
});

How do I get the selected text?

I wanna make an extension that takes the selected text and searches it in google translate but I can't figure out how to get the selected text.

Here is my manifest.json

{
"manifest_version": 2, 
"name": "Saeed Translate",
"version": "1",
"description": "Saeed Translate for Chrome",
 "icons": {
    "16": "icon.png"
  },
"content_scripts": [ {
      "all_frames": true,
      "js": [ "content_script.js" ],
      "matches": [ "http://*/*", "https://*/*" ],
      "run_at": "document_start"
   } ],
"background": {
    "scripts": ["background.js"]
  },
"permissions": [
"contextMenus",
"background",
"tabs"
]

}

and my background.js file

var text = "http://translate.google./#auto/fa/";
function onRequest(request, sender, sendResponse) {
   text = "http://translate.google./#auto/fa/";
   text = text + request.action.toString();

 sendResponse({});
};

chrome.extension.onRequest.addListener(onRequest);
chrome.contextMenus.onClicked.addListener(function(tab) {
  chrome.tabs.create({url:text});
});
chrome.contextMenus.create({title:"Translate '%s'",contexts: ["selection"]});

and my content_script.js file

var sel = window.getSelection();
var selectedText = sel.toString();
chrome.extension.sendRequest({action: selectedText}, function(response) {
  console.log('Start action sent');  
});

How do I get the selected text?

• javascript
• google-chrome
• google-chrome-extension

• What is actually being sent? Is there an error message? Hard to tell if you don't give details about what's not working – Ruan Mendes Commented Sep 14, 2012 at 17:32
• Read the docs. Specifically the selectionText property: developer.chrome./extensions/… – Rob W Commented Sep 14, 2012 at 17:45
• problem is that the selectedText in content_script.js is actually empty – star shine Commented Sep 14, 2012 at 17:53
• @starshine Your onClicked event listeners makes no sense, read the docs to see how to discover the proper way to implement it: developer.chrome./extensions/… – Rob W Commented Sep 15, 2012 at 9:15
• @RobW that part of code works fine. i tested that part. so far the only problem is i can't take the highlighted text and use it. – star shine Commented Sep 15, 2012 at 20:51

2 Answers 2

You are making it a bit more plicated than it really is. You don't need to use a message between the content script and background page because the contextMenus.create method already can capture selected text. Try adjusting your creations script to something like:

chrome.contextMenus.create({title:"Translate '%s'",contexts: ["all"], "onclick": onRequest});

Then adjust your function to simply get the info.selectionText:

function onRequest(info, tab) {
var selection = info.selectionText;
//do something with the selection
};

Please note if you want to remotely access an external site like google translate you may need to adjust your permissions settings.

I would note - this is no longer valid response if you are moving to manifest version 3. Manifest version 3 adds the concept of "service workers". https://developer.chrome./docs/extensions/mv3/intro/mv3-migration/

You have to update several things, but the basic concept is the same.

manifest.json

"name": "Name of Extension",
"version": "1.0",
"manifest_version": 3,
"description": "Description of Extension",
"permissions": [
      "contextMenus",
      "tabs",
      "activeTab"
],
"background": {
    "service_worker": "background.js",
    "type": "module"
},

background.js

//Setting up the function to open the new tab
function newTab(info,tab)
{
  const { menuItemId } = info

  if (menuItemId === 'anyNameWillDo'){
    chrome.tabs.create({
      url: "http://translate.google./#auto/fa/" + info.selectionText.trim()
    })}};

//create context menu options.  the 'on click' mand is no longer valid in manifest version 3

chrome.contextMenus.create({
  title: "Title of Option",
  id: "anyNameWillDo",
  contexts: ["selection"]
});


//This tells the context menu what function to run when the option is selected

chrome.contextMenus.onClicked.addListener(newTab);