For a VSCode extension i want open browser within VSCode not externally, wherein i can load some URL (https://developers.redhat.com/)
I tried looking into various options to achieve it in VScode extension, what i came across is with help of webview i.e 'vscode.previewHtml' we can pass html content which would be rendered with in VSCode editor tab, but what i have is url to load. Can pass it to iframe but i can't open it in iframe
Another option is to open it in browser but it opens external browser.
what i need is to open a browser within IDE (VSCode), experience should be similar to what we get for 'vscode.previewHtml'
or as we see in IDEs like eclipse where browser window is opened right inside IDE.
As we can see below
Please give inputs, suggestions
It's possible now without extension. Open command palette (CTRL+P) and search for "Simple Browser: Show".
This is how it looks:
In order to render your html you can use the WebView API:
https://code.visualstudio.com/docs/extensions/webview
Microsoft has an extension in development, Live Preview. I use it to view html codecov reports inside of VSCODE and it at least works for that.
You just search for it in extensions and add it to VSCODE
Related
I have a chrome extension installed in my browser. When I click the extension's icon in the menu bar the extension opens as a floating pop-up, as expected.
What I am trying to do is to open the extension in Chrome via a link/shortcut/whatever from another program. As a first step I've tried opening the extension from the command line, ex:
chrome "chrome-extension://abcdefghijklmnopqrstuvwxyz/index.html"
This works but the extension opens as a new tab and takes up a full broswer page instead of a just being a pop-up. Is there a way to open the extension as a pop-up on top of any open tabs?
Sadly, it's completely impossible.
There is an API in the works, but it would require at a minimum a user gesture, at a maximum explicit invocation of the extension.
So opening a link would not be enough, nor would a Native Message be.
you cant make the native extension popup to show programatically but you could use a content script that displays the popup (using the new for example) on the tab that you want.
I am learning to write chrome extensions. Sometimes ,i do want to learn from the examples given on the chrome developer site. As the instruction says, i need a browser_action or a page_action, then right click ,then inspect popup. I am wondering whether there is other ways to debug the chrome extension.
And the other thing is , i have to write "window.reload(true)" in the debug console to reload the popup page, is there a better or more convenient way to do it?
Of course it's not needed. Your extension either has a popup of some sorts, a background script of some sorts, or a content script of some sorts.
You already know how to debug a popup.
To debug a background page, you can go to chrome://extensions/ with Developer mode enabled. Then you'll see a "background page" link next to extensions that have them - you can click that link to bring up Dev Tools for the extension.
To debug a content script, you should look into the page's own Dev Tools. The console output will be displayed alongside normal console. To type code in the console to execute in the extension's context, you need to change the the context from <top frame> to the extension in the UI:
Depends on what you want to debug.
Chrome extensions also have background page and content-scripts.
Background page console you can find here: open chrome://extensions/ and under extension you'll see "Inspect views".
Content-scripts print messages to the page console.
Popup and other pages you can open in normal tab and inspect in its console. They are accessible by the url: "chrome-extension://YOUR_EXTENSION_ID/path/to/popup.html"
I write a DOM tree protecter Chrome extension to examine if the DOM tree changes. I have the js files in background_page, how can i get those console.logs() in other test html files? What I can only find now is the debug information of chrome://extensions/ when i click on generated_background_page.html. So how can I get information of other webpages? Thanks for replying.
One thing I have found very useful when debugging chrome extensions is to use the "inspect element" feature of the chrome developer tools. If you have a page or an element (such as on a popup from your extension) that you want to debug:
Open up Developer Tools
Wait for your popup to appear (if its not already up)
Switch to the Elements view on Developer Tools
Click the magnifying glass at the bottom so you can select an element
Click on an element in the page you want to debug (e.g. the popup page)
Now your Sources view and other views line up to match the element you've clicked on. The console will now let you look at variables in that context.
If you are not able to get the extension to work, there could be a whole host of reasons.
Are all your scripts loaded form the extension's directory or are you serving
them from a site? Chrome will not load scripts from an external site
unless over https AND after the site that is serving the script has
been whitelisted. See the Chrome Content Security
Policy
for more info.
To inspect the DOM, you need to inject a content script into the page that is being loaded. Are you sure you are doing this correctly? The manifest.json must be done right or else your content script will not get loaded.
For your content script and extension to communicate, you must post and receive messages. More information is available here.
Perhaps the best suggestion I have is that you follow the Chrome extension "tutorial" carefully until you have something working and then amend it to suit your needs.
I want to be able to call functions that I am writing in a Chrome extension from the JS console in Chrome, so that I can test them easily and see how their output changes as the page changes.
But it seems as the functions I write aren't available to the chrome JS console. I don't really understand JS that well, or the chrome extension model, but I need to somehow inject the extension source into the body of the page that I am using the extension for?
If you are talking about functions that you defined in a background page, then you need to go to your extensions page, check the developer mode box, and click on _generated_background_page.html. That is where you will find your background page code.
If you mean functions in a content script, then when you are in the console, go down to where it says <page context> and change it to your extension. Then you will have access to the functions in the content script.
I'm new to Dreamweaver CS4 and making my first website. I've watched a lot of tutorials and they all just click the Preview in Browser button and they can see what their page looks like in Firefox/IE/etc.
But when I click Preview in Browser a new Firefox window opens up and it goes to my homepage and that's it.
What do I need to setup in order be able to preview in firefox?
THANKS!
I don't use Dreamweaver, although I have it as part of CS4. But I just now opened up the app, created a test HTML page, saved it, and hit F12 (Preview in Browser). And there was my test page. I honestly don't know what you could be doing wrong. I thought it might be that you didn't save your file, but you get a warning dialog if you try to preview without doing that.
After some playing around I fixed the problem myself.
First I had to go to manage site and edit the basic preferences on my website.
I had to make sure the 'URL to browse to the root of your site" is valid.
In my case it I had to add:
file:///C:/Documents%20and%20Settings/Linda/My%20Documents/website1/