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);
Related
I am working on a Google Chrome Extension, which should auto-complete a form on a foreign website, for this to work, I need to access the value of the textboxes.
The following code is executed on a button click note that it takes the current open tab to perform its action the text box on this tab should be filled with some data the opening of the tab works but the value change on the textbox doesnt, how could it be done differently?
function autofill() {
chrome.tabs.executeScript(null, {
code: "document.getElementById('txbx_name').value = 'Johnny Bravo';"
});
}
Manifest
{
"name": "CopBot",
"version": "1.0",
"description": "CopBot",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"storage",
"tabs",
"<all_urls>"
],
"background":{
"scripts": ["background.js"]
}
}
How can I access and modify the value of an element from my Google Chrome Extension?
Since I'm replacing the default Chrome tab, I want to give the option for the user to go on a default Chrome tab instead. This is what I have in my html file...
Default tab
This is my manifest.json
{
"manifest_version": 2,
"name": "Positab",
"description": "This extension delivers positivity with every new tab.",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"chrome_url_overrides": {
"newtab": "popup.html"
},
"permissions": [
"activeTab",
"tabs"
]
}
I'm getting this error:
Not allowed to load local resource: chrome-search://local-ntp/local-ntp.html?dev=false
How do I fix this?
You can't redirect to that page in that way because it's not a proper location for link property to work thus it results in searching for that location in the extension itself resulting in that error. However you can add onclick handler to the link and update the current tab with the chrome.tabs.update method.
document.getElementById("default-tab-text").addEventListener("click", function(event){
chrome.tabs.getCurrent(function(tab){
chrome.tabs.update(tab.id, {
url: "chrome-search://local-ntp/local-ntp.html?dev=false"
});
});
});
Whenever my chrome extension icon is clicked, I want to run a script that would make certain changes to the current webpage.
I have tried using content_scripts in my manifest and it worked but the problem is , the script runs even if I did not clicked on the icon.
I have found that, I need to use background script.In my background.js file I have added
chrome.browserAction.onClicked.addListener(function(tab) {
alert();
});
and it is not working.
Here is my manifest file.
{
"manifest_version": 2,
"name": "Reveal Password",
"description": "Reveals password in password input field",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"]
}
}
Plus I want to execute the script that I made that manipulates the current web page too.
Use chrome.tabs.executeScript() to execute code in a tab like this:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: 'alert("Hello")'
});
});
Instead of code, you could also use a file which contains the code :
chrome.tabs.executeScript(null, {file: "content_script.js"});
NOTE : You need activeTab permissions to execute code in an active tab
"permissions": [
"activeTab"
]
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 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.