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.
Related
My question is along the same lines as this: Change the Chrome extension icon
But I'm wondering instead about the large icon of the extension on a new tab page. Can it change itself based on data? All I have in mind is a simple countdown-calendar (as in, the whole point of the extension is to be a big ol' number on your new tab page), so the actual code wouldn't have to be very long, if icon-changing is possible. (It wouldn't even need to sync or connect to the Internet for any reason.)
My strong hunch is no, because I've never seen an extension do so, and I would expect that if it could, my Chrome's Gmail button would probably display the number of new messages or something. But I figured it didn't hurt to ask.
PS: I've never created a Chrome extension, I just had that idea for one just now. Anyone reading this can feel free to do it themselves, but otherwise I'll make it when I get the time, as a learning exercise.
Only apps (not extensions) can have an icon on the New Tab page (NTP).
This icon have to be declared via the icons property in the manifest file, and cannot dynamically be updated.
I can imagine two ways to get a dynamic icon on the options page:
Create an extension that replaces the New Tab page. Have a look at the docs for Override Pages.
Create an extension that uses the chrome.management API to enable/disable apps. This method might work for your personal setup, but it requires a new App for each icon. This feels a bit hacky, but hey, it might work.
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!
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.
I generally use firebug to remove unwanted divs and tags and resize stuff on the web-page .. frequently for gaming sites like chessbomb. But this is tedious, and every time tab reloads, i would have to do it all over again.
So is there any plugin which would remember the setting for particular site and apply it on the load itself. For starters i just need something to remove div tags based on names. If it can resize too then thats all the more useful.
Thanks.
You can use Adblock Plus with some CSS selector usage to do this. Look at the doc related to this here.
For example, you could probably use something like
domain.com##div.class
to hide those divs.
This is a use case for the greasemonkey firefox plugin. You'll need to know a little javascript, but if you're doing these sorts of things in Firebug, I would assume you won't find greasemonkey too dofficult.
Have a look at http://www.greasespot.net/ and http://userscripts.org/ and you may even find someone has already written the script you're after.
To quote wikipedia on Greasemonkey:
Greasemonkey is a Mozilla Firefox extension that allows users to install scripts that make on-the-fly changes to HTML web page content on the DOMContentLoaded event, which happens immediately after it is loaded in the browser (also known as augmented browsing).
As Greasemonkey scripts are persistent, the changes made to the web pages are executed every time the page is opened, making them effectively permanent for the user running the script.
Is there a cross-browser compatible way to post a form in one tab of the browser to another (which I know is open and is of the same domain)?
I tried window.name='some_name'; and target='some_name' on the form, but this does not seem to work. Am I missing something?
There is no standard to how tabs are handled via javascript, so you are out of luck.
Most browsers these day also make sure each tab is segregated/partitioned from others, as much as possible, so this is unlikely to change in the recent future.
The closest you can get to posting to a different page is to use AJAX, or possibly using frames.