Is there any way to edit _generated_background_page.html in chrome extension? I would like to put more js files there as modules, so it wont be everything in background.js
I saw extensions like this, but how they did that?
image
They even add iframes in background page... But how?
Related
I'm making a Chrome Extension which changes the layout of a website. When my extension is activated and the website loads, you can briefly see the real website then it switches to my modified version loading in all the CSS and JS from the Chrome Extension. Though I've used other extensions that do something similar but have it displayed before anything actually shows the real website. One example is Shine for Reddit. When Reddit shows, it shows the extensions version of the website right at the start. How can I do this?
I just started developing a small Chrome extension, and following the https://developer.chrome.com/extensions/getstarted tutorial, I tried to find a way so that even in developer mode, the extension can be clickable on all tabs.
Right now, the extension is clickable only on pages under developer.chrome.com host.
It's probably a silly question, but do we have the possibility to test it, while on development, on other tabs (not under developer.chrome.com host)? If yes, how do we set this options? I try to add <all_tabs> permission in the manifest, but it doesn't seem to work.
Thanks!
The problem was that following this tutorial https://developer.chrome.com/extensions/getstarted, a rule is set in the background.js file that the browser action to execute on other pages.
I had to add the activeTab permission and delete code from background.js.
Credit to: https://www.sitepoint.com/create-chrome-extension-10-minutes-flat/
As available here https://developer.chrome.com/extensions/user_interface#browser_action, adding browser_action to your manifest.json as against adding page_action makes the extension available in all tabs.
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
Can anyone suggest a browser plugin that will let me override a website whenever I am loading a particular website.
Example Scenario:
Whenever I load yahoo.com I want to change on how it renders the html and behave.
It needs to be able to manipulate the DOM. example, it can change the attribute of an <img height="" width="" />, example the width and height of the image.
Aside from changing attributes it also need to be able to inject new elements. example i can insert new <divs> or <p>.
I also need to be able to manipulate the head tag as I like to insert external CSS and JS for the overrides.
I primarily use Google Chrome and Mozilla Firefox.
Thank You.
Chrome has native support and Firefox via a plugin for user scripts (also called greasemonkey scripts). They are essentially javascript files that are installed like an extension. At the top you define the domains for your script to run on and you have access to modify the DOM. There are lots of examples at http://userscripts.org/ . Load a few in chrome and then take a look at the user.js file source to see how they work.
You could also do it via a Bookmarklet, however they are more of a hack compared to Greasemonkey scripts
It's called the content scripts in Chrome extension.
I just saw jsFiddle today and am wondering that is there a FireFox addon that provides jsFiddle like features. Especially when you enter the html and css, jsFiddle shows you a layout of the page. Is there any addon that shows such layout for "offline viewing"? I use Firebug but there isn't such layout. Does somebody know about it?
Not a firefox add-on, only in the interest of self-promotion:
I have created a Vim script with similar (but at the moment very limited) functionality: vimfiddler. Vim integrates with selenium to drive a browser. Provides a jsfiddlerish experience running locally on your own computer.
In Google Chrome you can edit every element of the page. Just open a new tab, hit F-12 and edit to your heart's desire. Add some css or javascript to the head tags, put whatever HTML you want in the body, and you're good to go.
This add-on sounds like what you need : https://addons.mozilla.org/en-us/firefox/addon/devtools-prototyper/?src=ss
Just install it, open the devtools, then switch to the "Prototyper" tab.