chrome extension input value into input - javascript

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

Related

How to activate/deactivate chrome extension with keyboard shortcut (development)

I'm trying to set a keyboard shortcut to active/deactivate my Chrome extension that I'm developing. The Chrome extension just consists of a "content_script" that runs on certain sites. I want it to fully activate/deactivate the extension, like if I were to disable it via Chrome://extensions.
In my search for answers, I saw a lot of suggestions to add "_execute_browser_action" to my manifest.json, but I think this command requires a listener that needs to be set up in background.js (correct me if I'm wrong). I want to avoid a background.js if possible, as I want to keep this extension short and sweet.
Here is my manifest.json:
{
"manifest_version": 2,
"name": "foo",
"description": "foo",
"version": "0.1.0",
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+8"
}
}
},
"content_scripts": [{
"js": ["./dist/bundle.js"],
"matches": [ ...certain sites... ]
}],
"icons": {
"16": "/icons/logo16.png",
"32": "/icons/logo32.png",
"48": "/icons/logo48.png",
"128": "/icons/logo128.png"
}
}
With this manifest.json, the shortcut shows up in Chrome://extensions/shortcuts, but the shortcut does nothing. When I press the combination, nothing happens. Even when I refresh the page, reload extension, re-bundle, restart Chrome, etc.
How should I go about adding this keyboard shortcut?
Also, I'm using Babel/Webpack, if that helps.
I ended up solving my own issue. Updating here in case it helps anyone else.
It turns out a background.js was exactly what I was looking for. My background script sets a chrome.storage API field, triggered by browserAction, which my content_script then ingests to toggle it on/off. Then the page is refreshed to update the page html. (Inspiration taken from here)
background.js:
var x = true
enableBrowserAction()
function disableBrowserAction() {
chrome.storage.local.set({enabled: false})
}
function enableBrowserAction() {
chrome.storage.local.set({enabled: true})
}
function updateState() {
if (x == false) {
x = true
enableBrowserAction()
} else {
x = false
disableBrowserAction()
}
chrome.tabs.reload()
}
chrome.browserAction.onClicked.addListener(updateState)
manifest.json (with only the necessary fields):
{
"manifest_version": 2,
"browser_action": {},
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+8"
}
}
},
"permissions": [
"storage"
],
"background": {
"scripts": ["background.js"]
},
"content_scripts": [{
"js": ["./dist/bundle.js"],
"matches": [ ...certain sites... ]
}]
}
content_script (entry for bundle.js):
import ServiceHandler from './ServiceHandler.js'
chrome.storage.local.get('enabled', data => {
if (data.enabled) {
const sh = new ServiceHandler()
sh.execute()
}
})

Chrome Extension Icon Toggle Only Updates Once

I have a toggling function, in background.js: every time a user clicks the icon, if the extension was turned off, it is turned on, and if extension was turned on, is now off, and the icon swaps to reveal which of those states it's in. "image1" revealing that it's turned off and "image2" revealing it's turned on. However, the function only updates icon URL once when clicked, despite the fact that it continually fires from "onclicked" event as evidenced by chrome dev console. Any ideas?
Here is what's in background.js:
var off = true;
function updateIcon() {
if (off == true) {
off = false;
chrome.browserAction.setIcon({path:"image1.png"});
console.log(off);
}
else {
off = true;
chrome.browserAction.setIcon({path:"image2.png"});
console.log(off);
}
return;
}
chrome.browserAction.onClicked.addListener(updateIcon);
updateIcon();
And my manifest.json file:
{
"background": {
"scripts": [ "jquery-3.1.1.min.js", "background.js" ]
},
"browser_action": {
"default_icon": "image1.png"
},
"content_scripts": [ {
"css": [ "style.css" ],
"js": [ "jquery-3.1.1.min.js", "content.js"],
"matches": [ "https://www.facebook.com/*", "http://www.facebook.com/*", "http://facebook.com/*", "https://facebook.com/*"],
"all_frames" : true,
"run_at" : "document_start"
} ],
"icons" : {
"64" : "image1.png",
"64" : "image2.png"
},
"description": "Blah blah blah",
"manifest_version": 2,
"name": "Working Title",
"permissions": [ "activeTab", "https://www.facebook.com/*", "http://www.facebook.com/*" ],
"update_url": "https://clients2.google.com/service/update2/crx",
"version": "1.0",
"web_accessible_resources": [ "images/*.png" ]
}
I don't know if there is something wrong with your browser or your computer, but I tested all the code onto different files and it seems to work fine. Unless there is anything clashing with the background.js from the content.js, it isn't the code that's the problem.
Icons were not the proper size of 128 x 128. Working now. Thx!

execCommand not working in chrome extension

I am using paste execCommand to get the system clipboard data.
document.execCommand("Paste", null, null);
var paste = pasteTarget.innerText;
I am trying to read data in every one sec delay, but pasteTarget.innerText is always returning null.
I am executing the above code in the handle message from native client. It seems this code is not executing on background page. How to execute the code in background page?
I am using the pepper API example(nacl_sdk\pepper_35\examples\api\input_event).
common.js
function getClipboard() {
var pasteTarget = document.createElement("div");
pasteTarget.contentEditable = true;
var actElem = document.activeElement.appendChild(pasteTarget).parentNode;
pasteTarget.focus();
document.execCommand("Paste", null, null);
var paste = pasteTarget.innerText;
console.log("paste = " + paste);
actElem.removeChild(pasteTarget);
return paste;
};
Whenever right button is clicked I am trying to get the clipboard data. But always null is returned.
manifest.json
{
"name": "Input Event",
"version": "35.0.1916.114",
"minimum_chrome_version": "35.0.1916.114",
"manifest_version": 2,
"description": "Input Event Example",
"offline_enabled": true,
"icons": {
"128": "icon128.png"
},
"app": {
"background": {
"scripts": ["background.js"]
}
},
"key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCMN716Qyu0l2EHNFqIJVqVysFcTR6urqhaGGqW4UK7slBaURz9+Sb1b4Ot5P1uQNE5c+CTU5Vu61wpqmSqMMxqHLWdPPMh8uRlyctsb2cxWwG6XoGSvpX29NsQVUFXd4v2tkJm3G9t+V0X8TYskrvWQmnyOW8OEIDvrBhUEfFxWQIDAQAB",
"oauth2": {
"client_id": "903965034255.apps.googleusercontent.com",
"scopes": ["https://www.googleapis.com/auth/drive"]
},
"permissions": [
"clipboardWrite",
"clipboardRead"
]
}

"else if" condition not working in Chrome extension

I'm trying to set different actions for a Chrome extension based on the type of selection. Maybe I'm reading the documentation wrong, but I can't figure out what isn't working here.
manifest.json
{
"background": {
"scripts": [ "background2.js" ]
},
"description": "Creates a context menu option which copies the selected address into a new Gmail compose window.",
"manifest_version": 2,
"name": "New Gmail Window",
"permissions": [ "tabs", "contextMenus" ],
"version": "0.1"
}
background.js
chrome.contextMenus.create({
title: "Send a New Email",
contexts:["link", "selection"],
onclick: checkType,
});
function checkType(info,tab) {
if (info.linkUrl.substring(0, 7) === "mailto:") { //The "if" works as expected //
chrome.windows.create({
url:"https://mail.google.com/mail/?ui=2&view=cm&fs=1&tf=1&shva=1&to=" +info.linkUrl.substr(7),
width:640,
height:700,
focused:true,
type:"popup",
});
console.log("The linked emails work");
}
else if (info.selectionText.containsNode('a',false)) { //I want to look for an <a> tag that isn't working
console.log("this worked");
}
else console.log("nothing to send");
}
Thanks for any help.

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);

Categories

Resources