How to .NET package JavaScript as an Interner Explorer 8/9 Plugin, with the JS to be included in all IE browser pages?
I have recently finished writing JavaScript code for a browser addon, which basically runs on page-load via a JS load event listener, and for given domains it then checks for certain elements in the DOM and adds new relevant elements(i.e. information) to the page.
Since the JavaScript only reads/affects the HTML DOM independently (and does not need any toolbar buttons or anything else) the JS purely needs adding to the browser's webpages.
I have packaged the code to work with Firefox and Chrome and those are both working well, and I can run the code for IE in 'bookmarklet' form without problems, but I would like to learn how to package JavaScript as an actual .NET .MSI addon/plugin that will install for the current Internet Explorer 8/9.
Does anyone know of a suitable guide or method I might refer to please? I have tried searching online for tutorials but most walkthroughs refer to writing the plugin body itself (usually in other languages) and are thus not regarding packing existing JS.
I hope someone might have the solution please?
Note: Someone packaged an old version for me as a MSI installer for Internet Explorer 7 a year ago, which installed into Program Files with a plugin.dll plugin.tlb and plugin.InstallState plus BandObjectLib.dll Interop.SHDocVw.dll and Microsoft.mshtml.dll if that is useful.
Edit: Does anyone else know of any other options please?
IE doesn't have a mechanism for this, there simply is no JavaScript based extension ecosystem (though there are other methods to create extensions) for those browsers, yet. IE8 won't be getting one, you can pretty much guarantee that, IE9...we'll see what happens.
The closest JavaScript option available to you would be bookmarklets, which have much more limited functionality...but it's what's available.
Check out http://www.add-in-express.com/programming-internet-explorer/ and http://www.add-in-express.com/programming-internet-explorer/deployment.php they sell a package for this. It will cost you 200 dollar, but will save you allot of time (atleast, It saved me allot of time :) ).
I found a tutorial to create a plugin that loads JS-Code
http://shout.setfive.com/2012/05/01/internet-explorer-extension-quick-start-and-skeleton/
Related
I just realized that what is a nice and working layout of a form with a webresource in on-line version, looses some (but not all) of the formatting when accessed via Outlook. It looks ugly and, I also get errors.
It's somehow related to the JavaScript added to the solution. Or, rather, the web resources, I'd say. Any suggestions on how to debug? F12 doesn't show the console when run from Outlook. I haven't done much with that version so any hint might be of help.
Are you able to narrow down your problem to a part of the script? Could you for instance disable and enable parts of the script(s) to see what works and what does not?
Since the layout is also being influenced, I think you are doing some (or a lot of?) DOM manipulation. This page on MSDN states:
HTML DOM manipulation is not supported
But there should not be that much of a problem (heard that one before...) using Outlook: Dynamics CRM 2011 Outlook client and browser rendering
Edit:
Just to prevent people overlooking the link to a related post from the comments: Random JavaScript Errors in CRM 2011 Outlook Client
Although the page you see in the CRM-Outlook is indeed rendered by IE, it's being served from another version of the engine than what is used to browse. During the rendition process it's "picturized" (lacking a better word for it) so what you see originates in a webpage but isn't one.
I don't think there's a way to debug that version. You can only rely that the development you've tested will work as supposed to. Note that there's no connected process of IE run at the same time as the Outlook client.
I'll gladly stand corrected but as far I've tried (and I've tried a lot, a lot), there's no way to get there.
I would like to be able to add custom snippets of javascript to any site that matches a regex. This is mostly because of sites that I use daily because of specialized content, but which have a poor design. I want to be able to do something like:
Visit site See that sidebar overwrites content
Whip out developer tools, find div id for sidebar
Edit a snippet of javascript which is executed on document.ready for this domain:
$('#sidebar-right').remove();
A bit of searching for user scripts tells me that I need to be writing a Chrome extension, which seems unfortunate and overkill. Is there not an easier way, or an extension which is nothing but a javascript editor that assigns snippets to domains? I'd really like to be able to edit in Chrome itself, or at least have a file that I can just leave open in MacVim all the time. An extension requires unloading/installing to update as far as I can tell.
If I just had one big javascript file, that would be fine. I'd just wrap my customizations in domain checks.
Bonus love if I can write in CoffeeScript.
The answer is to use the Tampermonkey chrome extension.
https://chrome.google.com/webstore/detail/dhdgffkkebhmkfjojejmpbldmpobfkfo
Why not dotjs http://defunkt.io/dotjs/ ? It's local, you can version it with git, you can easily take it to another computer...
Another alternative that neatly solves the problem is Custom JavaScript for websites. You just need to install the extension, which takes around 2 seconds, and then you can immediately start typing your custom JavaScript for the specified website.
The extension automatically recognizes the current website, so all you need to do is write your code and click on Save. You can also easily import jQuery or your external scripts for convenience.
Custom JavaScript for Websites 2 is an alternative to Custom JavaScript for Websites, with some bug fixes and sync scripts across devices feature.
Snippets are available directly in Chrome Devtools
https://developers.google.com/web/tools/chrome-devtools/javascript/snippets
Witchcraft is another Google Chrome extension for loading custom Javascript and CSS, and it is supposedly for more avanced users. The older dotjs project repository lists Witchcraft as its successor.
What you're looking for is Greasemonkey. But wait, Greasemonkey is for Firefox only, right? Turns out, you can install Greasemonkey user-scripts as native Chrome add-ons. Just go to userscripts.org and hit the Install button on one of them, and Chrome will automatically convert it into a native add-on. Then, write your own and install it using Chrome.
Note: This only works in Chrome 4.0.
I am on the stage where I need to make my website cross-browser compatible.
I need tips on how to get started.
I have developed my website on firefox, so it works great with firefox.
I guess I have to download a couple of versions of all major browsers now, right?
Then just test each browser one by one?
Should I do this before uploading the entire website onto a server or afterwards?
All tips and SW which makes this easier is appreciated.
BTW, it is a classifieds website using MySql, Solr, PHP, js etc...
Thanks
Cross-browser compatibility is best planned for in advance, as there are ways to build your site that will make it much easier.
Consider using a CSS reset script like Eric Meyer's.
Consider using a JavaScript library like jQuery.
You can make use of Adobe BrowserLab to do cross-browser testing.
Consider the mobile audience.
You need to have some kind of local webserver so you can edit the code and test it in a comfortable way. It is also helpful if you make it accessible for validator.w3.org so you can do syntax checking.
Testing it in IE6, 7 and 8, Firefox and Chrome would be a good start I would say.
Since you are working with server side code, you need to have a server.
Once the site goes live you will need both a live and a development server.
Yes, I'd make it cross browser compatible before uploading to the server. The reason for this is that you may need to change the server-side code, adding ids and classes to the markup, plus it may well be necessary to change the markup. Make sure it's working locally first.
IE Tester is very useful for testing on the various IE browsers. I'd ensure that I've tested it on a Webkit browser (such as Chrome), a Gecko Browser (such as Firefox) and Opera. See this list for different browsers.
I have to create a plug-in that will have to display information when user hovers over certain terms. Can anyone show me the direction how to do it?
I do not have much ideas about creating plug-ins. I know what i want to do can be done by java script. But can a java script file be installed as a browser plug in? any ideas on this will be appreciated! Thanks!
What you want to do is create a userscript. It's exactly what you're describing: a piece of javascript code installed in the browser as a plugin.
Userscripts are supported:
By Firefox using Greasemonkey
By IE with its own version of Greasemonkey
Natively (soon) by Google Chrome
Natively by Opera
And even by Safari
So support is on almost every major browser.
A userscript is the easiest solution for what you're trying to do.
Kango's Content Scripts are similar to userscripts, with perhaps better support for all browsers, and the extension (and thus also the user script) can be installed with one click if self-hosted instead of installing Greasemonkey separately.
firebug is quite useful tool that I can't think myself living without it. I also downloaded the js file that helps you get similar functionality when using IE6 hoping it would help me resolve some issues, however, the messages I receive are not quite friendly such as:
"Expected ':' (default2.aspx,16)" - on line 16 there is nothing that can possibly expect a ":"
or
"Object doesn't support this property or method (default2.aspx,198)" on line 198 nothing interesting that can require any support for anything.
my site looks like a different web site in IE6.. most of the css doesnt work, some of the jquery functions doesnt work and I need to get this site work in IE6. Any help would be appreciated in terms of;
how to know what the messages (like the ones above) mean in IE6 and how to effectively debug js in IE6?
where to start for css compatibility.. e.g. shall I create different css files for different browsers and load them by detecting the browser? or are there any common issues and hacks?
I am lost so please give me any direction to start..
You debug javascript in IE6 with:-
Microsoft Script Debugger
The QuirksMode website is useful site to determine which bits of CSS is implemented in what way by which browser. Note IE6 "standards" mode rendering is notoriously buggy.
You can try Companion JS. It is pretty good with respect to debugging. It requires Microsoft Script Debugger as well.
Companion JS thankfully supports "console.log" (via firebug). It is free tool. Debug-bar is a good CSS-DOM-Javascript debugger, but it is not free for commercial purposes.
The two tools I use are:
Web Development Helper
IE Developer Toolbar
They somewhat duplicate each other's functionality, but each one can be useful for different tasks. The Web Development Helper has a built in JavaScript console, it's not as good as Firebug but it's better than nothing and easier than the MS Script Debugger.
"Expected ':' (default2.aspx,16)" - on line 16 there is nothing that can possibly expect a ":"
The error won't be on line 16 of your .aspx file, probably not even on line 16 of the HTML source the aspx file produces. It'll be near line 16 of one of your linked .js files. Which one? IE won't tell you.
You could find out by adding extra lines at the start of each .js file and seeing what happens to the error line number, but it's probably better just to install Script Debugger already.
IE8 finally fixes this.
shall I create different css files for different browsers and load them by detecting the browser? or are there any common issues and hacks?
Start with standards-compliant CSS, and a Standards Mode doctype, and test in Firefox 3, or Opera, Safari, Chrome. Mostly they'll give you more or less the same results. Now test in IE7 and hopefully it'll just work.
The troublesome browser today is IE6. You may well need to add hacks for it. You can do this in a separate stylesheet if there's a lot of them, or just use the "* html" hack for the occasional rule.
All the older hacks, your Box Model Hacks and so on, you can forget about. They're only of use for IE5, which is dead, and IE6 Quirks Mode, which you shouldn't be using.
or have an AJAX call to send debug variables/messages to ASP (PHP) script that will log it. this will help if the problem is with variables undefined or having similar issues.
For what it's worth, I've found the line number errors are much more accurate when using a separate js file.
I still use IE6 as my primary browser when developing. It saves a lot of headaches later, since you will often find CSS issues much earlier in the process.
I also find it helpful to use a JavaScript logger to send debug messages. This being an alternative to a bunch of alert messages. Personally, I use the yahoo UI logger
I use one of two things for js debugging: Microsoft Script Editor or Firebug Lite. Go here for more info.
As for the CSS, I recommend a CSS Reset. And for the little differences in IE6, consider using conditional comments.
When making an an application to be used in multiple browsers, quirksmode is a lifesaver.
EDIT: blackbird is a nice cross-browser tool for tracking state.
I've used MS Script Debugger with some success, also IE Developer Toolbar and Firebug Lite. I recently learned about MS Visual Web Developer Express Edition, which has been a big improvement so far.