I am developing a very simple extension for Google Chrome which sets a badge text when the user presses the browser action icon. Here is the background.js:
chrome.browserAction.onClicked.addListener(function() {
chrome.browserAction.setBadgeText({text: "Ko"});});
When I load the extension for the first time in chrome://extensions there's no problem and works properly, but if I close and open the browser and then I go to a webpage the Badge text appears automatically even when I have not pressed the browser action icon as you can see in the image:
This is my manifest.json:
{
"name": "Hello Extensions",
"description": "Base level extension",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_icon": "check-circle-green-512.png"
},
"background": {
"scripts":["background.js"]
},
"permissions": ["storage", "alarms", "notifications"]
}
Thanks for the help and greetings.
The browserAction button is common for all opened tabs and windows. When you set/change the badge text using setBadgeText this effect displayed on all tabs in all chrome windows. If you want a separate badge text for each window you will need to manage it at your own. See a simple example below that changes the badge text on tab onActivated event:
chrome.tabs.onActivated.addListener(function(activeInfo) {
console.log(activeInfo.tabId);
chrome.browserAction.setBadgeText({text: "T"+activeInfo.tabId});
});
Related
I know it's possible to show a popup when clicking on the extension icon (top right of the browser, to the right of the address bar): chrome.browserAction
Also here is how to create an Options page, that will often have an URL like:
chrome-extension://ofodsfyizzsaaahskdhfsdffffdsf/options.html
Question: how is it possible to make that a single click on the extension icon opens the options.html page in a new tab?
You can use something like this in your background script:
background.js
chrome.browserAction.setPopup({popup:''}); //disable browserAction's popup
chrome.browserAction.onClicked.addListener(()=>{
chrome.tabs.create({url:'options.html'});
});
manifest.json
...
"browser_action": {
"default_title": "Options"
},
"background": {
"scripts": ["background.js"],
"persistent": true
}
...
I have a working extension that allows me to check market prices of steam items.
You basically click the extension and then a prompt box opens and the item is inputted there.
It then opens up a new windows with the search query, displaying the market prices.
I would like to tweak it by displaying the list of items as a popup from the extension, like the default popup.
For that I need to know some stuff:
1) How do I call that popup function within the js code?
2) How do I open it so that it shows only what I need? like this, instead of showing the whole site.
Here are the codes:
manifest:
"manifest_version": 2,
"name": "CS:GO checker",
"description": "This extension checks market prices",
"version": "1.1337",
"permissions": [
"http://steamcommunity.com/market/"
],
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["popup.js"],
"persistent": false
}
popup.js:
function test ()
{
var userInput=prompt("Please enter your item below:");
if (userInput!=null)
{
newwindow=window.open("http://steamcommunity.com/market/search?q="+userInput,userInput,'height=800,width=670');
if (window.focus) {newwindow.focus()}
return false;
}
}
chrome.browserAction.onClicked.addListener(test);
Thanks in advance!
edit: I forgot to mention that I'm very new to javascript, so if you have an answer, try to explain it very carefully to me that I could understand.
I'm working on a Google Chrome extension, and I essentially want the browser action to act as an on/off switch. Whenever it is "on", it will have a certain icon and the script is executed on the page. Whenever it is "off", it has a certain icon and the script is not executed.
Here's my manifest.json:
{
"manifest_version": 2,
"name": "Resource Control",
"description": "Controls what resources load from a website.",
"version": "1.0",
"icons": {
"16": "locked_16.png",
"48": "locked_48.png",
"128": "locked_128.png"
},
"browser_action": {
"default_icon": "locked_16_off.png" //icon is "off" by default
},
"background": {
"scripts": ["main.js"]
},
"permissions": [
"tabs", "http://*/*", "https://*/*"
]
}
And here's main.js:
var toggled = false;
chrome.browserAction.onClicked.addListener(function(tab) {
toggled = !toggled;
if(toggled){
chrome.browserAction.setIcon({path: "locked_16_on.png", tabId:tab.id});
chrome.tabs.executeScript(null,{code:"document.body.style.backgroundColor='red'"});
}
else{
chrome.browserAction.setIcon({path: "locked_16_off.png", tabId:tab.id});
chrome.tabs.executeScript(tab.id, {code:"alert()"});
}
});
if (toggled) {
chrome.tabs.executeScript(null,{code:"document.body.style.backgroundColor='red'"});
}
Right now I'm just working on getting this functionality working before moving on, so to test I'm just setting the page's background to red. However, whenever I load a new webpage, the icon is reverted back to the "off" icon even though the extension is still "on", and the script isn't injected into the new page. Can someone help me find where I'm going wrong?
When you pass a tabId to chrome.browserAction.setIcon it only sets the icon for when that specific tab is active. If you switch to a different tab, the icon will revert to the default.
You are only running chrome.tabs.executeScript when the browserAction is clicked on. If want code injected on every page you either need to use a content script that is injected on all tabs or listen for new tabs getting created and executeScript every time.
I am starting to develop a chrome extension.
In my case I have the following manifest.json:
{
"name": "mY Notifier",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"background": {
"scripts": [
"myscript.js"
],
"persistent": false
},
"permissions": [
"tabs","alarms"
]
}
So, as you can see i have a default popup html page and a background script.
I need a Background script because I need to update the icon badge from time to time when the Extension is enabled (not just if the user clicks on the icon). This works fine.
In my popup.html i have a couple of checkboxes. Now in my background script i want to check which of the checkboxes are enabled. How can i do this? I cannot refer to my ui elements in popup.html using elementById. How can this be done?
You can't access to popup.html from myscript.js because popup.html don't loaded before the click on a button.
You can call functon of myscript.js from popup.html:
popup.js code:
var bg = chrome.extension.getBackgroundPage();
bg.someFunction(stateOfCkeckboxes);
I am following a tutorial here
http://www.blackweb20.com/2010/01/11/creating-your-own-google-chrome-extension/
I can open fine a tab with a custom extension and load a url, and I would like to fill and submit a form with javascript on the page opened. For example, could I submit a search on google.com?
Here is what I have so far:
manifest.json
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"background_page": "background.html",
"permissions": [
"tabs"
]
}
background.html
<script>
// get tab http://stackoverflow.com/questions/1979583/how-can-i-get-the-url-for-a-google-chrome-tab
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': "http://google.com"}, function(tab) {
// Tab opened. Wait until page loads, from here it is not working
jQuery(document).ready(function() {
jQuery('#tsf').submit();
});
});
});
</script>
Your jQuery code is getting executed in the background page not the new tab. Try using chrome.tabs.executeScript to execute the submit in the tab environment.
While you could do this using the chrome extension, I would suggest you to look into Selenium Browser Automation
It will also help you do the same in multiple browser instead of just chrome.