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.
Related
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.
I want to grab content from page by class. I wrote chrome extension, but I don't get the contents of the element. I recieved [object Object] in textarea. I tried to get the page title when I wrote chrome.runtime.sendMessage(document.title); in payload.js and it's work, but not work when I try to get content by class. Please tell me how to fix my solution?
manifest.json
{
"manifest_version": 2,
"name": "Scrap",
"description": "Scrap",
"version": "1.0",
"author": "",
"background": {
"scripts": ["popup.js"],
"persistent": true
},
"permissions": [
"tabs",
"http://*/",
"https://*/"
],
"browser_action": {
"default_icon": "logo.png",
"default_popup": "popup.html"
}
}
popup.js
window.addEventListener('load', function (evt) {
chrome.extension.getBackgroundPage().chrome.tabs.executeScript(null, {
file: 'payload.js'
});;
});
chrome.runtime.onMessage.addListener(function (message) {
document.getElementById('json-content').innerHTML = message;
});
popup.html
<!doctype html>
<html>
<head>
<title>Scrap</title>
<script src="popup.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<style>
.container {
min-width: 500px;
padding: 1rem 1.5rem;
}
</style>
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<label for="exampleFormControlTextarea1">JSON</label>
<textarea class="form-control" id="json-content" rows="3"></textarea>
</div>
</form>
</div>
</body>
</html>
payload.js
chrome.runtime.sendMessage(document.getElementsByClassName("something"));
page for grab
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Scrap</title>
<script src="popup.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<style>
.container {
min-width: 500px;
padding: 1rem 1.5rem;
}
</style>
</head>
<body>
<div class="container">
<h1>Test</h1>
<p class="something">Text</p>
</div>
</body>
</html>
In your payload.js you are not getting the text of the class but the elements with that class, so it shows that it is an object. Also, getElementsByClassName returns multiple results that you need to go threw.
I would do something like this in my payload.js file:
var result = "";
var somethings = document.getElementsByClassName("something");
for (var i = 0; i < somethings.length; i++) {
result += somethings[i].textContent;
}
chrome.runtime.sendMessage(result);
Note that this will return all the text inside the elements that have that class.
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>
This question already has answers here:
it can not access popup.js file after creating a chrome extension
(1 answer)
onclick or inline script isn't working in extension
(5 answers)
Closed 6 years ago.
I am building a chrome extension using javascript the tags are working correctly in browser while adding the same html ,javascript code to chrome extension not responding.
Json file:
{
"name": "SOB",
"version": "1.0",
"manifest_version":2,
"permissions": ["storage",
"activeTab" ],
"icons" : {
"16" : "16.png" ,
"48" : "48.png"
},
"browser_action": {
"default_icon": "Skype Orange.png",
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"],
"persistent": true
}
}
Popup.html:
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style>
body {
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
}
</style>
<script src="background" type="text/javascript"></script>
</head>
<body>
<input type="text" name="value" id="fillIn" />
<input type="submit" value="Submit" onClick="response()"/>
<p id="answer"></p>
<input type="text" name="value" id="input" placeholder="SOB Check" />
<button id="form" onClick="demo()"> Submit</button>
<p id="output"> </p>
<!----------
<div id="status"></div>
<img id="image-result" hidden>
------------>
</body>
</html>
background.js:
function demo()
{
var arra = [] , i = 1, rem ;
var Input =document.getElementById('input').value;
var x = 1;
while(Input > 0)
{
rem = Input%2;
Input = (parseInt(Input/ 2));
arra[i] = rem ;
i++;
}
while ( x < 35 )
{
if(arra[x] == 1)
{
output.innerHTML +=("SOB "+ x +" Found" +"<br />" );
x = x +1 ;
}
else
{
x = x +1 ;
}
}
}
function response() {
var box = document.getElementById("fillIn");
switch (box.value)
{
case '0' : document.getElementById("answer").innerHTML="Successful";
break ;
case '999' : document.getElementById("answer").innerHTML="Other Error No Retry";
break ;
}
}
You will need to run the code on DOMContentLoaded event
document.addEventListener('DOMContentLoaded', function () {
demo();
});
You have referenced background instead of background.js in your popup html file.
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();
});