I have an idea for a useful tool but I have no idea where to start. (I apologize for the vague nature of the question, but I do think it can be answered in a specific way and therefore is appropriate for SO.)
Here's what I'm after in a nutshell: a Chrome extension that darkens/shades the whole viewport except for the "current" line, i.e. the line you're reading. (I explain momentarily how the "current" line is determined.)
Pretend the line outlined in red is the highlighted line and everything above and below is grayed out. (My mockup sucks but I'm working with limited tools right now.)
When the page loads and you turn on the extension, the "current" line is the first line of paragraph text. To go to the next line, press the down arrow. Ideally, your highlighted line is in the exact middle and the rest of the page "slides underneath" to the extent that it can so your eyes don't have to move.
So here's my question: if you knew HTML/CSS/JavaScript well enough but you'd never written a browser extension, where and how would you start this? Do a plain JS POC first? Build the POC as an extension?
To be clear, this isn't a "plz how i write ecomerce site" question where I'm asking you to spoon feed me the whole thing. I'm just asking what you'd do as the first step. I realize this is a non-trivial undertaking. Thanks in advance.
If you know HTML/CSS/Javascript well enough to get the effect you after, then getting started with a Chrome extension shouldn't be hard. Just read the Chrome extension developer documentation. There are loads of example extensions as well.
You basically need to make a package directory, containing a manifest.json, and specifying a single "content script" which would contain all your code.
It could make sense to start out developing based on a bookmarklet that injects a script tag (with file:///path/to/yourscript.js) because I think that would be slightly faster wrt loading new code, resulting in a slightly faster development cycle. You could also set up a dummy page to always include this particular script tag so you only have to reload that page to see your change. Even fancier: Use http://livereload.com/
Otherwise you need to instruct chrome to reload the extension manually after each change in your code.
You may like to use Extensions Reloader for easier reloads.
I like the idea by the way!
Related
I have a javascript link (works like a plugin, but not plugin, it's just a javascipt link), the user can just drag and drop the link to it's bookmark bar.
Everything is working, but when the URL/location link is too long, it's very annoying that when the use mouses over the bookmark, it will also show the URL/Location link.
So is there a way not to display the URL/Location link when mousing over?
It would be better if we can display a customized description;
It would be better if it works for all major browsers;
It would be better if it's cross-platform;
Any reasonable suggestions or even hacks are also welcomed as long as it will improve the user experience.
Thanks.
So is there a way not to display the URL/Location link when mousing over?
Not without modifying the browser at a deep level. And if you are going to do that, you don't need to use a bookmarklet.
But you can add a comment to the code to explain it.
Example:
javascript:/*--A-very-short-description--*/document.location=...
I choose to use - instead of spaces because spaces are encoded to %20, which is much worse that - for reading.
This won't hide the code, but it does make the bookmarklet slightly more friendly.
Using this, there is a slight trick that in Firefox and maybe other browsers that sort of "hides" the code. Firefox shows only the beginning and ends of the code, not all of it. So if you code begins and ends with a comment, you can effectively hide the code.
Approximate example:
javascript:/*------------------------*/document.location=.../*------------------------*/
In Firefox this will look something like "javascript:/------------...--------------/"
You can experiment with the details to get the desired result.
At work, I have to jump into old mysql_query procedural website build higgledy-piggledy (some var are camelCased AND underscored, no indent code, page are build in table ...)
Anyway, usually I m using ST2, but here I can't. So to search my line code, I use dreamweaver to click on the screen preview and the cursor drop on the code line I want.
I do not like and I don't know dreamweaver. But as code is UNREADABLE, that is the only way I have to work.(My boss doesn't want rebuild theses sites).
Here is my question, does anybody know for ST2 a way (or a plugin) to split screen and click on screen preview to go right to the code line just like dreamweaver preview does ?
Regards.
Answer is simple, you will never find something like that.
Try here - http://webdesign.about.com/od/windowshtmleditors/tp/windows-wysiwyg-editors.htm
WYSWIG html editors.
Try Sublime CodeIntel, as well says this page:
...This plugin brings a little of IDE functionality into ST2. This plugin reads all your code and is able to code-complete, jump into
definitions and function call tooltips. Although sometimes looks a
little buggy, it’s still worth having it around. It’s a huge time
saver, especially when you are dealing with other’s people code.
If is suitable for that project you can remove the package later.
Recently I decided to write a very simple Google Chrome extension. All it's going to do is to hide some DOM-elements from the web-page using JavaScript when user presses the extension's button.
Since I knew nothing about Chrome extensions, I started reading tutorials, and I came across this Google's sample: A browser action with no icon that makes the page red
This sample is really close to what I want to make. The problem is that I can't make it work. Whenever I load the extension in Chrome, I can see the button of this extension, but when I press it - nothing happens. Sample doesn't work, probably I should know something I don't know yet.
And before you started asking me:
Yes, I tried restarting the browser;
I use the newest version of Chrome.
Thanks for help.
If you open up the sample zip... find backgrond.js... edit.
Find the line that says:
null, {code:"document.body.style.background='red !important'"});
and remove the "!important". so it should read:
null, {code:"document.body.style.background='red'"});
That is it. just save and reload the extension, should work (unless the page has an !important flag set to the background).
I am afraid I don't know why the "!important" tag doesn't work but I have never been able to get it to work in an extension. Hopefully someone else here will be able to give an explanation and maybe a work around.
I think I can help bring some clarification to the "!important" override attribute causing the extension to break. Though I am not 100% I believe that this attribute is not allowed for issues involving security complications. I have a link to another SO thread that may help clarify this as well.
My CSS is not getting injected through my content script
I'm assuming from reading this article that you must either use the !important override when content scripts specified in the manifest file. Otherwise if the css is being injected !important is not required. Again not 100% on this.
So I am using the omnibox in my extension, and after a user enters something in the omnibox, it becomes part of the extensions "history" (which would be a nice feature). However, when the history entry is clicked on, it goes to "chrome-extension//?q=, and that returns an Error 6 (net::ERR_FILE_NOT_FOUND). Is there any way to remedy this situation, either by allowing this to act as it did the first time, or just by disabling the history?
EDIT: so it turns out one cannot inject content scripts into chrome-extensions (even though the documentation says you can (they're fixing this hopefully)
Any other advice is still appreciated, but I've become less hopeful that this can be done.
I'm currently using CodeMirror as a browser based code editor, but what really annoys me is its lack of real tabbing. It uses spaces instead of tabs, and I just cant get my code as clean as desktop editor.
Are there any better editors out there? It can be DOM based or Javascript or even browser specific, just as long as it gives me real tabs! :)
PS. I've had a look at Ace, which looks like it should do the job, but I cant seem to get real tabs to work - anyone tried it?
Cheers,
Chris.