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?
Related
Super basic but I can not get it to work.
manifest.json
{
"manifest_version": 2,
"name": "My Extension",
"description": "It's great.",
"version": "1.0.0",
"icons": { "128": "icon_128.png" },
"permissions": [
"activeTab"
],
"content_scripts": [
{
"matches": ["https://*.youtube.com/*"],
"css": ["myStyles.css"],
"js": ["contentScript.js"]
}
]
}
contentScript.js
alert("Hello, world!");
I have done some reading and this does not work. I am just starting and my basic script won't run... I want it to fire on every page reload whenever I visit YouTube.
Adding this to the JSON and having my alert inside the script did work but only when I click the extension icon in the top right corner and that is not what I want.
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
I copied the example right from https://developer.chrome.com/extensions/content_scripts so I don't know what's going on.
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"
});
});
});
So I have a chrome extension that injects some javascript into the current tab when the popup.html page is opened in the extension. I'm trying to make the extension inject the code when the page is loaded, and I'm not sure what path to take.
However, chrome is giving me these errors when I try to run background.js on the background page:
and
I don't know how to resolve these errors. They seem to be related to permission errors not allowing me to run chrome.tabs.executeScript through the background page. I wasn't aware that the background page didn't have access to all urls, or am I mistaken in interpreting this error message? My manifest file:
"background": {
"scripts": ["js/inject.js", "js/background.js"],
"persistent": false
},
"browser_action": {
"default_icon": "images/icon.png",
"default_popup": "popup.html"
},
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"permissions": [
"contextMenus",
"tabs",
"contextMenus",
"storage",
"webNavigation",
"<all_urls>"
],
"web_accessible_resources": [
"js/jquery-2.1.3.min.js"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["js/jquery-2.1.3.min.js", "js/inject.js"]
}
],
Edit: background code:
function cssInject(){
chrome.tabs.executeScript({
code: '$("*").css("font-family", "Courier", "important"); $("*").css("font-size", "18pt", "important"); $("*").css("background-color", "#fbfbfb", "important"); $("*").css("line-height", "1.5", "important")'
});
}
function cssRemove(){
chrome.tabs.executeScript({
code: '$("*").css("font-family", ""); $("*").css("font-size", ""); $("*").css("background-color", ""); $("*").css("line-height", "")'
});
}
This error happens because chrome.tabs.executeScript without the tab ID argument tries to inject the code in the current active tab.
Your error indicates that you had an (undocked) Dev Tools window open and focused when that code executed. It counts as the active tab.
You need to be focused on the tab you want to inject the code to for it to work. Docking your Dev Tools will help with that.
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 have a chrome extension for creating a button in Gmail webpage.
the button was created successfully in on that page.but after refreshing that page,the button was not created.it gives aa class undefined.
after clearing the cache and cookies,it works.but not all time,sometimes only.
my manifest.json file code here:
{
"manifest_version": 2,
"name": "E-mail Security",
"description": "This extension demonstrates a Email security ",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [ "notifications", "contentSettings", "cookies", "tabs", "contextMenus", "http://*/*", "https://*/*" ],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["ngContent.js","jquery.js"]
}
]
}
why,that above problem was occured.whether i miss something in manifest.json file?
note:i am using chrome browser.
Create the button when the page loads. Then perhaps define an event for MutationObserver. Every time the button disappears, your code should get triggered to create it once again. Then apply whatever other rules/actions you want to for that button.