I am writing a visual studio code extension and I'd like to be able to open a browser window with a specific url in response to a command. I know that Electron has a BrowserWindow class but it appears that the Electron API is not accessible from a vscode extension.
I'd prefer the browser window to open within the tool but I'd be ok with opening the web page in my default browser if it is not possible.
How does one open a web page from an extension?
This was added recently (see microsoft/vscode#109276).
Open the pallet (Ctrl + Shift + P)
Select "Simple Browser: Preview"
Enter web address
You can use the Live Preview extension from Microsoft:
[Deprecated] Browser Preview
To open a browser window inside VS Code you can use the WebView API, though you need to supply HTML content rather than a URL:
export function activate(context: vscode.ExtensionContext) {
context.subscriptions.push(
vscode.commands.registerCommand('catCoding.start', () => {
// Create and show panel
const panel = vscode.window.createWebviewPanel(
'catCoding',
'Cat Coding',
vscode.ViewColumn.One,
{}
);
// And set its HTML content
panel.webview.html = getWebviewContent();
})
);
}
function getWebviewContent() {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cat Coding</title>
</head>
<body>
<img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="300" />
</body>
</html>`;
}
Depending on your specific use case, there's also the Browser Preview extension which registers a command browser-preview.openPreview that you could use (you'd probably want to list browser-preview as a dependency to ensure it's installed).
And finally, if you just want to open in a normal browser window you can use the env.openExternal API. When running in remote environments this will also take care of exposing ports and mapping to the exposed hostname (if it's a localhost-served service):
vscode.env.openExternal(Uri.parse("https://www.stackoverflow.com/"));
Steps:
Open vscode
Click ctrl + shift + P
Search Simple Browser Show
enter your localhost URL
step1: Open command Palate {shift+ctrl+p}
step2: search for -> Simple Browser: view
step3: Click on it and Enter webLink what you want to view
Related
I'm currently trying to write a form in HTML that passes its input to a spreadsheet. I did it as shown in the following video: https://www.youtube.com/watch?v=RRQvySxaCW0&list=PLv9Pf9aNgemt82hBENyneRyHnD-zORB3l.
The problem is that the Logger in addInfo() function isn't working when the button is clicked (In the Logs is no "Hey" when the button got clicked).
My Code.gs (Google Apps Script) file:
function doGet(){
return HtmlService.createHtmlOutputFromFile("index");
}
function addInfo(){
Logger.log("Hey");
}
My index.html file:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<button id="btn">Klick mich</button>
<script>
document.getElementById("btn").addEventListener("click",doStuff);
function doStuff(){
google.script.run.addInfo();
}
</script>
</body>
</html>
Is anyone knowing why it is not working like that?
I appreciate your help.
Best regards,
Max
Issue
The logs of triggers like doGet() cannot be seen from the Apps Script IDE Logger.
Solution
Follow these steps to achieve what you are aiming for:
Instead of Logger.log use console.log.
In your script editor go to Resources -> Cloud Platform Project.
Select the project you want to associate the script with. For that you will need to have previously created a project in the Google Cloud Platform and use its project’s number.
Once you have your script linked with the project, go to View -> Stackdrive Logging and there you will be able to see the console logs of the script including the ones in the trigger functions.
For more information regarding this process, check this post where they explain more extensively the use of the Stackdrive Logger for Apps Script.
I hope this has helped you. Let me know if you need anything else or if you did not understood something. :)
I ran it as a dialog like this:
I injected <script> tags into my squarespace template making the <main> display:none. Now I cannot edit that section through squarespace because it is gone. Recommendations how to get it back without starting from scratch?
$( "#page" ).css( "display", "none" );
was the code I injected into the HTML.
Thank you in advance.
Its hard to understand what you are asking, but i'll assume that you added that single line of code, it hides everything when you navigate to your site page, and you are not sure how to go back to the adminstration page to remove that line of code?
You used "code injection" to insert that code. You can go back to that same code injection location and remove that line of code. The squarespace manual has documentation on code injection. If you are not sure where to go to get back to the administration pages, you can enter a url like this: https://<yoursite>/config for example: https://mysquarespacesite.com/config
For your problem I have one solution using Chrome inspector console tool(inbuilt tool of Chrome browser), make sure you open your website on Chrome browser with login to your squarespace website and follow these steps:
On your website homepage for example: https://<yoursite>/config, Click F12 from your keyboard OR right click using mouse and click on Inspect which will show you inspector mode of Chrome browser
Go to Console tab from inspector tool
Paste following code into Console:
document.getElementById('page').style.display = "block";
Hit enter and your <main> tag will be set as display block
Now your <main> section should be visible, go to code injection of your website and permanently remove display : none which will fix your website hiding <main> section problem for forever
Following are pictures of every step:
Note: I have tested this code into demo template of Squarespace website: https://bedford-demo.squarespace.com
Use the below code. Your code will execute only when you are not logged in as administrator.
if (window.top.location.href == window.self.location.href) {
$("#page").css("display", "none");
}
Is there any way to call or run .ahk files from web page using any of (HTML - JS - PHP)?
I need to start ahk files from my web pages on link or button clicks
Here is an example of how it can be done by using some evil activeX.
It used to be possible to access a users whole computer using activeX in the Internet Explorer. Nowadays ActiveX is mostly disabled. But we can still create .hta files to render html etc and these files allow the usage of activeX.
Try to save this as something.hta
<!DOCTYPE html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=9'>
<script language="JScript">window.resizeTo(200,100);</script>
<script language="JScript">
function runAhkScript() {
var ahkExePath = "C:/Program Files/AutoHotkey/AutoHotkey.exe";
var scriptToExecute = "C:/aaa/a.ahk";
new ActiveXObject("Shell.Application").ShellExecute(ahkExePath, scriptToExecute)
}
</script>
</head>
<body>
Run the autohotkey script
</body>
Adjust the path to your autohotkey.exe and your script and make sure you use forward slashes in the pathes.
You can not do that while accessing your web pages over a remote server (even localhost). If you access your web page on your local machine (i.e., typing "file:///C:/path/my web page.html" in the browser), and you use Internet Explorer as your browser, you might try:
<button onclick="window.open('file:///C:/path/my ahk script.ahk')">
Launch My AHK Script
</button>
Or, you may have to try it this way:
<button onclick="Process.Start('C:\path\my ahk script.ahk')">
Launch My AHK Script
</button>
(But maybe switch the slashes to "/" or add "file:\\" (trying with two or three slashes, and in each direction).
Hth,
We currently have an iframe-based Facebook canvas application in the works. The canvas portion is working fine and doesn't really touch the Facebook API at all, since we don't really need any permissions from users in terms of accessing their social graph; the data we're using comes entirely from outside of Facebook.
What we would like to do is allow users to add an FBML version of our app to their profiles as a tab. However, it isn't clear how we are supposed to go about enabling that functionality using the current Facebook APIs.
The canvas page and callback settings are set up and working correctly, and we currently have a tab name and URL set up in our Application Settings (and hitting the tab URL directly will load our minimal test page), but there's no obvious way to offer users the ability to add this tab to their profiles.
Our initial thought was that we would need to add our own "Add Profile Tab" button in xfbml as mentioned at http://wiki.developers.facebook.com/index.php/Fb:add-profile-tab
But even when we reduce the iframe to something as barebones as
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US" type="text/javascript"></script>
<fb:add-profile-tab></fb:add-profile-tab>
<script type="text/javascript">
FB.init("<our secret key>", "xd_receiver.htm");
</script>
</body>
</html>
the xfbml element fails to render. Safari and Chrome both list the following error in the console: "Unsafe JavaScript attempt to access frame with URL [our app url on facebook] from frame with URL [URL our iframe loads from]. Domains, protocols and ports must match."
We do have the Connect URL pointing at our app in the Connect tab of the application settings page. The xd_receiver.htm file is located in the same directory as the iframe page and its contents are
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>
</body>
</html>
which seems to be what all of the relevant documentation recommends. The browser is definitely loading it as verified through the relevant debugging panes (web inspector, firebug, etc).
So the question is, is this the proper way of going about adding "add to profile tab" functionality to our application? If so, how do we resolve the cross-domain error? If not, what should we be doing instead? The current documentation seems to focus heavily on the Graph and Authentication APIs, neither of which really mention profile tabs.
In your Application settings, ensure these are set:
Canvas >
Canvas Page URL
Canvas Callback URL
Profiles >
Tab Name
Tab URL
The Tab request will go to {Canvas Callback URL}/{Tab URL}. Then something like this should work: http://apps.facebook.com/fbrelll/xfbml/fb:add-profile-tab
That's using the updated JS SDK. I can't post more links, but the developer site and github repository have useful information about the SDK.
It turned out that <fb:add-profile-tab> simply doesn't render without the user having first allowed the app to connect to them via something like <fb:login-button>
we have image files in IIS6.0 server, and wanted to open in browser using ASP.NET2008.
My problem is that it always shows the open/saveas dialog, but what I wanted is, it should open the file in the browser directly. we are using ASP.NET2008. It would be great if you provide the sample code.
thanks
You could try to embed those file(s) into a simple HTML page. This will make browsers display it without prompting the user.
Making your code output bare bones like:
<html>
<head><title>YOUR_IMAGE_NAME</title></head>
<body>
<img src = 'YOUR_IMAGE' alt='YOUR IMAGE DESC' />
</body>
</html>
to the browser should be sufficent.
HTH