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.
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.
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;
}
I cannot get the event handler to fire. I already moved it out of an inline script. It won't load the external scripts in the form it is now. I tried loading the scripts in the manifest but the click handler still does not fire. In the current state of the below code, it seems like the script files don't even load for some reason.
Here is the manifest
{
"name": "Click to execute",
"version": "1.0",
"permissions": [
"https://www.netflix.com/*"
],
"web_accessible_resources": [
"alert.js"
],
"icons": {
"48": "icon.png"
},
"permissions": [
"tabs", "<all_urls>", "http://localhost/*"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version": 2
}
Here is the html file
<head>
<meta charset="utf-8">
<title></title>
<style>
input[type="text"] {
padding: 3px;
margin: 8px;
text-align: center;
font-size: 18px;
}
input[type="submit"] {
border: 0;
padding: 10px 35px;
margin: 8px auto;
;
display: block;
}
</style>
</head>
<body>
<script src="jquery.js"></script>
<script src="alert.js"></script>
<h1>Enter Info</h1>
<form>
<input type="text" name="Title" placeholder="Enter Title" required="true">
<input type="number" name="Skip" placeholder="Enter Skip Time" required="true">
<input type="number" name="Intro" placeholder="Enter Intro Length" required="true">
<input id="clickMe" type="button" value="Click me" name="submit">
</form>
</body>
</html>
Here is alert.js
$(document).ready(function(){
var skip=0;
var tvLong = $("span").text();
var locNum = tvLong.search("Season");
var tvName = tvLong.slice(0, locNum);
var tvSeason = tvLong.slice(locNum + 7, locNum + 8);
var tvEpisode = tvLong.slice(locNum + 14, locNum + 15);
var time = parseInt(skip);
var title = tvName + "."+tvSeason+"."+tvEpisode;
setInterval(function(){
if($("video").get(0)){
skip=$("video").get(0).currentTime;
}
},100);
//alert(title+ " " + time);
console.log("loaded");
var button=document.getElementById('clickMe');
if(button){
button.onclick=function(){
console.log("clicked");
};
}
// $("#clickMe").click(function() {
//
// })
});
function callAjax() {
//-----------------------------------------------------------------------
// 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/
//-----------------------------------------------------------------------
$.ajax({
url: 'conscript.php', //the script to call to get data
data: {Title:"Archer.2.9", Skip:115, Intro:34}, //you can insert url argumnets here to pass to api.php
type: "POST", //for example "id=5&parent=6"
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
console.log(data);
//Set output element html
//recommend reading up on jquery selectors they are awesome
// http://api.jquery.com/category/selectors/
},
error: function(error)
{
console.log("ERROR");
}
});
}
I am using jQuery 1.2. Please let me know if you have any ideas. Thank you.
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"
},