Develop Reference

chrome extension input value into input

I have problems while programing simple value input bot and do next input depending on what page outputs. In some class on page will be 1 It have to input 1 otherwise if it throws at me 0 I have to input 0, wich has to create value and put it into some input on page and click on button with specific id to submit value.
manifest.json
{
"manifest_version": 2,
"name": "bot",
"description": "bot",
"version": "1.0",
"background": {
"scripts": ["bg.js"]
},
"permissions": [
"activeTab",
"http://*/*"
]
}
bg.js
function checkForValidUrl(tabId, changeInfo, tab) {
if (tab.url.indexOf("cs") > -1) {
chrome.pageAction.show(tabId);
}
}
chrome.tabs.onUpdated.addListener(checkForValidUrl);
chrome.pageAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {code: "document.getElementById('input').value = '1';"});
});
thats all i put together but it doesn't work

Chrome extension message passing between content and background

I've been testing this for a few good hours, I've also taken a, known to work at the time, example. See here:
https://stackoverflow.com/a/27829709/2430488
Its just not working for me or I'm not sure how to test. I'm opening the developer tools, and also the extension developer tools, but nothing is being logged in either window.
The code I'm using:
manifest.json
{
"manifest_version": 2,
"name": "Some test",
"description": "https://stackoverflow.com/questions/27823740",
"version": "0",
"background": {
"scripts": [
"background.js"
]
},
"permissions": ["tabs", "<all_urls>"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["cont.js"]
}
]
}
cont.js
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
if (msg.message && (msg.message == "DIMENSION")) {
var dimension = getPageDiemension(document.documentElement);
console.log('Dimension:', dimension);
sendResponse(dimension);
}
return true;
});
getPageDiemension = function(currentDom){
return {
x: 0,
y: 0,
w: currentDom.scrollWidth,
h: currentDom.scrollHeight
}
}
background.js
getPageDimension = function (){
chrome.tabs.query({active: true, highlighted: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, { message: "DIMENSION" }, function(response){
if (response !== null) console.log('Response:', response);
else console.log('Response is null');
});
});
};
Please help, I really am not sure what I'm doing wrong, I've been looking at the documentation for the last few hours but I can't understand why is not working.
Thank you.

As rsanchez mentions, your background defines a function getPageDimension.
It is then never called, so your extension does exactly nothing. There doesn't seem to be any error, you just never do anything.
You need to bind a call to getPageDimension to some event, e.g. clicking a Browser Action.

Context menus in Chrome extensions

I've searched and searched and searched for a solution to this but every source I come across seems to assume I already have profound knowledge of Chrome extensions, even Google's help pages
I know the very basics of Chrome extensions and I made one with some basic content scripts. However, now I'm looking to make one that involves context menus.
Let's say when you highlight words and right-click them, you see the option Search '<highlighted words>' on Google and when clicked, it opens http://www.google.com/search?q=<highlighted words> in a new tab. I know this exists in Chrome and I'm sure there have been a billion extensions replicating it, but this is only an example for me to build off of.
How can I do this?

Script should look like this:
function getword(info,tab) {
console.log("Word " + info.selectionText + " was clicked.");
chrome.tabs.create({
url: "http://www.google.com/search?q=" + info.selectionText
});
}
chrome.contextMenus.create({
title: "Search: %s",
contexts:["selection"],
onclick: getword
});
And manifest.json:
{
"name": "App name",
"version": "1.0",
"manifest_version": 2,
"description": "Your description",
"permissions": [
"contextMenus"
],
"background": {
"scripts": ["script.js"]
}
}
Here you have how to load extension: http://developer.chrome.com/extensions/getstarted.html

The answer from Bartlomiej Szalach is too old. It will not work on Chrome Version 80.0.3987.163 (April 2020).
According to the documentation,
onclick: A function that is called back when the menu item is clicked. Event pages cannot use this; instead, they should register a listener for contextMenus.onClicked.
The background.js should be modified as follows:
const CONTEXT_MENU_ID = "MY_CONTEXT_MENU";
function getword(info,tab) {
if (info.menuItemId !== CONTEXT_MENU_ID) {
return;
}
console.log("Word " + info.selectionText + " was clicked.");
chrome.tabs.create({
url: "http://www.google.com/search?q=" + info.selectionText
});
}
chrome.contextMenus.create({
title: "Search: %s",
contexts:["selection"],
id: CONTEXT_MENU_ID
});
chrome.contextMenus.onClicked.addListener(getword)

Improving on ahnquan's answer so chrome.contextMenus.create isn't called on every background script invocation, and also encoding the highlighted text into URI so it doesn't break when it contains special characters, such as ;,/?:#&=+$.
Your background.js will look like:
chrome.runtime.onInstalled.addListener(function() {
chrome.contextMenus.create({
"title": 'Search Google for "%s"',
"contexts": ["selection"],
"id": "myContextMenuId"
});
});
chrome.contextMenus.onClicked.addListener(function(info, tab) {
chrome.tabs.create({
url: "http://www.google.com/search?q=" + encodeURIComponent(info.selectionText)
});
})
And manifest.json:
{
"manifest_version": 2,
"name": "App name",
"version": "1.0",
"permissions": ["contextMenus"],
"background": {
"scripts": ["background.js"],
"persistent": false
}
}

Manifest v3 is out so to improve on Lucas Mendonca's answer, you just change the manifest.json to:
{
"manifest_version": 3,
"name": "App name",
"version": "1.0",
"permissions": ["contextMenus"],
"background": {
"service_worker": "background.js",
"persistent": false
}
}

Get selected text in a chrome extension

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.com/#auto/fa/";
function onRequest(request, sender, sendResponse) {
text = "http://translate.google.com/#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?

You are making it a bit more complicated 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.com/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.com/#auto/fa/" + info.selectionText.trim()
})}};
//create context menu options. the 'on click' command 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);

Chrome-extension: Append functions to right click menu

How would I append functions to the right click menu in the browser? E.g something appended to the right click menu which does function dosomething() which is located in my extension.

I made simple extenstion using the contextMenu API - link Hope this works well as an example.
manifest.json -
{
"manifest_version": 2,
...
...
"permissions": [
"contextMenus",
"tabs"],
...
...
"background": {
"page": "background.html",
"scripts": ["main.js"]
}
}
main.js -
searchUrbanDict = function(word){
var query = word.selectionText;
chrome.tabs.create({url: "http://www.urbandictionary.com/define.php?term=" + query});
};
chrome.contextMenus.create({
title: "Search in UrbanDictionary",
contexts:["selection"], // ContextType
onclick: searchUrbanDict // A callback function
});
For more information on different context types - link

Found out how, using the contextmenu API https://developer.chrome.com/docs/extensions/reference/contextMenus/

Anurag-Sharma's answer updated for manifest v3:
manifest.json -
{
"name": "terapeak",
"description": "easy way to research ebay products",
"version": "1.0",
"manifest_version": 3,
"permissions": [
"contextMenus",
"tabs"
],
"background": {
"service_worker": "main.js"
}
}
main.js
searchTerapeak = function(word){
var query = word.selectionText;
chrome.tabs.create({url: "https://www.ebay.com/sh/research?dayRange=365&sorting=-avgsalesprice&tabName=SOLD&keywords="
+ query}); };
chrome.contextMenus.removeAll(function() {
chrome.contextMenus.create({
id: "1",
title: "Terapeak this!",
contexts:["selection"], // ContextType
}); })
chrome.contextMenus.onClicked.addListener(searchTerapeak);
Why you need to removeAll each time: Why does chrome.contextMenus create multiple entries?