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.
Related
I programmed a chrome extension that works well (get cookie info on a specific page, fetch data and print in a textarea of my popup). But after add other checks, my popup stop printing my data.
I try to search why and I discover that my popup refresh as soon as my code ends. To test, I just code the below simple files and I still have the issue.
Just after installation, when I open my popup, I can see the "background" text in console log correctly. Good point.
But when I click on the button, I quickly see the text "test" in the console log but the popup immediately refresh then the console reset information and my button back again instead to stay invisible.
I don't know why the popup refresh when it did not do so before. Do you have an idea ? Is there something I do not understand ?
Thank you for your help.
Manifest.json
{
"manifest_version": 3,
"name": "Test extention",
"description": "Test extension",
"version": "1.0",
"icons": {
"16": "./img/icon_16.png",
"32": "./img/icon_32.png",
"48": "./img/icon_48.png",
"64": "./img/icon_64.png",
"128": "./img/icon_128.png"
},
"background": {
"service_worker": "./background.js"
},
"action": {
"default_popup": "./popup.html",
"default_title": "Test Extention",
"default_icon": {
"16": "img/icon_16.png",
"32": "img/icon_32.png",
"48": "./img/icon_48.png",
"64": "img/icon_64.png",
"128": "img/icon_128.png"
}
},
"permissions": [
"declarativeContent",
"storage",
"cookies",
"tabs",
"activeTab",
"scripting"
]
}
background.js
console.log("background");
popup.js
const startOfScript = () => {
optionsForm.startlabel.style.display = "none";
console.log("test");
};
optionsForm.startlabel.addEventListener("click", startOfScript);
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="container">
<p class="title">Fred's AI Marketing extention</p>
<form id="optionsForm">
<button id="startlabel">Récupérer les données</button>
</form>
<script src="./popup.js"></script>
</div>
</body>
</html>
Answer (Thank you #wOxxOm)
Just remove the <form> in popup.html
This node will automatically refresh the form and the popup at the same time.
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 have tried to create an extension for chrome that captures the screen. But I found an issue (in my opinion). chooseDesktopMedia shows the dialogue for choosing the screen and hides it immediately.
manifest.json:
{
"manifest_version": 2,
"name": "desktopCapture",
"description": "User testing application",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"desktopCapture"
]
}
popup.js
document.querySelector('#start').addEventListener('click', function(event) {
chrome.desktopCapture.chooseDesktopMedia(
["screen", "window"],
function(id) {
console.log("id",id);
});
});
popup.html
<!DOCTYPE html>
<html>
<head>
<title>Desktop capture</title>
</head>
<body>
<button id="start">Start</button>
<script src="popup.js"></script>
</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/");