My Chrome extenstion consists of the following files:
manifest.json
background.js
content.js
background.js sends a message to content.js when the browser action is clicked. That's when I want to show the modal, which is going to show data from the messeage.
Where do I store the HTML (the hidden modal) and how do I access it?
UPDATE
I create an iframe in content.js like this:
var iframe = document.body.appendChild(document.createElement('iframe'));
iframe.src = chrome.extension.getURL('modal.html');
modal.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="jquery-3.3.1.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
manifest.json
{
"manifest_version": 2,
"name": "Anslutningsstatus Webbtidbokning",
"description": "Visar vilka webbtidbokningsflöden i 1177 Vårdguidens e-tjänster som en vårdenhet har stöd för baserat på vilka tjänstekontrakt den är ansluten till.",
"version": "0.1",
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"background": {
"scripts": ["browser-polyfill.min.js", "background.js", "axios.min.js"]
},
"permissions": [
"tabs",
"<all_urls>"
],
"browser_action": {
"default_icon": "icon16.png"
},
"web_accessible_resources": ["content.js", "styles.css", "modal.html"]
}
What happens is that a 300 px wide, totally blank iframe is injected into the page. What am I doing wrong?
Related
Any idea why the following chrome extension responds very slow when checkboxes are clicked?
I tried to use page_action, but that prevented the chrome.browserAction.setBadgeBackgroundColor functionality.
I want to change the extension's icon from the background.js script, but then options.html doesn't work properly.
manifest.json:
{
"name": "name",
"description": "desc",
"manifest_version" : 2,
"version" : "0.1.0",
"icons": {
},
"web_accessible_resources": [
],
"options_page": "options.html",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_title": "def title",
"default_popup": "options.html"
},
"permissions": [
"background",
"notifications",
"http://*/",
"https://*/"
]
}
options.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
</head>
<body>
<div>
<div class="p-2">
<form>
<div>
<input type="text" name="input_text" id="input_text" />
<label for="input_text">Text input</label>
</div>
<div>
<input type="checkbox" name="cb1" id="cb1" />
<label for="cb1">Checkbox 1</label>
</div>
<div>
<input type="checkbox" name="cb2" id="cb2" />
<label for="cb2">Checkbox 2</label>
</div>
<div>
<input type="submit" name="submit" value="Submit"/>
</div>
</form>
</div>
</div>
</body>
</html>
background.js:
function changeIconBackground() {
chrome.browserAction.setBadgeBackgroundColor({color: [255, 255, 0, 200]});
}
changeIconBackground();
I have a Html code In wordpress.:
'example'
When this "example" is clicked, it needs to show a popup window with some texts.
i came across some wordpress popup plugins like uji popup,etc..
they given some short codes. how can i use this shortcodes into my "href".
or any other plugins i can use, or any easy ideas to display popup when this text is clicked in wordpress?
Hi you can used bootstrap modal popup. as like demo
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I am trying to create a google search bar in a chrome extension that will open the search in a new browser tab. My manifest.json looks like this:
{
"name": "Search",
"version": "1.0",
"manifest_version": 2,
"description": "Search",
"browser_action": {
"default_icon": "search.png",
"default_popup": "popup.html"
}
}
My HTML looks like this:
<div id="search">
<form method="get" action="http://www.google.com">
<div style="border:0px solid black;padding:2px;width:20em;">
<table border="0" cellpadding="0">
<tr><td>
<input type="text" name="q" size="25"
maxlength="255" value=""<textarea placeholder="Search Google"></textarea>
<input type="submit" value="Search" /></td></tr>
</table>
</div>
This html page works fine in a normal browswer but not as a chrome extension. I think that I need to give permission to access my tabs but I am new to making chrome extensions so I am having a little bit of trouble with my rigid manifest.json markup.
Add a target="_blank" attribute to your form, like so:
<form method="get" action="http://www.google.com" target="_blank">
(MDN Reference)
manifest.json
{
"name": "Summer",
"version": "1.0",
"manifest_version": 2,
"description": "This is an addition extension",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
popup.html
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<!-- JavaScript and HTML must be in separate files for security. -->
<script src="popup.js"></script>
</head>
<body>
<form name="form">
<div id="sayi1">Sayı 1 : <input type = "text" name="deger1"></div>
<div id="sayi2">Sayı 2 : <input type = "text" name="deger2"></div>
<div id="sonuc">Sonuç : <input type = "text" name="cevap"></div>
<div id="button"><input type="button" value="Hesapla" onclick="hesaplama()" /></div>
</form>
</body>
</html>
popup.js
function hesaplama()
{
var sayi1 = window.document.form.deger1.value;
var sayi2 = window.document.form.deger2.value;
var toplam = parseFloat(sayi1) + parseFloat(sayi2) ;
window.document.form.cevap.value = toplam;
}
When i load this extension, i can see normally. But when i filled the deger1 and deger2 textbox and clicked the button, function is not working, in the sonuc textbox (result textbox) is null.
How can i fix it? I am new at creating chrome extensions. Thanks for your help.
You've got manifest_version : 2 in your manifest, so please go read about the changes it introduces....
http://code.google.com/chrome/extensions/manifestVersion.html
You got in the console Refused to execute inline event handler because of Content-Security-Policy, because of the onclick event handler in your html (<input type="button" value="Hesapla" onclick="hesaplama()" />). With manifest version 2 this isnt allowed, you need to attach the event listner from your js code and not in the html.
Here's a working version of your code....
popup.html
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<!-- JavaScript and HTML must be in separate files for security. -->
<script src="popup.js"></script>
</head>
<body>
<form name="form">
<div id="sayi1">Sayı 1 : <input type = "text" name="deger1"></div>
<div id="sayi2">Sayı 2 : <input type = "text" name="deger2"></div>
<div id="sonuc">Sonuç : <input type = "text" name="cevap"></div>
<div id="button"><input type="button" value="Hesapla" /></div>
</form>
</body>
</html>
popup.js
function hesaplama()
{
var sayı1 = window.document.form.deger1.value;
var sayı2 = window.document.form.deger2.value;
var toplam = (parseFloat(sayı1) + parseFloat(sayı2)) ;
window.document.form.cevap.value = toplam;
}
window.onload = function(){
document.querySelector('input[value="Hesapla"]').onclick=hesaplama;
}
I have to send data using socket.io.when a user enter his login and a password,he will be redirect to index.ejs and the username will be send to the server.
route.js (I mentioned only the part of the script not the hole script to show that when the login and password are correct a user get an index page and the userobject send to the index):
var index = function(req, res, next) {
if(!req.isAuthenticated()) {
res.redirect('/signin');
} else {
var user = req.user;
if(user !== undefined) {
user = user.toJSON();
}
res.render('index', {title: 'Home', user: user});
}
};
app.js:
io.sockets.on('connection', function (socket) {
socket.on("new_user",function(user1){
console.log("a new user is connected",user1);
var current_date=new Date();
var date=current_date.toString();
ex.user_connect(user1,date);
});
});
index.ejs:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width ,initial-scale=1.0" />
<title><%= title %></title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style/style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">HomePage</a>
</div>
<div>
<ul class="nav navbar-nav navbar-right">
<li><%= user.username%></li>
<li><span class="glyphicon glyphicon-log-out"></span> Sign out</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-sm-6">
<div class="container">
<h2>Led1</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-default btn-lg" id="led1" align="center">check it</button>
<!-- Modal -->
<div class="modal fade" id="model_led1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal" id="close">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Settings</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<img src="style/images/led.png" id="led" class="img-responsive"/>
<button type="button" class="btn btn-success btn-block" id="led1_activ"><span class="glyphicon glyphicon-off"></span> Activate</button>
<button type="button" class="btn btn-success btn-block" id="led1_desactiv"><span class="glyphicon glyphicon-off"></span> Desactivate</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal" id="cancel_button"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost:3000');
var user1 = user.username;
socket.emit('new_user',user1);
</script>
NB:I got the username on the navbar but I don't get it on the server console.
Ejs render all template variables in server and then return plain html to the client , so
Inside your script , do you have variable global user initialized? :
var user1 = user.username // var user = {username:"foo":} ,something like that before.
If you trying to get user from template variable you could try:
var user1= "<%= user.username%>";
This will render <%= user.username%> inside script tag before send to the client ( browser)