I'm trying to build a google chrome extension and finally using the google closure compiler on advanced optimization but it ends up breaking the script and introduces undefined 'e' and so on.
On Simple Optimization it works, wondering what might be causing the script to break and whether there's anything I shouldn't do in my code that ends up being incompatible in Advanced optimization mode.
I have found that with the closure compiler advanced optimizations, it will remove variables shared between the chrome extension background page and extension client UI's like browser action or options pages. To solve that, I replace declarations on the background page, such as this (meant to be found via chrome.extension.getBackgroundPage().foo in, say, the options page).
var foo = { };
with
window.foo = { };
and then the name is minified but the same name is shared between background page and options page.
For a bit more info see my blog post How to use closure compiler advanced optimizations on chrome extension.
Related
This is about IE11, which I know has been deprecated. But I'm on Win7 and it's still a tool I use.
Here's the issue:
I have a task that's boring and can be automated on certain external web pages.
I have created a button within the IE11 Toolbar using the approach described on this page. Unfortunately, that page doesn't provide any guidance about what language or file extension should be used for the actual script.
The button does in fact appear in the toolbar and it finds the file to be executed, and the IE 11 console says that it has "navigated there" when I push the button. But the script does not actually execute.
I have tried the file extensions and languages for .bat, .vbs, .js, .wsf, and .htm...just trying to put up a "hello world" message...and nothing works from the browser button even though the scripts execute properly from the command line or URL.
I have relaxed IE 11's security settings so that it shouldn't be blocking anything. The only IE console messages are informational codes HTML1300 and DOM7011
So...what scripting language/file format will actually work in this use case???
Well, after only a few hours I figured out the only thing that seems to work: the "script" has to be an HTML file and the only language you can use is Javascript. No, you can't execute a .js file from the button...it has to be .htm...
I was just browsing this stylesheet when I noticed a CSS function I have never encountered before: -webkit-named-image()
I did some digging and found links on SO here and a developer page here. The only apparently-valid arguments for this function that I can find are apple-pay-logo-black and apple-pay-logo-white, e.g.:
div { background-image: -webkit-named-image(apple-pay-logo-black) ;}
I have lots of questions, for example:
Is this function deprecated or still currently valid? (based on the recency of this link and this one I assume it is not deprecated). Are there other acceptable arguments for this function (besides the ones I mentioned above)? Is this function similar to the url() function insofar as the passed function argument can be quoted or unquoted? Is it Safari specific?
In brief, how can I find out more about this function and what are the realistic use cases?
This CSS function is vendor specific, so there is no specification. It's used to display some named images embedded in WebKit.
To discover the valid argument of this function, one solution is to look in the source code of WebKit. The C++ function associated to this CSS function is drawNamedImage from the Theme class.
virtual void drawNamedImage(const String&, GraphicsContext&, const FloatRect&) const;
There is a comment in the implementation of drawNamedImage:
void Theme::drawNamedImage(const String& name, GraphicsContext& context, const FloatRect& rect) const
{
// We only handle one icon at the moment.
if (name != "wireless-playback")
return;
But each theme can override this function and define its own named images. The Cocoa theme define the values wireless-playback, apple-pay-logo-black and apple-pay-logo-white.
There is yet, no other theme in the source code of WebKit, that define named images.
-webkit-named-image() CSS generator allows a site to request artwork by name and get the platform variant and recently being added to webkit.
Check this bug which got resolved some time back
https://bugs.webkit.org/show_bug.cgi?id=164235
Currently what I know Safari now ships with built-in images which we can use with -webkit-named-image().
As per stripe documentation:
Step 2: Add an Apple Pay button to your site
Start by adding a button to the HTML on your product page. Safari now >ships with built-in Apple Pay images; you can use them with Safari's ->webkit-named-image feature. This button should be hidden by default.
I think this is being done to create uniform style across internet.
In Alfresco Share the Search page is implemented with Aikau.
I'm interested in the more general question, is it possible to Debug Aikau widgets?
I have founds some links on this matter, but they talk more about logging and not actual javascript debugging:
http://docs.alfresco.com/5.1/tasks/dev-extensions-share-tutorials-debugging.html
https://github.com/Alfresco/Aikau/blob/master/tutorial/chapters/Tutorial4.md
Suppose I have the following Aikau widget alfresco/search/AlfSearchResult and the following method inside it:
/**
* This function is called to create a
* [SearchResultPropertyLink]{#link module:alfresco/renderers/SearchResultPropertyLink} widget
* to render the displayName of the result. It can be overridden to replace the default widget
* with a reconfigured version.
*
* #instance
*/
createDisplayNameRenderer: function alfresco_search_AlfSearchResult__createDisplayNameRenderer() {
// jshint nonew:false
var config = {
id: this.id + "_DISPLAY_NAME",
currentItem: this.currentItem,
pubSubScope: this.pubSubScope,
propertyToRender: "displayName",
renderSize: "large",
newTabOnMiddleOrCtrlClick: this.newTabOnMiddleOrCtrlClick,
defaultNavigationTarget: this.navigationTarget
};
if (this.navigationTarget)
{
config.navigationTarget = this.navigationTarget;
}
new SearchResultPropertyLink(config, this.nameNode);
}
Is there any way I could insert a breakpoint and stop execution at the line where this.currentItem is used in order for me to evaluate it's properties?
Yes, there are several ways in which you can debug Aikau... the first thing to do is to make sure that you're running with "client-debug" mode enabled (either in Share or in your custom Aikau client).
For example, in Share you'd want to update the /WEB-INF/classes/alfresco/share-config.xml file to change:
<config>
<flags>
<client-debug>false</client-debug>
...to be...
<config>
<flags>
<client-debug>true</client-debug>
You'll need to restart Share for the changes to take effect. You'll see then that you have a "Debug Menu" item in the main header menu bar. If you open this you can enable logging by toggling "Debug Logging" and "Show All Logs" to be true.
This will result in logging output appearing in your browser developer tools console. You can also fine tune the logging output to only show errors or warning and to provide a RegEx expression to match certain logging output.
With client debug enabled the JavaScript source being loaded by the browser will be uncompressed. This will make it easier for you to add break points.
Because Surf aggregates all of the required module source code into a single resource (for performance and caching reasons) you will want to find the Aikau source file - the easiest way to do this is to use "CTRL-P" (in Chrome) to open a resource and type "surf" into the box that appears - this will always find the Aikau source code first.
Firebug for Firefox handles finding across resources better, so you can just used "CTRL-F" and then paste in the line you want to break on.
You can add breakpoints in this resource as you normally would and the browser will break on them.
As well as setting break points you can also use the DebugLog widget. This can be toggled from the "Debug Menu" and shows all the publications and subscriptions that are being made.
It is also possible to directly include and configure the alfresco/services/LoggingService and the alfresco/logging/DebugLog widgets in your page as you are developing. We take this approach for all our unit test pages. This can be a handy approach during development and they can be removed when you're finished developing.
This presentation although quite old, also contains some useful debugging tips (see slide 56 onwards).
I still can't quite get Meteor's load order fully under control. I use a lot of 3rd-party scripts when using Bootstrap templates with animations and a lot of these scripts break because they are created with the traditional load order in mind for DOM nodes.
Meteor does not follow this traditional load order, so a lot of times DOM nodes aren't ready when the scripts fire.
I made a simple Meteor app that console logs a message each time a script inside of a particular folder or template.rendered callback is loaded.
https://github.com/fuzzybabybunny/meteor-load-order-test
You can see it deployed here (open up Chrome Console)
http://load-order-test.meteor.com/
There are a few strange things going on.
main.js and main.html are actually loaded very soon, counter to what the documentation says: http://docs.meteor.com/#/full/structuringyourapp
all the DOM nodes are actually created earlier than expected
with six templates that still have yet to have their .rendered() callbacks fired, the max number of DOM nodes has already been reached. We should expect more DOM nodes to be added with each .rendered() callback being fired.
Can someone help explain why I'm seeing these strange things?
Also, is there a surefire way to only run a script once all DOM nodes have been created? Currently it seems like using jQuery to append <script> tags somewhere on the DOM inside of Template.Layout.rendered would be the most foolproof.
Template.Layout.rendered = function(){
console.log('layout template rendered and the number of DOM nodes is ' + document.getElementsByTagName('*').length);
$('head').append('<script src="/javascript/domCompleteScript.js"></script>');
};
Per the documentation, slightly further down the page:
client/lib/ # code for the client to be loaded first
This folder is for compatibility JavaScript libraries that rely on variables declared with var at the top level being exported as globals. Files in this directory are executed without being wrapped in a new variable scope. These files are executed before other client-side JavaScript files.
I would try putting the 3rd-party scripts into the following places, just to see what works best:
client/lib
client/compatibility
lib
Before 3.2, I can set the menu item type to "external link" and then set the link as
"javascript:myFunction()"
When clicked, the menu item will call the JavaScript function. But after I upgraded to 3.2, when I did the same thing and tried to save the menu item, it said "Save not permitted".
Did 3.2 block this usage? If yes, how do I get my JS function executed by a menu item?
I've came up this problem a while ago, in Joomla version 3.2.1 concerning a 'Skype' link, e.g.
skype:myloginname
This has to do with the protocol types that are allowed and are defined in this file:
/administrator/components/com_menus/controllers/item.php, line ~180.
There is an array that defines the acceptable schemes:
$scheme = array('http', 'https', 'ftp', 'ftps', 'gopher', 'mailto', 'news', 'prospero', 'telnet', 'rlogin', 'tn3270', 'wais', 'url', 'mid', 'cid', 'nntp', 'tel', 'urn', 'ldap', 'file', 'fax', 'modem', 'git');
When adding skype at the end of the list Joomla! allowed saving the external link. The same applies for javascript. In any case you should consider any security risk that comeswith this solution.
In addition, you should take into mind that this override may be discarded in any future update of joomla.
Technically speaking Joomla thinks that javascript is a protocol, like HTTP & Co., it looks it up inside a list of known protocols, it does not find it and it throws an error.
Start reading at around line inside [MenusControllerItem::save()][1]. So basically it has nothing to do with the fact you are trying to use some JavaScript, this is just a side-effect.
While using JavaScript in the External Link is not really an advertised feature but rather said a loophole, it does break b/c if you have used before.
You can:
Open an issue in the Joomla Issue Tracker and report this issue, get some community feedback. The fix is really easy, it just needs to get accepted.
Use the suggestion below:
Instead of link put #
Set the field "Link CSS Style" to something that does not colide with other classes, eg. my-function
Save
You can use jQuery to intercept the click event on the link and to make it run your function. See code below:
jQuery(document).ready(function($){
// Select element based on the class set in Joomla backend
$( ".my-function" ).on( "click", function(e) {
// Do not follow the link
e.preventDefault();
// Call function
myFunction(1);
});
});
function myFunction(x)
{
alert("I was called" + x);
}
Update: after a short discussion with the commiter of the change, I understood that it may be related to a security issue. So it may be on purpose after all not to allow js.