How to make a chrome plugin - plugins

I was curious how to make a chrome plugin that loads some JS on every page - I've seen it done before, but now I want to make my first chrome plugin, one that changes all the fonts on websites to comic sans ms. Yep, this is a prank to pull on friends computers.
I would assume it would take like 4 lines?

http://www.google.com/support/chrome/bin/answer.py?hl=en&answer=95416
not really a plugin, however, it will work if you change it to what you want.
I've only tested it on stackoverflow and google.
If you actually want to build an extension
http://code.google.com/chrome/extensions/getstarted.html

Related

What new JS/HTML features is GitHub using?

As of a couple days ago (let's say 2018-01-25), GitHub has started displaying a banner announcing that they have officially dropped support for "older versions of Safari" and recommending their visitors upgrade to Chrome or Firefox. I happen to still use Safari 9.1.2 (11601.7.7) on El Capitan (10.11.6).
I've found that usually when a website says "please upgrade your browser," Safari will still work anyway. However, with GitHub, it's different! I confirm that on El Capitan, many UI elements on the new GitHub site do not work at all. (But the site has not changed in appearance at all. The new UI elements look exactly like the old ones, but they no longer work in Safari.)
For a concrete example: On the Pull Requests tab, clicking on any of the three arrowed UI elements (such as "compare across forks") does nothing. Clicking on the other, un-arrowed, UI elements continues to work fine in Safari.
[
Safari's Developer Console doesn't show any warnings or errors from the page, so whatever's going wrong, it's not apparent to Safari itself. I might guess the issue has to do with some new AJAX feature?
Anyway, the question is, what new JS/HTML features are being used by the new site in order to break compatibility with Safari/El Capitan? Where can I go to learn more about these new features, their functionality, and their adoption by various browsers?

Get the real-time web design preview from the browser

Assume that I have two monitors assigned to my pc. Now I want to get the preview of a web site while coding it. Is there anyway to do this?
eg:- Do the coding from sublime text from a one monitor and the meantime watch the output from the Firefox web browser.
I have used live.js for this more than once. It can work either as a bookmarklet or embedded on your page, and it works in any browser as it's not an extension. Also requires no other software to work.
The downside is it that it will flood your developer tools with HEAD requests every second or so to determine when to reload things. That's the cost of not having to install external software.
You can use the LiveReload plugin for SublimeText. It listens for changes to your code files and updates them in the browser in real time.
Also, do not forget to add the respective browser extension. That should save you from adding any scripts into your page.
You could use yeoman ( with Grunt or Gulp depends on which generator you want to use ).

VSCode plugins and thoughts on alpha release

So I'm starting to guess Javascript wasn't the best choice for VSCode to be based on. It is pretty much the same as SublimeText and even slower, though the debugger and code intel is awesome and far beyond Sublime's capabilities.
The thing is I suddenly got a chrome-like inspector frame on the right side of the window, which caught my attention and got me googling about it (too bad almost nobody is talking about vscode yet so it's a pain to even find some info), and found out another person got the same weird issue. Somebody told him that F12 opens the inspector like a normal web app so you can look under the hood (which os most likely bullcrap since it makes no sense, probably just a bug).
The thing is I decided to test out keypresses, and discovered Fn+Shift+Cmd+F12 opens a new window with a weird button and a web inspector, which has no utility at all, but it's there so I got curious and messed up with it for a while. Bad idea since it crashed the entire app.
All this story has the point of warning about how Javascript is not as stable and independent as Objective C, since it's obviously working on top of V8 and Webkit and whatnot, any of which multiply its chances to crash.
Sublime has also crashed for me a couple times, but it does Atom Saving (operating system's native autosave that stores every change in the filesystem so app crashes don't affect the files).
VSCode is not native and is in a very alpa state (version 0.1.0 as today), so this is kind of a feedback for them and a warning for other users, posted here because there is a link for this stackoverflow community on their website, and is the only community-driven way of feedback they have.
I wish they open the development so others can contribute or, at least, do like SublimeText which isn't open but supports extensibility thru plugins and python console.
Now, the question:
Is there a way to make Sublime plugins work here?
The keybindings you have found are used by us internally to debug VSCode quickly in case we notice a problem. We simply forgot to remove them, kind of like how Ctrl+Alt+Delete happened :).
We will remove these keybindings with our next update, to avoid confusion, in a couple of weeks.
We have plans on supporting plugins, we have made progress on this story, but we were not happy enough with the API, and we decided to further validate and improve it before making it public, to avoid as much as possible future API breakage.
As for the actual question, it is not possible to run Sublime plugins in VSCode, for similar reasons why it is not possible to run Sublime plugins in Eclipse or in Visual Studio. There is, however the possibility of code sharing between plugins developed for different platforms, see for example Omnisharp, which is shipped with VSCode and for which there is a Sublime plugin.
You're complaining about VSCode being created using HTML, CSS and JavaScript and not something like C# or Objective C. You do realize that since day one the following Apple apps were made with a similar hybrid approach of Objective C and HTML, CSS and JavaScript. These are apps that millions of people use: iOS: iTunes app, iTunes Store app, App Store, and on desktop: iTunes, App Store.
Visual Studio Code is a preview, meaning something that just left alpha stage development and is in early, early, early beta, like just a week ago. So there are lots of things that are still missing or not totally working yet. The Visual Studio team is working at three-week sprints and intend to update the product at that pace, so if you've downloaded it, don't expect it to have every possible feature yet. This is a preview. Explore it. If it doesn't fit your current workflow, don't use it. Stick with what you have. But keep an eye on it because it will evolve steadily over the coming months.
I tried F12 in VSCode on windows and it opened the Dev Tools window, which makes sense since it's built on GIT's open source editor Atom & Chrome.
Sublime plugins? No, you can't use ST3 plugins in Atom, but hopefully we'll be able to use Atom plugins in VSCode once plugins are included in VSCode.
At the moment VSCode don't have any functionality for plugins, but it's coming soon see forum
There is also menu item under help in VSCode for reporting issues and suggesting features.
Me too would like Plugins for VS Code. As I would like a WakaTime plugin as I'm spending so much time working in it :). Both on Mac as in Windows.
I also discovered F12 one day but just thought: 'wow pretty cool!' and nothing more. But hey, I'm a webdev.. :)
It's now october and it's still there. And I hope it will stay. Just like crrl+alt+delete. #Sebastian I agree with #JimmyBoh, the whole preamble of this question is probably better suited to be put on a forum. Otherwise this question will probably be closed as 'not constructive'. To prevent other non-answers like this one :).

firebreath plugin refresh after update

I want to reload a plugin after update without restarting browser. I tried the mac version, it works fine, howeve, I need to change the plugin name for each version.
navigator.plugins.refresh(false);
http://www.firebreath.org/display/documentation/Deploying+and+updating+your+plugin?focusedCommentId=8585308#comment-8585308
In windows, I tried those steps and I couldn't make it work. Has anyone had any luck with this? Does anyone know what could be wrong?
"On Windows you even need to install it to a version-specific directory with a version-specific filename. Once the plugin is installed, you can try the following to reload the plugin in open browsers
<script>
var myplugin = "<object id=\"plugin\" type=\"application/x-foobar\"> </object>";
function onload(){ // Assuming this function put your plugin on the page in the first place
document.getElementById('pluginHere').innerHTML = myplugin;
}
function reload(){
document.getElementById('pluginHere').innerHTML = "";
document.getElementById('pluginHere').innerHTML = myplugin;
}
</script>
thanks alot.
This is a difficult trick that can go wrong in a lot of different ways. It's difficult for me to guess what might be going wrong specifically, particularly since you said "on windows", but you haven't specified what browser that is. All of the browsers work differently in subtle ways and IE and the others are completely different as far as this goes.
Things you could try:
use setTimeout to add a small delay between removing the plugin from the DOM and re-adding it
open about:plugins and then shift-refresh to see if it picks up the new version
Try different browsers and see what the behavior is
Use Process Monitor to monitor the queries of the registry and see when the registry keys are being accessed; use this to help plan your strategy.
Anyway, I hope some of that helps; I used to upgrade that way but it was too error prone and too prone to things changing with new browsers, so these days I just make the client restart their browser on upgrades. It saves a lot of hassle and lots of development time.
I use a signed CAB with MSI inside to load the plugin on internet explorer.
On the first time install I found that the plugin can be accessed from Javascript but events were not working.
When I looked at loaded plugins, the plugin was not loaded.
If I refreshed the page the plugin is loaded.
my solution was to add the following code from this stack overflow question
One time page refresh after first page load
This worked like a charm.

Easier way to edit the html of a Tumblr theme without using their interface?

In building a Tumblr theme I've got an external .css on my server which is very convenient because I can work directly in my editor, save to my server and refresh to see my results.
However, if I need to make changes to the HTML of my theme I've been making the changes in my editor, copying everything over to the "Customize Theme" option in Tumblr, then having to save there. This is really tedious and cumbersome because of the way their editor is laid out (the html covers the entirety of the the preview).
Does anyone have a smoother workflow?
Even if it involves just viewing my .html directly from my server when tweaking, then pasting it in when done. Like some way to inject test content so it's not just the html template tags?
While Tiny Giant Studios is right as far as the Theme Garden is concerned, there's nothing stopping you from externally hosting 'til your heart's content while you're actively developing.
To that end, you might try Tumblr Themr. I haven't actually tried it yet, but it sounds promising enough.
EDIT: Seeing as the original link is not resolving, you may also try their github page
The short answer is an unfortunate no.
The Tumblr system requires that all assets (from CSS files to images) be kept on the tumblr server. Seeing as theme developers (at the moment in any case) do not have direct ftp access to a theme's directory (if that even exists), one cannot work from an editor (e.g. notepadd++) alone...
I'm not sure if they're looking into changing this, but for the time being we're stuck with being copy/paste solutions.
One thing you could, however try is copying over all the HTML markup and then using browser plugins - like stylebot or developer tools for chrome - to write the CSS and once you're done, copying over all the CSS in the head section of your theme.
I have recently found that Tumblr features GitHub integration where you can just push to a repository and it updates the theme on your blog. I have not tried it myself but I probably will here in the next few hours.
Check it out!
EDIT: My mistake this is only for theme creators who plan on submitting their themes to the list of Tumblr themes that can be chosen by users. Someone may still find this useful so I will leave this answer.