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>
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.
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.
Its possible to create an Action in popup.html ?
To simplify, when the user click on the button, move to a 'new' popup.html..
I'm trying to create a menu using buttons to indicate Autors and when clicked result informations about the autors.
Follow my project so far..
manifest.json
{
"manifest_version": 2,
"name": "Autors info",
"version": "1.0",
"description": "123",
"browser_action":{
"default_popup": "popup.html"
},
"icons": {
"16": "icon16.png"
}
}
popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html, body {
width: 500px;
background-color: #ADD8E6;
}
</style>
</head>
<body>
<h1>Info Autors</h1>
<h3>Click bellow to check autors story:</h3>
<button type="button" id="create">JRR Tolken</button>
</body>
</html>
Hi I have run into a very weird problem.
I have a basic chrome extension which has a default popup.html document defined as follows:
<html>
<head>
<script type="text/javascript">
function disp() {
document.getElementById("test").innerHTML = "Bye";
}
</script>
</head>
<body>
<p id="test">Hello</p>
<button type="button" onclick="disp()">'Twas Nice to meet you</button>
</body>
</html>
Upon running the html file independently in a browser, it behaves as expected: clicking on the button changes the text of the p tag. However, from withing the chrome extension, in the popup the button does not seem to respond
Is this something to do with popups in general or something specific to my code?
Although you've found out you can circumvent the inline script "issue" (it is a security feature), below is what it would look like if you did not do that. This shows both how to call a notification and a "window"-based dialog.
manifest.json
{
"name": "Hello World!",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"notifications",
"create",
"tabs"
]
}
popup.html
<!doctype html>
<html>
<head>
<title>Getting Started with Extension's Popup</title>
<style>
body {
min-width:357px;
overflow-x:hidden;
}
img {
margin:5px;
border:2px solid black;
vertical-align:middle;
width:75px;
height:75px;
}
</style>
<!-- JavaScript and HTML must be in separate files for security. -->
<script src="popup.js"></script>
</head>
<body>
<div style="text-align: center;">
<button type="button" id="click">Show Notification</button>
<button type="button" id="dialog">Show Dialog</button>
</div>
</body>
</html>
dialog.html
<!doctype html>
<html>
<head>
<title>Dialog Prompt - Chrome</title>
<style>
body {
overflow: hidden;
margin: 0px;
padding: 0px;
background: white;
}
p {
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<p>This is a dialog prompt.</p>
</body>
</html>
popup.js
var notifier,
dialog;
function showNotify() {
var notify;
if (window.webkitNotifications.checkPermission() == 0) {
notify = window.webkitNotifications.createNotification(
"",
'Notification Test',
'This is a test of the Chrome Notification System. This is only a test.'
);
notify.show();
} else {
window.webkitNotifications.requestPermission();
}
}
function showDialog(){
chrome.windows.create({
url: 'dialog.html',
width: 200,
height: 120,
type: 'popup'
});
}
function init() {
clicker = document.querySelector('#click');
dialog = document.querySelector('#dialog');
clicker.addEventListener('click', showNotify, false);
dialog.addEventListener('click', showDialog, false);
}
document.addEventListener('DOMContentLoaded', init);
You can find the files to download here:
http://jfcoder.com/projects/chrometestdialogs/
manifest_version 2 doesn't allow user to enter the function inside the html file for security purpose, should we need to write all the function in separate file and import it to that html file like below
<head>
<script src="yourjsfile.js"></script> //All our functions are defined here
<script src="jquery.js"></script> // This is the jquery
</head>
and the function calling are not allowed here like onclick, onkeydown,onkeyup, etc...
<body>
<p id="test">Hello</p>
<button type="button" id="btn">Twas Nice to meet you</button>
</body>
In above "onclick="disp()" not allowed, and should assign a id
so should we need to create the event and definition must create from the .js file
So you should write a js file like below yourjsfile.js
document.addEventListener('DOMContentLoaded', function () {
$("#btn").on("click",function(){
disp();
});
});
function disp() {
document.getElementById("test").innerHTML = "Bye";
}