Hi I am new to chrome extensions, and need help with the back end. and trying to access the Dom of the currently selected tab. so that I can change the value of the endDatePicker ID to 1 day ahead. eg, from Wednesday 4 may 2016 to Thursday 5 may 2016
and then also click the Submit button (I dont know if you could just run the "checkSubmit(); return false;" method once you have the DOM or not?)
Thanks for the help
the date picker that i am trying to change
<input name="endDatePicker" type="text" id="endDatePicker" class="tradeDatePickers hasDatepicker valid" readonly="readonly">
the button that needs to be clicked
<button type="submit" name="UpdateItemSubmit" class="btn btn-signin btn-text tradeformcommonbtn" value="Update Your Existing Listing" onclick="checkSubmit(); return false;">Update Listing<i class="icon-white icon-chevron-right"></i></button>
Here is what I have got so far
manifest.json
{
"manifest_version": 2,
"name": "Listing Updater",
"description": "Update BidorBuy listings",
"version": "1.0",
"browser_action": {
"default_icon": "images/icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab","tabs"
]
}
popup.html
<!doctype html>
<html>
<head>
<title>Listing Updater</title>
<script src="popup.js"></script>
</head>
<body>
<h1>Listing Updater</h1>
<input name="datepicker" type="text" id="inputdate">
<br />
<button>Update Listings</button>
<script src="popup.js"></script>
</body>
</html>
popup.js
function setdate() {
var date = document.getElementById("inputdate").value;
document.getElementById("endDatePicker").innerHTML = date;
}
function update() {
checkSubmit();
}
function runTask() {
setdate();
update();
}
function clickHandler(e) {
setTimeout(runTask, 100);
}
function main() {
}
document.addEventListener('DOMContentLoaded', function ()
{
document.querySelector('button').addEventListener('click', clickHandler);
main();
});
Related
I'm trying to make a Chrome extension that auto-searches the Libgen library. My popup.html asks the user for the title of the book. From my popup.js file, I am able to extract the name of the book from popup.html and fill it into Libgen's homepage and click the submit button. Once the search results load, I am unable to interact/access the page results using the methods of document such as document.getElementsByTagName. I am unable to set the background of each row red (my intention).
My code:
content.js
function make_rows_red()
{
document.getElementsByTagName("input")[1].click();
setTimeout(function()
{
var rows = document.getElementsByTagName("tr");
var i;
for (i = 0; i < rows.length; i++)
{
rows[i].style.backgroundColor = "red";
}
},4000);
}
make_rows_red();
manifest.json
{
"name": "book finder",
"version": "1.0",
"manifest_version": 2,
"browser_action":
{
"default_popup": "popup.html",
"default_title": "book finder"
},
"permissions":
[
"tabs",
"input",
"activeTab",
"<all_urls>"
]
}
popup.js
function query(title, author)
{
chrome.tabs.create({url: "https://libgen.is/"});
chrome.tabs.executeScript(null,{code: 'document.getElementById("searchform").value=' + '"' + title + '"'});
chrome.tabs.executeScript(null,{file: 'content.js'});
}
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('button').addEventListener('click', onclick, false)
function onclick () {
const author = document.getElementById("author").value;
const title = document.getElementById("title").value;
query(title, author);
}
}, false)
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<label>Title:
<input type="text" id="title">
</label><br>
<label>Author:
<input type="text" id="author">
</label>
<br><br>
<div style="text-align: center">
<button id="search">Find my book!</button>
</div>
<script src="popup.js" charset="utf-8"></script>
</body>
</html>
Thanks in advance for your help.
I've copied the code from a tutorial and I think I might be missing a new addition.
This is inside of my popup.js file which is linked correctly in my popup.html file. The goal here is to have a budget tracker that adds the input to the 'total' id.
Here is the code I am working with inside of popup.js
$(function() {
$('#spendAmount').click(function() {
chrome.storage.sync.get('total', function(budget) {
var newTotal = 0;
if (budget.total) {
newTotal += parseInt(budget.total);
}
var amount = $('#amount').val();
if (amount) {
newTotal += parseInt(amount);
}
chrome.storage.sync.set({
'total': newTotal
});
$('#total').text(newTotal);
$('#amount').val('');
});
});
});
<!DOCTYPE html>
<html>
<head>
<title>Budget Manager</title>
<script type="text/javascript" src="popup.js"></script>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>Budget Manager</h1>
<h2>Total Spent: <span id="total">0</span></h2>
<h2>Limit: <span id="limit"></span></h2>
<h3>Enter Amount</h3>
<input type="text" id="amount" />
<input type="submit" id="spendAmount" value="Spend">
</body>
</html>
manifest.json
{
"manifest_version": 2,
"name": "Budget Manager",
"version": "1.0",
"description": "This extension tracks your overall spendings.",
"icons": {
"128": "icon128.png",
"48": "icon48.png",
"16": "icon16.png"
},
"browser_action": {
"default_icon": "icon16.png",
"default_popup": "popup.html"
},
"permissions": [
"storage"
]
}
You are loading jQuery after your script. When your script is executed there is no jQuery, So $ is not defined at that time.
Move popup below jQuery
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="popup.js"></script>
The reason for this is that the script calling for jQuery loads prior to jQuery.js loading.
fix = having the background script load jQuery itself
or
Try changing JQuery to its minimized version - in some cases it has shown success.
Content scripts are reloaded automatically but changes to manifest.json only become effective after reloading your Chrome extension.
EDIT - SOLVED // As user Win pointed out in the answers, if a function is named click and you try to call it with a HTML button, then it will confuse the function with an inbuilt/standard "click()" function for HTML buttons
Can anybody figure out, why (in the world) this isn't working? I get no bug reports in Chrome, my IDE and/or JSFiddle.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="app.js"></script>
</head>
<body>
<input id="search" type="text" name="input" placeholder="Search..">
<button onclick="click()" value="Submit">Get weather</button>
</body>
</html>
JavaScript
function click() {
if (document.getElementById("search").value == "New York") {
console.log("Loading weather for New York...");
} else {
console.log("City name isn't valid. Try again");
}
}
JSFiddle: https://jsfiddle.net/nd6f5pp7/
Thanks in advance.
Don't call the function click, it'll get confused with obj prototypes.
// Grab Input from DOM
var iptSearch = document.getElementById('search')
// Grab Submit button from DOM
var btnGetWeather = document.getElementById('get-weather');
// Add Event Listener
btnGetWeather.addEventListener('click', function() {
if (iptSearch.value === "New York") {
console.log("Loading weather for New York...");
} else {
console.log("City name isn't valid. Try again");
}
});
<input id="search" placeholder="Search..."/>
<button id="get-weather">Get Weather</button>
Or, if you want to follow the example code you've given. Use the below:
function getWeather() {
if (document.getElementById('search').value === "New York") {
console.log("Loading weather for New York...");
} else {
console.log("City name isn't valid. Try again");
}
}
<!DOCTYPE html>
<html>
<head>
<script src="app.js"></script>
</head>
<body>
<input id="search" type="text" name="input" placeholder="Search..">
<button onclick="getWeather()">Get weather</button>
</body>
</html>
My buddy and I are creating our first chrome extension as a class project, but can't seem to get over this hump. After clicking the extension icon in the top right, we have a dropdown menu with a button and upon clicking, it should trigger a javascript function. Starting at the top, we created a dummy button with a test function which should trigger a console.log, yet no matter what we do nothing shows up in the console (or the inspect popup console).
JS + HTML :
document.getElementById("DOMContentLoaded", function () {
var btnStart = document.getElementById('startSc');
btnStart.addEventListener('click', function () {
console.log("hi");
});
});
<!doctype html>
<html>
<head>
<title>First Extension</title>
<script src="popup.js"></script>
<link rel='stylesheet' href="TBStyle.css">
</head>
<body>
<h1>Go Chrome!</h1>
Start
</body>
</html>
Manifest :
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
}
Any help is greatly appreciated, thanks in advance!
getElementById doesn't work that way.
I believe what your looking for is this:
document.addEventListener("DOMContentLoaded", function () {
var btnStart = document.getElementById('startSc');
btnStart.addEventListener('click', function () {
console.log("hi");
});
});
<!doctype html>
<html>
<head>
<title>First Extension</title>
<script src="popup.js"></script>
<link rel='stylesheet' href="TBStyle.css">
</head>
<body>
<h1>Go Chrome!</h1>
Start
</body>
</html>
I'm trying to dip my feet into the water of the pool that is creating chrome extensions. I tried to start off with something I thought would be simple but it has proven to stump me as I don't really know where I can read information on this sort of thing.
Anyhow, currently my goal is to have a chrome extension that does the following:
You click the extension icon -> an HTML popup file opens displaying a singular button -> when you click this button it opens a specified link in a new chrome tab and changes that to be your active tab.
From my searching, I have found that I might have to use a background script so that I don't violate a policy regarding Manifest version 2 or something of the sorts, I tried it and it didn't really work for me. I really don't want to wander into creating a whole new script if that's not the problem.
Here's my manifest.json file followed by my popup.html file.
{
"manifest_version": 2,
"name": "strong text",
"author": "authorname",
"description": "desctext",
"version": "1.4",
"permissions": [
"tabs"
],
"icons": { "16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png" },
"browser_action": {
"default_popup": "popup.html"
}
}
<!doctype html>
<html>
<head>
<title>Hovertext</title>
<script src="popup.js"></script>
</head>
<body>
<div id="header">
<h1>Header</h1>
</div>
<div id="divider">
<p><button type="button" id="buttonA">Button Text</button>
<script>
var button1 = document.getElementById("buttonA");
button1.addEventListener("click", function() {
chrome.tabs.create({url: "http://www.google.com/"});
});
</script>
</div>
<div id="footer">
footer stuff here
</div>
</body>
<style>
body {
background-image: url("https://s-media-cache-ak0.pinimg.com/736x/51/3e/4f/513e4f5274ec48f29b894b0b8409658f.jpg");
}
#header {
background-color:rgb(96, 222, 72);
text-align:center;
padding:1px;
}
#footer {
background-color:rgb(96, 222, 72);
clear:both;
text-align:center;
padding:1px;
}
#divider {
text-align:center;
}
#buttonA {
color:white;
background-color:rgb(0, 152, 255);
border-width:3px;
border-color:white;
}
#buttonA:hover {
color:rgb(0, 152, 255);
background-color:white;
border-width:3px
border-color:rgb(0, 152, 255);
}
</style>
</html>
I'm new to this type of stuff and stack-overflow in general so if I didn't clarify something correctly just let me know, Thanks for the help in advance!
A simple code to open new tab on click some button. Try to use it on your extension.
manifest.json:
{
"name": "Test",
"version": "1.1",
"description":
"Description",
"permissions": [
"notifications",
"fontSettings"
],
"options_page": "options.html",
"manifest_version": 2
}
option.html:
<!doctype html>
<html>
<head>
<title>Demo</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="options.js"></script>
</head>
<body>
<input type="button" id="btnOpenNewTab" value="Click to open new tab"/>
</body>
</html>
option.js:
window.addEventListener('DOMContentLoaded', function() {
// your button here
var link = document.getElementById('btnOpenNewTab');
// onClick's logic below:
link.addEventListener('click', function() {
var newURL = "http://stackoverflow.com/";
chrome.tabs.create({ url: newURL });
});
});
You use this source code for your popup's button
window.opener.open("http://www.google.com/");