Firefox Addon Scripting Trusted Page Content - javascript

So I'm trying to use a chrome:// URI in my add-on and I want to use a page-worker on it using the scripting trusted content method, however it seems to not work when I hard code the URI in, the chrome://<package name>/<part>/<file>; however, it works when I use the self.data.url('filename'). I want to use the chrome:// URI is because I use a GUID instead of the email style as the add-on's ID and also I don't want to use the resource:// URI.
Content Script
addon.port.emit('hi');
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Gaia Utils Settings</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="chrome://gaiascripts/content/dropdown.min.js"></script>
<script type="text/javascript" src="chrome://gaiascripts/content/settings.dev.js"></script>
<script type="text/javascript" src="chrome://gaiascripts/content/test.dev.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/settings.css" rel="stylesheet" type="text/css">
<link href="css/poststyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav id="navbar_header" class="navbar navbar-blue navbar-static-top"></nav>
<div id="content_wrapper" class="container">
<div id="content_padding" class="container"></div>
</div>
<footer class="footer"></footer>
</body>
</html>
main.js
var PageWorker = require("sdk/page-worker");
PageWorker.Page({
contentURL: "chrome://gaiautils/content/settings.dev.html",
onMessage: function(message) {
console.log(message);
}
});
I know I can use a page-mod and attach the scripts to it with that, but I'd rather call the scripts from within the file and be able to communicate with the main add-on code. So is there a way so that I can have my cake and eat it too - using the hard coded chrome:// URI in conjunction with calling the scripts from within the HTML file while being able to have those scripts communicate back to the main.js file?

How can I have it so that I can use the addon.port.emit() in the content scripts that are called directly in the HTML file so that I don't have to use the self.data.url('htmlFile'), because I don't want to use the resource://pageckage-GUID-at-jetpack/path/to/file
The SDK only considers pages "trusted" if the URL you're loading is part of the add-on assets (data/). chrome:// URIs are not. Hence you'll need to use regular content scripts via the contentScriptFile: [...] option in your PageWorker definition.
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
Don't ever load remote scripts for security reasons (and performance reasons to a far lesser extent)! Ship a local copy of jQuery if you want to use it.

Related

Javascript executing incorrectly on Apache Cordova index.js/.html

So in an application I'm writing using Apache Cordova within Visual Studio, I am attempting to add functionality to the default index.html and index.js. However, my code within my index.js is executing very oddly - the debugger in VS shows that the $('#favorite-lot') is executed, but nothing within the .click(function()) method is. Is there any reason why this would be so?
Index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/JQueryMobile/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script src="scripts/JQueryMobile/jquery.mobile-1.4.5.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</head>
<body>
<div role="main" class="ui-content">
<a id="favorite-lot" href=""><h5>Favorite Lot</h5></a>
</div>
</body>
</html>
Index.js
//This method is called on page load to set the favorite lot on the index page
//the document bit is called, but the if statement within it & ready aren't
//$(document).ready(function () {
$('#favorite-lot').click(function () {
var storage = window.localStorage;
var href = storage.getItem("favoriteLot");
//now redirect
window.location.replace(href);
});
//});
Note I have tried enclosing my function within a document.ready (see commented out code), however the results are the same.
EDIT: So I figured this issue out, and it was a fairly simple error: I wasn't including the jQuery code itself, just jQuery.mobile, and additionally, the jQuery has to load before jQuery.mobile for the .mobile stuff to work. Side note, I also didn't realize .mobile enables Ajax on most links/redirections, and had to disable that for some of my other code; maybe if you've found this post, you're suffering from the other problem as well

javascript not working from network drive

I'm trying to run the below file. It runs perfectly fine when I run it on a local drive but if I place it on a network drive it no longer works. Any idea why this might be?
The below is code that I am trying to run. It is using pivottable from here: https://github.com/nicolaskruchten/pivottable.
<!DOCTYPE html>
<html>
<head>
<title> Demo</title>
<!-- external libs from cdnjs -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!-- PivotTable.js libs from ../dist -->
<link rel="stylesheet" type="text/css" href="../dist/pivot.css">
<script type="text/javascript" src="../dist/pivot.js"></script>
<style>
body {font-family: Verdana;}
</style>
<!-- optional: mobile support with jqueryui-touch-punch -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<script type="text/javascript">
// This example shows custom aggregators using
$(function(){
var tpl = $.pivotUtilities.aggregatorTemplates;
$.getJSON("col.json", function(frontier) {
$("#output").pivotUI(frontier, {
rows: ["Manager"], cols: ["Sector"],
aggregators: {
"Number of Positions": function() { return tpl.count()() },
"Manager Weight": function() { return tpl.sum()(["Port"])},
"Benchmark XGCC Weight": function() { return tpl.sum()(["Bench"])},
}
});
});
});
</script>
<div id="output" style="margin: 30px;"></div>
</body>
</html>
File:/// urls will run in a different context than HTTP/HTTPS and other contexts (internal, public, private, unsafe). What limitations in question depend on the specific browser, the OS and the context itself.
If you must execute JavaScript within HTML, the safest and most assured way to run is to have it running via a web server.
Also worth noting, there are a few local/relative files. ../dist/pivot.js and ../dist/pivot.css are you sure you're saving those files, and they are in the correct relative path as well?

Avoid Render Blocking by plugins which have both css and js dependencies

I am using a jQuery plugin it has plugin.css and plugin.js as dependencies and code is in script.js. I cant have plugin.js and script.js merged because i am using plugin only on one webpage of my website.
In order to make sure plugin.css is loaded before execution of plugin.js and script.js, normally I have no option but to have plugin.css in <head> which causes render blocking(until all resources in head are loaded,
browser doesnt render html).
Normal Way: Having CSS in <head> and JS before </body>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/plugin.css">
</head>
<body>
// content goes here
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script src="/js/plugin.js"></script>
<script src="/js/script.js"></script>
</body>
</html>
Proposed Way: Load CSS and JS via ajax calls and inject them when all of them are loaded, using jQuery $.when promise
<!DOCTYPE html>
<html>
<head>
</head>
<body>
// content goes here
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script class="load-plugin">
$(document).ready(function(){
var loadPlugin = {
css : $.ajax({ url: $(".jquery-plugin-css").data("src") }),
js : $.ajax({ url: $(".jquery-plugin-js").data("src")}),
};
var scriptJs = $.ajax({ url: $(".script-js").data("src") });
$.when(loadPlugin.css, loadPlugin.js, scriptJs).then(function(){
loadPlugin.css.done(function(data){
$(".jquery-plugin-css").html(data);
});
loadPlugin.js.done(function(data){
$(".jquery-plugin-js").html(data);
});
scriptJs.done(function(data){
$(".script-js").html(data);
});
});
});
</script>
<style class="jquery-plugin-css" data-src="/css/plugin.css"></style>
<script class="jquery-plugin-js" data-src="/js/plugin.js"></script>
<script class="script-js" data-src="/js/script.js"></script>
</body>
</html>
This improved my first render time from 3.4 secs to 2.4 secs and total page load time from 8.5secs to 8secs.
But this has some limitations:
Publicly hosted urls cant be used because the urls inside the plugin files like background-images inside css files if mentioned relative to their directory then the path changes after code is pasted into html.
As the injected code is not part of the source files or external scripts they cant be debugged in developer tools.
This way of lazyloading plugins has pros and equal amount of cons. Can anyone suggest is it worth it to do it this way or any better way to do things.
What I would try is:
Combine the JS files so that the dependent code is after plugin.js
Insert a script at the bottom of the page to dynamically load the CSS first and the combined JS second. If you need example code, you might look at https://github.com/filamentgroup/loadJS/ and https://github.com/filamentgroup/loadCSS/.
Using this approach, neither the CSS nor the JS blocks rendering. The CSS is appended to the DOM, so there should be no problems with relative URLs.

Linking and embed js file when consist lot of html document in jquery mobile

Hi I am new for Jquery mobile. I need to develop mobile apps which consist lot of screen. There are around 50 html inside my apps. I am facing this problem nw which is hw to linking to each other page?
Btw let say i need to embedded cordova.js or custom js file to all pages. So did i need to embedded java-script file to every 50 page's header? It is very time-consuming to restructure my apps
for example
<head>
<meta charset="utf-8">
<title>Smart Realtor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/smartrealtor-theme.css" />
<link rel="stylesheet" type="text/css" href="css/snap.css" />
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.structure-1.4.2.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.icons-1.4.2.css">
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
<script src="js/jquery.js"></script>
<script src="js/globalsetting.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
</head>
Did Jquery mobile provide any function like I need only include js file to index.html. Then my other page will automatically load those js file. Please guide me solution and provide me some sample code instead of give me jquery mobile document link. Thanks
Okay so just to clarify, it sounds like you've got 2 problems:
Adding navigation links to all 50 html files
Adding an extra javascript source to all 50 html files
Two basic approaches come to mind:
You could write a script or use a program to do a text find and replace for all the files in the html directory. If you want to use a program, you could use ReplaceText or a similar tool. If you want to use a script then you could write it in whatever you prefer, I'd probably use Python, this link might help you write such a script. So then to add the navigation links and embed an extra javascript file, you could seach for <body> and replace with:
<body>
<nav>
link1
link2
</nav>
<script src="js/cordova.js"></script>
Another possible option would be to add the navigation and dynamically load the javascript file using a javascipt file that you already include in all of your html files. Note though that this approach will slightly reduce the performance of the page as compared to directly changing the html files (as in the previous approach). So for example, to load an extra javascript source, you could add the following code to globalsetting.js
Using jQuery's getScript() function
$( document ).ready(function() {
$.getScript( "js/cordova.js", function( data, textStatus, jqxhr ) {
console.log( data ); // Data returned
console.log( textStatus ); // Success
console.log( jqxhr.status ); // 200
console.log( "Load was performed." );
});
});
Or as normal javascript (source1, source2)
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'helper.js';
head.appendChild(script);
And to add the navigation you could add the following jQuery code to globalsetting.js: (source)
$("body").append("<nav>
link1
link2
</nav></nav>")

Google CDN Hosted jQuery UI CSS with local fallback?

I already have the following for the JS files:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">!window.jQuery && document.write(unescape("%3Cscript src='/app_shared/script/jquery-1.6.1.min.js' type='text/javascript'%3E%3C/script%3E"))</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript">!window.jQuery.ui && document.write(unescape("%3Cscript src='/app_shared/script/jquery-ui.min.js' type='text/javascript'%3E%3C/script%3E"))</script>
How can I go for something similar for a theme?
I can download it from the cdn like this:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
But how can I detect if the file was downloaded, to reference a local copy on failure?
I know how to add the local copy programatically with jQuery, but I don't know how to check whether the CSS download succeded. Also, are <link> tag downloads blocking, or are they async? That'd be a problem, too.
You could do a style check where a font should be a particular family and then check against that family name. If the name is not what you expect then load the local copy.
You can also try something like Get a CSS value from external style sheet with Javascript/jQuery
<style>
p {color: blue}
</style>
$(document).ready(function() {
var $p = $("<p></p>").hide().appendTo("body");
alert($p.css("color"));
$p.remove();
});

Categories

Resources