I've written a Google Chrome extension (https://chrome.google.com/webstore/detail/fhmcfamnddgoloojehbeokifhaiiebfm), and I'm noticing that the extension works on my Linux desktop, but not my Linux laptop (both running the Chromium 13.0.782.107~r94237-1 in Debian unstable)
It seems that the callback I'm passing to chrome.tabs.getSelected doesn't run on my laptop, except when I have this popup page open in the debugger. (But it works perfectly on my desktop) Any idea what's going on?
Here's the code in question:
<html>
<head>
<script type="text/javascript">
function goTo(url){
if (url.search("://") == -1 &&
url.search("#") != -1 &&
url.search("mailto:") == -1 ) url = "mailto:"+url;
else if (url.search("://") == -1 ) url = "http://" + url;
url = url.replace(/\s/g,"");
console.log(url);
chrome.tabs.getSelected(null,function(tab){
chrome.tabs.update(tab.id,{"url":url});
});
window.close();
}
function pasteHandler(e) {
var t = e.target.type;
if (t == "textarea" || t == "text" || t == "password"
|| e.target.isContentEditable) {
return;
}
var url = e.clipboardData.getData("text/plain").replace(/^\s+|\s+$/g, '');
goTo(url)
}
function textBoxEnterPressed(e){
if(e.keyCode == 13){
goTo(document.getElementById('edit').value);
return false;
}
return true;
}
</script>
</head>
<body onpaste="pasteHandler(event)">
<table border="0" cellpadding="0" cellspacing="0" style="float:left">
<tr><td>
Paste in the text box to edit the URL first,
or paste outside the box to go straight there.
</td></tr>
<tr><td>
<input type="text" name="edit" id="edit" size="100"
onkeypress="return textBoxEnterPressed(event)"/>
</td></tr>
</table>
</body>
</html>
I think you are closing window before callback finishes running. Try:
function goTo(url){
...
chrome.tabs.getSelected(null,function(tab){
chrome.tabs.update(tab.id,{"url":url});
window.close();
});
}
Related
My form has a Master page, i.e., cannot use a popup Form.
I used the code below to create a popup menu associated with one of the lists, but the popup appears BELOW my list items (I can only see the last two items!) and it appears no matter which list I right click on.
Any help will be appreciated.
Here is my code (modified from a web site example):
<div id="contextMenu" class="context-menu"
style="display: none">
<ul>
<li>New</li>
<li>Edit</li>
<li>View</li>
<li><a href="#">Copy
<li>Refresh</li>
</ul>
</div>
<script type="text/javascript">
document.getElementById('# <% = lstContactsClerk.ClientID %>').oncontextmenu = rightClick;
function rightClick(clickEvent) {
clickEvent.preventDefault();
// return false;
}
</script>
<script>
document.onclick = hideMenu;
document.oncontextmenu = rightClick;
function hideMenu() {
document.getElementById("contextMenu")
.style.display = "none"
}
function rightClick(e) {
e.preventDefault();
if (document.getElementById("contextMenu")
.style.display == "block")
hideMenu();
else {
var menu = document.getElementById("contextMenu")
menu.style.display = 'block';
menu.style.left = e.pageX + "px";
menu.style.top = e.pageY + "px";
}
}
</script>
Here is my setup and i am trying to figure out if its possible.
I have an Chrome Extension which goes and parses some data from a active page and then copys the result to the clipboard. My popup.html is minimal and looks like this
<!DOCTYPE html>
<html style=''>
<head>
<script src='popup.js'></script>
</head>
<body style="width:600px;">
<textarea id="emailphone" cols="50" rows="10"></textarea>
<br>
<button id="copy-to-clipboard">Copy to Clipboard</button>
</body>
</html>
What i would like to do is actually not even show the popup at all as my script goes and creates an Alert and displays the data. But for one my script sets the Inner Html of the emailphone textarea with the parsed data and then i go and copy the textarea to my clipboard. Here is my popup script
chrome.runtime.onMessage.addListener(function(request, sender) {
if (request.action == "getSource") {
emailphone.innerText = request.source;
myFunction();
}
});
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("copy-to-clipboard").addEventListener("click", copytoclipboard);
});
function onWindowLoad() {
var message = document.querySelector('#emailphone');
chrome.tabs.executeScript(null, {
file: "getPagesSource.js"
}, function() {
// If you try and inject into an extensions page or the webstore/NTP you'll get an error
if (chrome.runtime.lastError) {
emailphone.innerText = 'There was an error injecting script : \n' + chrome.runtime.lastError.message;
}
});
}
function copytoclipboard() {
var copyText = document.getElementById("emailphone");
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
alert(copyText.value);
}
window.onload = onWindowLoad;
when i use window.close() it only closes after i close the alert. So what i am looking for is to only show the Alert and not the popup.html
I am creating an add-on which would ask the user to select music from a list and it would play it as background music. But previous posts show a sidebar with the user manually pressing the play button. I am wondering if there is a way to play it with Google Apps Script only. Also what would be helpful is if there was a volume property to set the volume?
My Code:
function onOpen(){
DocumentApp.getUi()
.createMenu("Background Music Add-On")
.addItem("Select Music","music")
.addItem("Set Volume","musicVol")
.addToUi();
}
//music selection
function music(){
var musicName = DocumentApp.getUi()
.prompt("Please select one of the music names:\n\nElevator Music,\nLeaf Rag.\nso on...")
switch(musicName){
case "Elevator":
//code to play music Elevator
break;
//So On
}
}
Playing music from a Playlist stored on your Google Drive
This script allows you to store mp3's on your Google Drive. It allows you to select which files you wish to listen too via a playlist. You must start the playlist the first time manually but then the rest of the selections play automatically. The script converts the mp3 files into dataURI's and loads them into the audio element. You can skip over the current selection and you can restart the playlist when it completes.
Code.gs
function onOpen() {
SpreadsheetApp.getUi().createMenu('My Music')
.addItem('Launch Music', 'launchMusicDialog')
.addItem('Create New Music List', 'createMusicList')
.addToUi();
}
function convMediaToDataUri(filename){
var filename=filename || "default.mp3";
var folder=DriveApp.getFolderById("Music Folder Id");
var files=folder.getFilesByName(filename);
var n=0;
while(files.hasNext()) {
var file=files.next();
n++;
}
if(n==1) {
var blob=file.getBlob();
var b64DataUri='data:' + blob.getContentType() + ';base64,' + Utilities.base64Encode(blob.getBytes());
Logger.log(b64DataUri)
var fObj={filename:file.getName(),uri:b64DataUri}
return fObj;
}
throw("Multiple Files with same name.");
return null;
}
function launchMusicDialog() {
var userInterface=HtmlService.createHtmlOutputFromFile('music1');
SpreadsheetApp.getUi().showModelessDialog(userInterface, 'Music');
}
function createMusicList() {
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName("MusicList");
var folder=DriveApp.getFolderById("Music Folder Id");
var files=folder.getFiles();
var mA=[['Item','File Name','File Type','File Id','Play List']];
sh.clearContents()
var n=1;
while(files.hasNext()) {
var file=files.next();
mA.push([n++,file.getName(),file.getMimeType(),file.getId(),'']);
}
sh.getRange(1,1,mA.length,mA[0].length).setValues(mA);
sh.getRange(2,2,sh.getLastRow()-1,sh.getLastColumn()-1).sort({column:2,ascending:true});
sh.getRange(2,5,sh.getLastRow()-1,1).insertCheckboxes();
}
function getPlaylist() {
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('MusicList');
var rg=sh.getRange(2,1,sh.getLastRow()-1,sh.getLastColumn());
var vA=rg.getValues();
var pl=[];
for(var i=0;i<vA.length;i++) {
if(vA[i][4]) {
pl.push(vA[i][1]);
}
}
return pl;
}
music1.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
label{margin:2px 10px;}
</style>
</head>
<script>
var selectionList=[];
var gVolume=0.2;
var index=0;
$(function(){
document.getElementById('msg').innerHTML="Loading Playlist";
google.script.run
.withSuccessHandler(function(pl){
selectionList=pl;
console.log(pl);
google.script.run
.withSuccessHandler(function(fObj){
$('#audio1').attr('src',fObj.uri);
var audio=document.getElementById("audio1");
audio.volume=gVolume;
audio.onended=function() {
document.getElementById('status').innerHTML='Ended...';
playnext();
}
var msg=document.getElementById('msg');
msg.innerHTML="Click play to begin playlist. Additional selections will begin automatically";
audio.onplay=function() {
document.getElementById('msg').innerHTML='Playing: ' + selectionList[index-1];
document.getElementById('status').innerHTML='Playing...';
document.getElementById('skipbtn').disabled=false;
}
audio.onvolumechange=function(){
gVolume=audio.volume;
}
})
.convMediaToDataUri(selectionList[index++]);
})
.getPlaylist();
});
function playnext() {
if(index<selectionList.length) {
document.getElementById('status').innerHTML='Loading...';
document.getElementById('msg').innerHTML='Next Selection: ' + selectionList[index];
google.script.run
.withSuccessHandler(function(fObj){
$('#audio1').attr('src',fObj.uri);
var audio=document.getElementById('audio1');
audio.volume=gVolume;
audio.play();
})
.convMediaToDataUri(selectionList[index++]);
}else{
document.getElementById('status').innerHTML='Playlist Complete';
document.getElementById('msg').innerHTML='';
document.getElementById('cntrls').innerHTML='<input type="button" value="Replay Playlist" onClick="replayPlaylist()" />';
}
}
function replayPlaylist() {
index=0;
document.getElementById('cntrls').innerHTML='';
playnext();
}
function skip() {
var audio=document.getElementById('audio1');
document.getElementById('skipbtn').disabled=true;
audio.pause();
index++;
playnext();
}
</script>
<body>
<div id="msg"></div>
<audio controls id="audio1" src=""></audio><br />
<div id="status"></div>
<div><input type="button" id="skipbtn" value="Skip" onClick="skip()" disabled /></div>
<div id="cntrls"></div>
</body>
</html>
Please read through the code. You need to add a music folder id and a couple of default.mp3's. The createMusicList() function reads your Music Folder and Loads them into a sheet named 'MusicList' with columns of "Item", "File Name", "File Type" ,"File Id", and PlayList. The last column is just a column of unchecked checkboxes for you to make your current playlist selection. Only one playlist for now, so you can enjoy building your own.
Here's what the dialog looks like:
And here's an image of my MusicList Sheet:
This is where you make your playlist selections.
Audio Properties and Methods
Apps Script Documentation
Latest Script Code
I used the answer to this question as a starting point: playing sound with google script
You would need to open a html sidebar and use an audio tag, to do this you can use the HtmlService class [1].
As a total background you can't, the sidebar must be always open to play the music. But you could still play the audio while editing the document.
To add the audio setting you can add the controls attribute to the audio tag [2]. For playing the audio automatically you can add the autoplay attibute [3].
Here is the code I implemented to achieve your goal. The code gets the selected value and uses it to change the autoplay value to true and to display the audio as well. Also, when the select element is on focus, it gets the previous selected value so later (when a new value is selected) it can be used to stop the previous audio selection and not display it anymore. For these purposes I used the onchange [4] and the onfocus [5] events.
Code.gs
var SIDEBAR_TITLE = 'Sidebar Musicbox';
function onOpen(e) {
DocumentApp.getUi()
.createMenu('Custom Menu')
.addItem('Show sidebar', 'showSidebar')
.addToUi();
}
function showSidebar() {
var ui = HtmlService.createHtmlOutputFromFile('Sidebar')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle(SIDEBAR_TITLE);
DocumentApp.getUi().showSidebar(ui);
}
Sidebar.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div class="sidebar branding-below">
<p>
A little music for your enjoyment!
</p>
<form>
<select id="music" onchange="playSelection();" onfocus="setOldValue(this.value);">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>
<br>
<audio id="player0" controls style="display:none">
<source src="[WEB-URL-FOR-MP3-FILE]" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio id="player1" controls style="display:none">
<source src="[WEB-URL-FOR-MP3-FILE]" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio id="player2" controls style="display:none">
<source src="[WEB-URL-FOR-MP3-FILE]" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<br>
<div id="sidebar-status"></div>
</div>
<div class="sidebar bottom">
<span class="gray branding-text">Docs Add-on Sound Demo</span>
</div>
</body>
<script>
var previousValue;
//Function called when select onFocus
function setOldValue(e) {
previousValue = e;
}
//Function called when selected value change
function playSelection() {
//Get the value for the selected option
var selectedValue = document.getElementById("music").value;
//Latest and previous selection IDs
var player = "player" + selectedValue;
var previousPlayer = "player" + previousValue;
//Stop and don't display the previous selection of audio
document.getElementById(previousPlayer).style.display = "none";
document.getElementById(previousPlayer).autoplay = false;
document.getElementById(previousPlayer).load();
//Play and display the new selection and put the focus on it
document.getElementById(player).style.display = "block";
document.getElementById(player).autoplay = true;
document.getElementById(player).load();
document.getElementById(player).focus();
}
</script>
</html>
[1] https://developers.google.com/apps-script/guides/html/
[2] https://www.w3schools.com/tags/att_audio_controls.asp
[3] https://www.w3schools.com/tags/att_audio_autoplay.asp
[4] https://www.w3schools.com/jsref/event_onchange.asp
[5] https://www.w3schools.com/jsref/event_onfocus.asp
Client side code
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
var verified = function() {
document.getElementById("loginform").submit();
};
</script>
<form action="www.example.com/" method="POST" id="loginform" onsubmit=" return validation()">
<input id="email" maxlength="80" name="email" size="20" type="text" placeholder="Enter Your Email" style="margin-bottom: 30px;"/><br>
<div id="captchadiv">
<div class="g-recaptcha" data-sitekey="site key" data-callback="verified"></div>
</div>
<button type="submit" value="Submit" id="reg_submit" style=" display:block;margin: 0 auto;"><img src="/favicon.png" style="width: 20px;float: left;" />Sign in</button>
</form>
Server Side code
reCAPTCHA=require('recaptcha2')
recaptcha=new reCAPTCHA({
siteKey:'site key',
secretKey:'secretKey'
})
I am working on node js.I am using google recaptcha2 and when i see lots of example and all example verify recaptcha using form submit. They define in action but my action method use in other navigation so i can use get, post request. I don't have any idea for how to use get, post request for recaptcha.I want to verify recaptcha on server side using get,post request.
I need help on back-end verification work.
Thanks advance!
Please try this code
Client side code not more secure so please use both side code
Client side
function validateform(){
var captcha_response = grecaptcha.getResponse();
if(captcha_response.length == 0 || grecaptcha != undefined )
{
// Captcha is not Passed
return ' Please verify you are not a robot.';
}else{
$.get('/captchaTest',{'response':captcha_response},function(response){
if(response == undefined && response.responseCode == undefined && response.responseDesc == undefined && response.responseCode !== 0 && response.responseDesc !== 'Sucess' ){
return ' You are a robot.';
}
grecaptcha.reset();
});
}
}
Server side
app.get('/captchaTest',function(req,res){
var requestQuery = req.query;
if( requestQuery != undefined && requestQuery != '' && requestQuery != null && requestQuery.response != undefined && requestQuery.response != '' && requestQuery.response != null ){
var response = requestQuery.response;
var verificationUrl = "https://www.google.com/recaptcha/api/siteverify?secret="+ secret_key +"&response=" +response;
// Hitting GET request to the URL, Google will respond with success or error scenario.
request(verificationUrl,function(error,response,body) {
body = JSON.parse(body);
// Success will be true or false depending upon captcha validation.
if(body.success !== undefined && !body.success) {
res.send({"responseCode" : 1,"responseDesc" : "Failed captcha verification"});
}else{
res.send({"responseCode" : 0,"responseDesc" : "Sucess"});
}
});
}else{
res.send({"responseCode" : 1,"responseDesc" : "Failed captcha verification"});
}
});
I'm newbie at chrome extension. I'm making chrome extension that play youtube chromeless player.
It worked on chrome web browser. But, it isn't working on chrome extension.
I tested local .swf file. That is worked on chrome extension.
I think, chrome extension can't call onYouTubePlayerReady().
So I called window.onYouTubePlayerReady() after swfobject.embedSWF(). But, it isn't worked at ytplayer.loadVideoById("xa8TBfPw3u0", 0); with error message.
The error message was Uncaught TypeError: Object #<HTMLObjectElement> has no method 'loadVideoById'.
Is there a problem in manifest.json? Or in YouTube API? I don't know why isn't working on chrome extension.
popup.html is
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>YouTube Play</title>
</head>
<body>
<table width="1000" height="390">
<tr>
<td>
<div id="videoDiv">
Loading...
</div></td>
<td valign="top">
<div id="videoInfo">
<p>
Player state: <span id="playerState">--</span>
</p>
<p>
Current Time: <span id="videoCurrentTime">--:--</span> | Duration: <span id="videoDuration">--:--</span>
</p>
<p>
Bytes Total: <span id="bytesTotal">--</span> | Start Bytes: <span id="startBytes">--</span> | Bytes Loaded: <span id="bytesLoaded">--</span>
</p>
<p>
Controls: <input type="button" id="play" value="Play" />
<input type="button" id="pause" value="Pause" />
<input type="button" id="mute" value="Mute" />
<input type="button" id="unmute" value="Unmute" />
</p>
<p>
<input id="volumeSetting" type="text" size="3" />
<input type="button" id="setVolume" value="Set Volume" /> | Volume: <span id="volume">--</span>
</p>
</div></td>
</tr>
</table>
<script type="text/javascript" src="jsapi.js"></script>
<script type="text/javascript" src="my_script.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
</body>
</html>
manifest.json is
{
"manifest_version": 2,
"name": "YouTube Player",
"description": "This extension is YouTube Player",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": ["tabs", "http://*/*", "https://*/*", "background"],
"content_scripts": [
{
"matches": ["http://www.youtube.com/*"],
"js": ["my_script.js", "swfobject.js", "jsapi.js"]
}
]
}
my_script.js is
/*
* Chromeless player has no controls.
*/
// Update a particular HTML element with a new value
function updateHTML(elmId, value) {
document.getElementById(elmId).innerHTML = value;
}
// This function is called when an error is thrown by the player
function onPlayerError(errorCode) {
alert("An error occured of type:" + errorCode);
}
// This function is called when the player changes state
function onPlayerStateChange(newState) {
updateHTML("playerState", newState);
}
// Display information about the current state of the player
function updatePlayerInfo() {
// Also check that at least one function exists since when IE unloads the
// page, it will destroy the SWF before clearing the interval.
if (ytplayer && ytplayer.getDuration) {
updateHTML("videoDuration", ytplayer.getDuration());
updateHTML("videoCurrentTime", ytplayer.getCurrentTime());
updateHTML("bytesTotal", ytplayer.getVideoBytesTotal());
updateHTML("startBytes", ytplayer.getVideoStartBytes());
updateHTML("bytesLoaded", ytplayer.getVideoBytesLoaded());
updateHTML("volume", ytplayer.getVolume());
}
}
// Allow the user to set the volume from 0-100
function setVideoVolume() {
var volume = parseInt(document.getElementById("volumeSetting").value);
if (isNaN(volume) || volume < 0 || volume > 100) {
alert("Please enter a valid volume between 0 and 100.");
} else if (ytplayer) {
ytplayer.setVolume(volume);
}
}
function playVideo() {
if (ytplayer) {
ytplayer.playVideo();
}
}
function pauseVideo() {
if (ytplayer) {
ytplayer.pauseVideo();
}
}
function muteVideo() {
if (ytplayer) {
ytplayer.mute();
}
}
function unMuteVideo() {
if (ytplayer) {
ytplayer.unMute();
}
}
// This function is automatically called by the player once it loads
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("ytPlayer");
// This causes the updatePlayerInfo function to be called every 250ms to
// get fresh data from the player
setInterval(updatePlayerInfo, 250);
updatePlayerInfo();
ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
ytplayer.addEventListener("onError", "onPlayerError");
//Load an initial video into the player
ytplayer.loadVideoById("xa8TBfPw3u0", 0);
}
// The "main method" of this sample. Called when someone clicks "Run".
function loadPlayer() {
// Lets Flash from another domain call JavaScript
var params = {
allowScriptAccess : "always"
};
// The element id of the Flash embed
var atts = {
id : "ytPlayer"
};
// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
swfobject.embedSWF("http://www.youtube.com/apiplayer?" + "&enablejsapi=1&playerapiid=ytplayer", "videoDiv", "640", "390", "8", null, null, params, atts);
//window.onYouTubePlayerReady();
document.getElementById("play").onclick = playVideo;
document.getElementById("pause").onclick = pauseVideo;
document.getElementById("mute").onclick = muteVideo;
document.getElementById("unmute").onclick = unMuteVideo;
document.getElementById("setVolume").onclick = setVideoVolume;
}
function _run() {
loadPlayer();
}
google.setOnLoadCallback(_run);
Please help me.
Recently I've encountered the same issue when working on a Chrome extension. When testing, the calls are simply not triggered. Until I've read this:
To test any of these calls, you must have your file running on a webserver, as the Flash player restricts calls between local files and the internet.
From YouTube's Player API Documentation