I am attempting to change the value of a field on a page with a Google Chrome extension using JQuery
My Code are as follows,
manifest.json
{
"manifest_version": 2,
"name": "One-click Kittens",
"description": "This extension demonstrates a browser action with kittens.",
"version": "1.0",
"background": { "scripts": ["jquery.js"] },
"permissions": [
"tabs",
"http://*/"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
popup.html
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style>
body {
min-width: 200px;
overflow-x: hidden;
}
</style>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
-->
<script src="jquery.js"></script>
<script src="popup.js"></script>
</head>
<body>
<ul>
<li>Watch
</li>
<li id="assets">Assets
</li>
<li id="liab">Liabilities
</li>
</ul>
</body>
</html>
and lastly
popup.js
$(document).ready($(function(){
$('#watch_list').click(function(){
$('#name').val("Hello");
})
}));
My issue is when the link Watch is clicked its suppose to fill in the web page form with ID name with the word "Hello" but nothing seems to work.
Any help would be greatly appreciated! Thank you for reading.
This is probably because you popup.html does not have element with id "name". Or do you use different html in your extension?
Related
I am trying to make a function execute when clicking the extension's icon in the toolbar(on the right corner). I added chrome.browserAction.onClicked.addListener in background.js file but it is not working. please help me.
Ultimately, My goal is to set a different icon by HTML element in http://localhost:3000 that I use in the iframe tag.
(check there is a specific element in localhost:3000 -> set icon)
The reference that I follow:
https://developer.chrome.com/extensions/samples#search:a%20browser%20action%20which%20changes%20its%20icon%20when%20clicked
my code is below.
manifest.json
{
"name": "test",
"version": "1.0",
"description": "test",
"manifest_version": 2,
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
"permissions": [
"storage"
],
"browser_action": {
"default_title": "test",
"default_popup": "popup.html"
}
}
background.js
chrome.browserAction.onClicked.addListener(() => {
console.log('test for browser action');
});
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<iframe src="http://localhost:3000" width="400" height="600"></iframe>
<script src="./background.js" charset="UTF-8"></script>
</body>
</html>
Specifying default_popup in manifest.json disables chrome.browserAction.onClicked event.
Solution: simply put the code in popup.js and load it as any other script in popup.html.
popup.html
<script src=popup.js></script>
</body>
</html>
popup.js
console.log('This will run every time the popup is opened');
To inspect the popup and its console, right-click inside the popup, then click "inspect".
Note that you don't need the background script for this. The background script runs in a hidden background page so it should never be used anywhere else. Remove it from popup.html.
P.S. You're using the wrong reference extension. Search for popup.html using the built-in browser search via Ctrl-F (not the search input on the page).
I am trying to make a function execute when clicking the extension's icon in the toolbar(on the right corner). I added chrome.browserAction.onClicked.addListener in background.js file but it is not working. please help me.
Ultimately, My goal is to set a different icon by HTML element in http://localhost:3000 that I use in the iframe tag.
(check there is a specific element in localhost:3000 -> set icon)
The reference that I follow:
https://developer.chrome.com/extensions/samples#search:a%20browser%20action%20which%20changes%20its%20icon%20when%20clicked
my code is below.
manifest.json
{
"name": "test",
"version": "1.0",
"description": "test",
"manifest_version": 2,
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
"permissions": [
"storage"
],
"browser_action": {
"default_title": "test",
"default_popup": "popup.html"
}
}
background.js
chrome.browserAction.onClicked.addListener(() => {
console.log('test for browser action');
});
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<iframe src="http://localhost:3000" width="400" height="600"></iframe>
<script src="./background.js" charset="UTF-8"></script>
</body>
</html>
Specifying default_popup in manifest.json disables chrome.browserAction.onClicked event.
Solution: simply put the code in popup.js and load it as any other script in popup.html.
popup.html
<script src=popup.js></script>
</body>
</html>
popup.js
console.log('This will run every time the popup is opened');
To inspect the popup and its console, right-click inside the popup, then click "inspect".
Note that you don't need the background script for this. The background script runs in a hidden background page so it should never be used anywhere else. Remove it from popup.html.
P.S. You're using the wrong reference extension. Search for popup.html using the built-in browser search via Ctrl-F (not the search input on the page).
I'm working on a simple chrome extension to see how they're done, and I've followed tutorials but still can't get it working properly.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Extension</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" type="text/css">
</head>
<body>
<div class="popup">
<div class="step-1-test-extension flex-container active">
<div class="step-number">
<p>1</p>
</div>
<div class="step-explanation">
<p>Go to Link Test.</p>
</div>
Visit Facebook
</div>
</div>
<script src="test.js"></script>
</body>
</html>
test.js:
window.onload = () => {
let testButton = document.getElementById('test-button');
testButton.innerText = 'test';
testButton.addEventListener('click', console.log('test click'));
console.log('Chrome extension go');
}
Manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"description": "Quick Test Extension",
"version": "1.0.0",
"icons": {"128": "icon_128.png"},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": ["activeTab"],
"content_scripts": [{
"js": ["test.js"],
"matches": ["https://www.facebook.com/*"]
}]
}
Nothing in the test.js is working properly. It's not console.logging anything and no action is taken when I click the button, so the addEventListener isn't working either. I've reloaded the extension, it's properly set to dev mode and it's appearing on my browser bar with the popup working, but none of the content script is working?
Any help is greatly appreciated, thanks in advance!
As far as I understood, you have one script (test.js) that's being referenced both as a Content Script and as a script in the Popup
The script in the popup.html will only run in the context of the popup
The content script, however, will only run in the actual page
You can communicate between them using messages, which I believe is what you need.
This line looks kinda plain and funny... can you do that these days?
testButton.addEventListener('click', console.log('test click'));
Shouldn't it be more like...
testButton.addEventListener('click',function(e){
console.log('test click');
},true); // <-- should it bubble?
Also, should you be using an expensive event listener when you could just...
testButton.onclick=function(e){console.log('test click');};
Eh?
I am trying to make a google chrome extension that allows the user to press a button in the chrome extension menu and that causes a button on a selected webpage to be clicked.The problem I have currently is the syntax and code in my injector.js. It says unexpected token ; and unexpected token [. I would appreciate any help.
Here is my manifest.json:
{
"manifest_version":2,
"name": "Button Click",
"description": "Be able to press buttons",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"storage"
]
}
Here is my html
<!DOCTYPE html>
<html>
<head>
<title>Fill</title>
</script><script src="popup.js"></script>
</head>
<body>
<h2 id="htwo">Button presser</h2>
<button id="press">Press Button</button>
</body>
</html>
and my javascript:
window.onload=function(){
if(document.getElementById("press")){
document.getElementById("press").addEventListener('click',function(){
document.getElementById("htwo").innerHTML="yay";
chrome.tabs.executeScript({
file:"injector.js"
});
});
}
}
injector.js:
function pressButton(){
var buttons=document.getElementsByClassName("button"),
button[0].click();
}
pressButton();
By the way, the button I am trying to click is an input button in which I inspect element, I get:
"(input type="submit" name="commit" value="add to cart" class="button")"
for some reason wont display
This button can be found here:
http://www.supremenewyork.com/shop/accessories/p840x2jsc/yks6zay73
Note: I know there were other people asking questions about the same topic, but the method that they used didn't work for me.
Thanks for helping me out!
Now it works. Install it and check it out.
To see how the extension works, you should be on this site (StackOverflow) and provide all these files and icon.png
manifest.json
{
"manifest_version": 2,
"name": "Button Click",
"description": "Be able to press buttons",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": ["tabs", "<all_urls>"]
}
popup.html
<!doctype html>
<html>
<head><title>Fill</title></head>
<body>
<h2 id="htwo">Button presser</h2>
<button id="press">Go to activity tab</button>
<script src="popup.js"></script>
</body>
</html>
popup.js
function injectTheScript() {
// Gets all tabs that have the specified properties, or all tabs if no properties are specified (in our case we choose current active tab)
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
// Injects JavaScript code into a page
chrome.tabs.executeScript(tabs[0].id, {file: "utilities.js"});
});
}
// adding listener to your button in popup window
document.getElementById('press').addEventListener('click', injectTheScript);
utilities.js
/**
* Gets the desired element on the client page and clicks on it
*/
function goToActivityTab() {
var activityTab = document.getElementsByClassName("my-profile")[0];
activityTab.click();
}
goToActivityTab();
For more information use these links
chrome.tabs
Content Scripts
Tutorial for beginners from Google
I have a simple javascript form in a chrome extension popup. When clicking the extension icon, the user fills the form and clicks "go!", which should open a new tab - the URL for this new tab will be determined according to values in the form.
Currently the popup shows fine and the form values are populated fine. How do I open the tab when the user clicks the button?
(I am pretty new with javascript and the documentation confused the hell out of me :| )
manifest.json:
{
"name": "My Helper",
"version": "1.0",
"description": "My Helper",
"background_page" : "background.html",
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},
"permissions":
["tabs"]
}
popup.html:
<html>
<head>
<script type="text/javascript">
// some functions...
</script>
</head>
<body>
<form name="frmOne">
// input fields
<button type="button" onclick="buildTheUrl(..input values..)">Go!</button>
</form>
</body>
</html>
background.html is currently empty.
chrome.tabs.create({url: 'http://pathToYourUrl.com'});