How to get instant CSS changes with Chrome Extension? - google-chrome-extension

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?

Related

What browser can update the webpage live as I edit HTML in the inspector?

I used to use Firefox and the beloved plugin Firebug to work with web pages, since you can edit the HTML-code, and see the result on the page as you edit it.
The last version to support this and firebug was Firefox 49, and all newer Firefox, Chrome and Safari version doesn't have this. You can edit the code, but you have to click outside or CMD/CTRL-Enter to confirm the changes.
Why isn't this implemented in newer browsers, it doesn't seem that complicated, and it's so useful. I can't believe I can't find anyone else discussing this on the Internet.
Is there any browser version and/or plugin to Chrome that can do this?
Thanks!
As far as I know, no browser allows this and there isn't any extension for that, unfortunately.
Though there is a feature request for the Firefox DevTools asking to add live editing.

Why does Google Chrome sometimes auto-disable an extension and require the user to click a Reload link?

As shown in the image here:
Why would Chrome require a user to manually “Reload” an extension? The extension seems to be working for a while, then suddenly a user reports that it has stopped working and I have to instruct him/her to click the “Reload” link.
As an extension developer, I would like to be able to prevent this from happening. Here’s my extension in the Chrome Web Store.
Screenshot borrowed from a similar report from another developer.

is there a firefox addon that provides jsFiddle like features

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.

Chrome extension performance

I have developed a chrome extension. The extension itself works fine and fast.
But when I start the browser and click on the toolbar icon of my extension it takes about 2 seconds for the popup to appear and to show its content (this happens anytime the browser is restarted).
Any idea what causes this and how to fix that?
Tip 1:
Use your popup page for rendering exclusively. It should be as light as possible. All the heavy loading/processing (localStorage, XMLHttpRequests, blocking javascript) must be done in the background page.
The background page is loaded when Google Chrome starts. Basically, it allows you to execute code and keep a page always running (although the popup is not present). For instance, streaming audio in a html5 tag with no popup.
Note: If you are not using a background page yet, you should be taking a look to message passing first.
Tip 2: Warning: This could fail
I haven't tested this yet, but maybe using the HTML5 manifest.cache can help you preventing loading again resources stored locally. But beware, this is HTML5 and is prone to changes and unstability across versions. (also, I am not completely sure that the cached resources will be loaded in memory before the popup is opened)
Hope it helps!

Hijacking Links From Website Using Browser Plugins

I am in charge of creating plugins for all major browsers which will hijack links from specified website visited. I wonder if this can be done by any plugin. I mean if plugins has that level of control over the website visited by the browser under my plugin supervision?
When I say hijack it means, I should be able to read the anchor tag's href attribute value and to modify it accordingly. I know how to do that in Javascript and I know Google Chrome extensions are written in HTML, CSS & Javascript so this seems to be working. Will it work for IE, Firefox, Safari?
After huge research I got to know this is possible in Chrome, Firefox and IE. I am still researching for Safari.

Resources