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;
}
Related
I need to make my button click to reveal the textarea so the user can choose between uploading either an image or a text message. I can see the hidden/visible element kicking in when I run the page but it doesn't remain in the new state. It immediately reverts back to whatever it was originally set as.
I'm guessing that I'm not escaping the script properly. Any thoughts?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Site Media</title>
</head>
<header id="headtitle">
</header>
<body>
<div id="PostContainer"><br>
<textarea id="textmessage" rows="7" cols="40" maxlength="280" placeholder="Enter message here..." width="100%" style="visibility: hidden"></textarea><br>
<form class="UploadButtonContainer">
<button id="textbutton" type="submit" name="submit" onclick="revealinput()" style="display: none;"></button>
<label for="textbutton" style="cursor: pointer;" ><img src="Images/AYE PING.png" width="30%" alt="Choose Text Post" >
</label>
</form>
<script>
function revealinput() {
var x = document.getElementById("textmessage");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
</script>
</div>
</body>
</html>
The script didn't like the button being inside a tag. I changed it to a tag and it works now.
I am making my first chrome extension and need to pull data from one table and add it to the fields of a popup.html page.
I need to do this with out jquery.
How do I access element.innerHTML by ID from current tab and add them to a popup page.
I setup a test page with tables were the TD tags have a unique ID’s.
<tr>
<td><div id="field1a">Data Block 1-A</div></td>
<td><div id="field2a">Data Block 2-A</div></td>
<td><div id="field3a">Data Block 3-A</div></td>
<td><div id="field4a">Data Block 4-A</div></td>
</tr>
I need to take the text from ID=” field1a” one the main page and add it to a form on the popup.html page.
Here is my code.
manifest.json
{
"manifest_version": 2,
"name": "Harvesting Data 8.",
"version": "1.8",
"description": "Pull text from select fileds.",
"icons": {
"128": "img/icon128.png",
"48": "img/icon48.png",
"16": "img/icon16.png"
},
"browser_action": {
"default_icon": "img/icon16.png",
"default_popup": "popup.html"
},
"options_page": "options.html",
"permissions":[
"activeTab",
"storage"
],
"content_scripts": [{
"matches": [
"https://www.steampunkferret.com/*"
],
"js": ["scripts/background.js"]
}]
}
popup.html
<!DOCTYPE html>
</html lang="en">
<head>
<meta charset="utf-8" />
<title>Harvester</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="scripts/popup.js"></script>
</head>
<body>
<button type="button" class="harvestButton" id="harvestButton" wdith="100%">Harvest Data</button>
<br />
<br /><form class="" action="https://www.steampunkferret.com/" target="_blank" method="post">
User ID:<input type="text" id="userID"><br /><br>
Data Block 1-A: <input type="text" id="field1Text"><br /><hr>
Data Block 2-B: <input type="text" id="field2Text"><br /><hr>
Data Block 3-C: <input type="text" id="field3Text"><br /><hr>
Data Block 4-D: <input type="text" id="field4Text"><br /><hr>
Data Block 2-D: <input type="text" id="field5Text"><br /><hr>
Data Block 4-A: <input type="text" id="field6Text"><br /><hr>
<input type="submit" id="submitButton" value="Submit Data">
</form>
</body>
</html>
background.js
chrome.runtime.onMessage.addListener(gotMessage);
function gotMessage(message, sender, sendResponse){
alert("Background Script Called.");
}
popup.js
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('harvestButton').addEventListener('click', harvesting);
});
function harvesting() {
getUserID();
pulledDataFromMainPage();
}
//setUserID() set the User UserID.
function getUserID() {
//alert('popup_js.myFunction() called');
chrome.storage.sync.get(['sfUserID'], function(chromInfo) {
document.getElementById('userID').value = chromInfo.sfUserID;
})
}
//This part will need to access the DOM of the page www.ferretforce.com/salesforce and pull text valus then add them to the popup.html form.
function pulledDataFromMainPage(){
alert('popup_js.pulledDataFromMainPage() called');
var field1 = document.getElementById('field1a').innerHTML;
var field2 = document.getElementById('field2b').innerHTML
var field3 = document.getElementById('field3c').innerHTML;
var field4 = document.getElementById('field4d').innerHTML;
var field5 = document.getElementById('field2d').innerHTML;
var field6 = document.getElementById('field4a').innerHTML;
document.getElementById('field1Text').value = field1;
document.getElementById('field2Text').value = field2;
document.getElementById('field3Text').value = field3;
document.getElementById('field4Text').value = field4;
document.getElementById('field5Text').value = field5;
document.getElementById('field6Text').value = field6;
}
I know I am asking a lot but I just started make chrome extension and I am now to this so if you can help I would apprciate it. I have been looking on line and see some examples that use Jquery or something like this. I would like to do this in HTM/JAVASCRIPT/CSS that i can write.
It might be better to call content script somehow else (not background.js) since there are also actual background scripts... You need to move your page dom access code into the message handler in your content script - only from there you can access the page dom. Then you will need to reply to popup's initial request with the data by calling your sendResponse. And the initial call can be made from popup with chrome.tabs.sendMessage
and chrome.tabs.query({ active: true, currentWindow: true }, (tabs)=>{...}) to find an active one.
PS: and since you are populating input fields it is probably better to use textContent instead of innerHtml.
I cant figure out how you detect the user changing a ratchet toggle element in javascript. In the code below I have got it to detect clicking on the toggle but it doesn't work if the user slides the toggle. Is there a standard correct way of detecting toggle state change? (A documentation link would be fine here - I couldn't find anything).
(BTW, I am currently just running in the firefox browser to evaluate Ratchet, before I add to a Cordova project.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link href="/My_Webs/experiments/cordova/ratchet-example/css/ratchet.css" rel="stylesheet">
<link href="/My_Webs/experiments/cordova/ratchet-example/css/ratchet-theme-ios.css" rel="stylesheet">
<script src="/My_Webs/experiments/cordova/ratchet-example/js/ratchet.js"></script>
<script src="/My_Webs/experiments/cordova/ratchet-example/js/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$("body").on(
"click",
"#toggle1",
function(e){
console.log("toggle1 clicked " + $("#toggle1 .toggle").hasClass("active"));
});
});
</script>
</head>
<body>
<div class="content">
<ul class="table-view">
<li class="table-view-cell" id="toggle1">
Item 1
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</li>
</ul>
</div>
</body>
This works...
document
.addEventListener(
'toggle',
function( e ){
console.log(
$(e.target).parent().attr("id") + ", " +
$(e.target).hasClass("active")
);
}
);
If you want to post a toggle as a checkbox input type, you may link the toggle and a hidden input into your form.
The link is done by the id of the input and the data-matcher property of the toggle.
The script will link all your toggles to inputs given that you have correctly set the id and data-matcher tags.
Following script will do the state copy of the toggle to the input.
<input style="visibility: hidden" type="checkbox" value="" id="accept_cgu">
<ul class="table-view">
<li class="table-view-cell">
Accepter les termes des CGU *
<div class="toggle" data-matcher="accept_cgu">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<script>
$( document ).ready(function() {
$('.toggle').on('toggle', function (event) {
var inactive_ids = [];
var active_ids = [];
$('.toggle').each(function () {
if ($(this).hasClass("active")) {
active_ids.push($(this).attr("data-matcher"))
} else {
inactive_ids.push($(this).attr("data-matcher"))
}
});
$.each(active_ids, function (key, value) {
$('#' + value).prop('checked', true);
});
$.each(inactive_ids, function (key, value) {
$('#' + value).prop('checked', false);
});
});
});
</script>
I'm currently developing an overlay for Google Chrome (A toolbar if you prefer), and i have some issues with and i can't understand the reason why.
So, basically i've created an extension with this manifest.json :
{
"background_page" : "background.html",
"browser_action" :
{
"default_icon" : "images/Extension.png"
},
"content_scripts":
[ {
"all_frames": true,
"css": ["css/overlay.css"],
"js": ["js/overlay.js"],
"matches": ["http://*/*"],
"run_at": "document_start"
} ],
"permissions" : ["tabs", "unlimitedStorage", "http://*/*"],
"name" : "MyOverlay",
"version" : "1.1",
"description" : "Sindar Overlay"
}
The concept is that my background.html page will call the jquery.js and overlay.js. Then on the initialization of overlay.js it will call the html page (overlay.html) by using
<iframe id="YourToolbarFrame" src="'+toolbarURL+'">
The problem is that when i'm trying to start the extension everything seem to be good, no compilation problem but i don't see my overlay. And when i'm just opening the html page all is ok, i see it. So i'm asking myself if the problem dont come from the contentscript or from the permissions but i dont know where it could come from...
Thanks in advance.
Edit 23/02/2011 - 18:46
background.html
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/overlay.js"></script>
</head>
</html>
overlay.js
var overlay= {
init: function() {
this.injectoverlay();
//alert('Initialisation reussie');
},
injectoverlay: function() {
var body = $('body'),
overlayURL = chrome.extension.getURL("overlay.html"),
iframe = $('<iframe id="YouroverlayFrame" src="'+overlayURL+'">');
body.append(iframe);
iframe.show();
//alert('Injection reussie');
}
}
var length = {}, maxLength = 0, currentLength;
$(function(){
$('#menu li.title')
.each(function(){
// Save the Menu Length
length[$(this).attr('id')] = currentLength = $(this).height();
// Fix the height
$(this).height(20);
if(currentLength > maxLength)
{
maxLength = currentLength;
}
// To don't overflow on the content
$('#menu').height(maxLength);
})
.mouseenter(function(){
$(this).stop().animate({
height: length[$(this).attr('id')]
}, 500);
})
.mouseleave(function(){
$(this).stop().animate({
height: '20px'
}, 500);
});
});
$(document).ready(function() {
overlay.init();
});
overlay.html
<html>
<head>
<title>overlay</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/overlay.css" type="text/css"></link>
<base target="_blank" />
</head>
<body>
<div class="default">
<form id="searchForm">
<img id="logo" src="images/Extension.png"></img>
<input type="search" value="Enter you research" name="search">
<input type="submit" value="Go !" /> |
</form>
<ul id="menu">
<!--
<li class="title" id="accueil">
<a class="" href="#">Accueil</a>
</li>
-->
<li class="title" id="contact">
<a class="" href="#">Contact</a>
<ul class="dropMenu">
<li>google</li>
<li>yahoo</li>
</ul>
</li>
</ul>
</div>
<!-- Include the library of Google, more centralized.
Optimized the browser cache.
Compressed version. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body>
</html>
Currently you include overlay.js as a content script to all pages plus include it into a background page for some reason. You don't need a background page for this task. If you are doing this just to inject jquery the solution would be to download jquery.js and put it into your extension folder, then automatically inject it in the manifest.json:
//"background_page" : "background.html", - this is not needed
"content_scripts":
[ {
"all_frames": true,
"css": ["css/overlay.css"],
"js": ["js/jquery.js", "js/overlay.js"], //jquery included as well
"matches": ["http://*/*"],
"run_at": "document_start"
} ],
(besides a background page doesn't have visible body, so you inject your frame to an invisible page right now)
I'm using YUI3 TabView component, and I'd like to be able to get the index of the currently selected tab. I've been looking through the api docs, but can't seem to find the relevant way to do this.
http://developer.yahoo.com/yui/3/api/module_tabview.html
Thanks!
"indexOf" actually works if you use the "tabview.get('selection')" as the argument.
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" charset="utf-8"
src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js">
</script>
</head>
<body>
<body class="yui3-skin-sam">
<p id="msg"></p>
<input type='button' value='Button' id='button'/>
<div id="demo">
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
<div>
<div id="foo">foo content</div>
<div id="bar">bar content</div>
<div id="baz">baz content</div>
</div>
</div>
<script>
var YUI;
YUI().use('event', 'node', 'tabview', function (Y) {
Y.one('#msg').set('innerHTML', 'message area');
var tabview = new Y.TabView({srcNode: '#demo'});
tabview.render();
var displayIndex = function (tabview) {
var sel = tabview.get('selection');
var idx = tabview.indexOf(sel);
Y.one('#msg').set('innerHTML', 'Selected Tab Index = ' + idx);
}
displayIndex(tabview);
Y.after('click', function(e) {
displayIndex(this);
},'body',tabview);
});
</script>
</body>
</html>