This question already has answers here:
The Chrome extension popup is not working, click events are not handled
(2 answers)
onclick or inline script isn't working in extension
(5 answers)
Closed 5 years ago.
I am a beginner to chrome extension development. My problem is nothing but the alert box is not coming and I think the javascript block itself is not working when I run the application as an extension. But it is working fine in firefox and chrome browser properly when I run the HTML file alone. can anyone help me?
manifest code
{
"name": "Intruder",
"description": "Monitoring all your activities.",
"version": "1.1",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"browser_action": {
"default_title": "Watching you",
"default_icon": "badge.png",
"default_popup": "popup.html"
},
"manifest_version": 2
}
HTML code
<html>
<head>
<title>Intruders World</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<script src="jscript.js"></script>
</head>
<body style="background-color: whitesmoke">
<script>
function myFunction() {
var x = document.forms["myForm"]["username"].value;
if (x == "") {
window.alert("u have to enter it");
document.getElementById("demo").innerHTML = "box must be filled!";
return false;
}
}
</script>
<p id="demo">Password Locker</p>
<form name="myForm">
Media Name:<br>
<input type="text" name="medianame">
<br>
User name:<br>
<input type="text" name="username">
<br>
Type Password:<br>
<input type="password" name="passwd">
<br>
Re-type Password
<input type="password" name="repasswd">
<br><br>
<input type="submit" value="Save" onclick="myFunction()">
</form>
</body>
</html>
css code
input[type=submit] {
background-color: #404040;
border: none;
color: white;
padding: 10px 22px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
border-radius: 30px;
}
Related
I have a form on localhost:8080 which when you enter form data (user & pass), then press submit, it meant to send a POST to localhost:8080/submit, then should show text on that page saying "Submit page". When I enter "localhost:8080/submit" into my browser, it works, but when I use the submit button to get there, it says "This site can’t provide a secure connection" (aka, doesn't work)
script.js
const url = "https://localhost:8080";
const data = {
"user": "user",
"pass": "pass"
}
function send() {
alert("Sent")
$.post(url, data, function (data, status) {
console.log("Sent " + data + ", status is: " + status)
});
}
body {
background-color: #444444;
}
.form-div {
width: 100%;
height: auto;
text-align: center;
justify-content: center;
align-content: center;
border: 1px solid red;
}
form {
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Harley Swift</title>
<link rel='stylesheet' href='styles.css'/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="form-div">
<form method="POST" action="https://localhost:8080/submit">
<div>
<label for="user">Username</label>
<input name="user" type="text" id="user"><br>
</div>
<div>
<label for="pass">Password</label>
<input name="pass" type="password" id="pass"><br>
</div>
<br>
<div>
<button class="btn" onclick="send()">Submit</button>
</div>
</form>
</div>
</body>
</html>
app.js: https://hastebin.com/udunalurub.lua (couldn't figure out how to use code snippets on here, sorry)
Thank you in advance! I am not too familiar with nodejs servers yet
Don't use https, use http when developing locally.
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.
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/");
I am trying to create a very simple chrome extension that open multiple tabs of LinkedIn searching different keywords that I type in.
Since this is my first extension, most of my codes are based on this extension, which is very similar to my idea.
The problem is when I click my "search" button, nothing happens. I just started coding for a week so I'd greatly appreciate any help!
Besides knowing what is wrong with the codes, is a background script necessary in this case?
Thanks!
Here are my codes:
Manifest.json
{
"manifest_version": 2,
"name": "Search Assistant",
"description": "This extension makes LinkedIn Search easy.",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["myscript.js"]
}
],
"chrome_url_overrides" : {
"newtab": "newtab.html"
},
"background": {
"scripts": ["bg.js"]
}
}
Popup.html
<!doctype html>
<head>
<style type="text/css">
body{
font family: Helvetica, Arial, sans;
font-size: 12px;
}
#instruction{
padding-bottom: 10px;
}
#searcharea{
padding-bottom: 10px;
}
#search{
padding-bottom: 10px;
float: left;
}
#companies{
white-space: nowrap;
overflow:auto;
}
</style>
<style type="text/javascript" src="popup.js"></style>
</head>
<body>
<div id="instruction">Companies you want to search for:</div>
<div id="searcharea"><textarea rows="20" cols="80" id="companies" wrap="soft" tabindex="1"></textarea></div>
<div id="search">
<button id="btn1" tabindex="2">Search</button>
</div>
<p id="demo"></p>
</body>
</html>
Popup.js
document.addEventListener('DOMContentLoaded', function (){
document.getElementById('btn1').addEventListener('click', loadSites);
document.getElementById('companies').focus();
});
function loadSites(e){
var companies = document.getElementById('companies').value.split('\n');
for(var i=0; i<companies.length; i++){
thecompany = companies[i].trim();
thesearchurl = 'https://www.linkedin.com/vsearch/c?type=companies&keywords=' + thecompany;
chrome.extension.create({url: thesearchurl, selected:false})
}
}
You have 2 slight errors right now. Firstly you should use script-tag instead of style to include javascript files. Second: it is better to load javascript after your page is ready. To fix these follow steps below
Remove line <style type="text/javascript" src="popup.js"></style>
Add this <script type="text/javascript" src="popup.js"></script> to a line right before </body>.
Good day good people..
I need to ask why is that..
I made a simple chrome extension for my website. it has the following codes, but its taking around 3-5 seconds when I click on the icon why not it opens instantly?
Basically Popup.html contains an Iframe which loads a piece of webpage from google drive but its taking too much time i was wanting to publish online but who will like such slow extension?
iframe contains a google custom search box and a small form
see the code please. Help e why it is slow?
Popup.html
<html>
<head>
</head>
<body>
<iframe width="400" height="400" name="iframe" seamless="seamless"src="https://googledrive.com/host/xxxxxxxxxxx/xxxxx.html"></iframe>
</body>
</html>
manifest.json
{
"name": "Instant Quotes!",
"description": "Search Quotes Instantly!",
"version": "0.1",
"manifest_version": 2,
"browser_action": {
"default_popup": "popup.html",
"default_icon": "icon.png",
"default_title": "Instant Quotes!",
"icons":
{
"48": "icon48.png",
"128": "icon_128.png"
},
"app": {
"launch": {
"web_url": "http://RationalQuotes.com/"
}}
}
}
iframe Page
<!DOCTYPE html>
<html>
<head>
<style>
.cse input.gsc-input, input.gsc-input {background-image:'none') !
important;background-repeat:no-repeat;background-position:right; }::-webkit-scrollbar{ width: 10px; /* for
vertical scrollbars */ height: 50px; /* for horizontal scrollbars */}::-webkit-scrollbar-track{ rgba(0, 152, 199,
0.8);}::-webkit-scrollbar-thumb{ background: rgba(0, 162, 69, 0.9);}
</style>
<title></title>
</head>
<body>
<script>
(function()
{ var cx = '009043xxxxxxxxxxx88903:ntz9xxxxxxbzw'; var gcse = document.createElement('script'); gcse.type =
'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx; document.body.appendChild(gcse); })
();
</script> <span style="font-size:10px;">OR</span>
<form>
<span style="font-size:10px;">Book: <input id="value1" type="text"> (1
to 200)<br>
Page : <input id="value2" type="text"> (Depends)<br>
<input onclick="redirect()" style="width:95px" type="button" value=
"Meaning!"> <input onclick="Quotes()" style="width:96px" type="button"
value="Quote!"></span>
</form><span style="font-size:10px;"><script>
function tafsir() { window.location.assign
("http://www.example.com/xyz/abc/" + document.getElementById("value1").value + "/index.html");}
</script><script>
function redirect() { window.location.assign("http://example.com/xyz/" +
document.getElementById("value1").value + "/" + document.getElementById("value2").value +
"/printview.html");}
</script></span><span style="font-size:10px; color:#008000;">(Note: Page
No. is Compustory for Qoutes)</span><span style="font- size:8px;"><a href=
"http://example.blogspot.com" target=
"_blank">RationalQoutes.com</a></span><br>
</body>
</html>
Modify manifest.json
"background": {
"page": "popup.html"
},