TLDR; In a Javascript file for my Firefox extension, how can I load the contents of other files from inside my extension (such as an HTML view & CSS stylesheet) for use on the current web-page?
I'm working on my first Firefox extension, for personal use.
So I setup my manifest.json to load /script/panel.js when any page of the site loads.
In panel.js, I would like to do something like:
const html = MyExtension.getFileContent('/view/panel.html');
const node = document.createElement('div');
node.innerText = html;
document.body.appendChild(node);
But I can't find anything like MyExtension.getFileContent(). All I've been able to find is how to add sidebar (through manifest?) & browser action for the toolbar at the top of the browser & other non-programmatic ways of exposing files that are inside my extension.
Then in /view/panel.html, Ideally, I'd like to also reference /style/panel.css which is also found inside my extension's root directory, such as with a <link tag.
Did you set web_accessible_resources in your manifest.json? It is required to make resources in your extension readable from webpages.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources
Related
user3568918 has responded to the following question:
jQuery Mobile not working with Internet Explorer?
Dont forget to keep the right binding Order:
jquery mobile css
jquery script
jquery mobile script
My question is :
When I go to download page of jquery mobile
https:/ /jquerymobile.com/download/
I see two viable options for me :
Download the javascript, css and images :
https:/ /jquerymobile.com/resources/download/jquery.mobile-1.4.5.zip
Download the minified javascript :
http:/ /code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js
If I choose 1, two additional subfolders "demos" and "images" are created, which have their own sub-folders.
Do I have to reference all these subfolders in my html ?
If I choose 2, which is to download the minified javascript only, how do I reference the images that I want to use for icons?
Thanks a lot in advance.
Example: assuming your index.html is the root, you should reference:
<link rel="stylesheet" href="css/jquery.mobile.1.4.5.min.css" />
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
Then, the directory structure on your server shall be like this:
\index.html
-- All jQuery files shall be in \js subfolder and \css subfolder
\js\
----jquery-1.11.2.min.js
----jquery-1.11.2.min.map
----jquery.mobile-1.4.5.min.js
----jquery.mobile-1.4.5.min.map
(...other stuff)
\css\
-----jquery.mobile-1.4.5.min.css
-----jquery.mobile.external-png-1.4.5.min.css
-----jquery.mobile.icons-1.4.5.min.css
-----jquery.mobile.inline-png-1.4.5.min.css
-----jquery.mobile.inline-svg-1.4.5.min.css
(...other stuff)
\css\images\
------------ajax-loader.gif
------------icons-18-black.png
------------icons-18-white.png
(...other stuff)
\css\images\icons-png\
----------------------action-black.png
----------------------action-white.png
(...a lot of other stuff)
\css\images\icons-svg\
----------------------action-black.svg
----------------------action-white.svg
(...a lot of other stuff)
EDIT:
subfolders demos and images inside the zip file are ready for you if you need to have the JQM demos also available on your local site, there is also a custom css file special for the demos.
I think this will also clarify some aspect of your question: https://css-tricks.com/data-uris/
I just downloaded a fresh copy of tinymce, uploaded it and tried to use it on my UTF-8 encoded website.
The menu bar icons are either garbage because it can't find it's presentation file (font?) or the encoding of one of the 10000 files is wrong.
Anyone knowing this bug? I didn't change anything, just uploaded..
TinyMCE doesn't use my german lang file either, obviously. I placed the js file into the "langs" folder.
<script type="text/javascript">
tinyMCE.baseURL = '//example.com/de/assets/scripts/tinymce';
tinyMCE.suffix = '.min';
tinymce.init({
selector: "textarea"
});
</script>
Do I have to set any configuration for path, basepath, ... ??
My actual path to tinymce is scripts/tinymce/tinymce.min.js. The origin path provided by the shipped package was tinymce/tinymce/js/tinymce/tinymce.min.js but honestly this kind of nesting folders without any reason..
update: The paths are working, it does read files not directly linked.. (like theme.min.js) successfully.
I am developing an app which uses both Phonegap and JQuery Mobile.
The app connects to an external server to check for new content/content updates (html and pdf files).
If needed, in iOS those files are successfully downloaded into the app /Documents folder.
The app then retrieves each content file's absolute path (file://localhost/var/mobile/Applications/APPID/Documents/subfolder) and creates listviews that link to each file's absolute path.
The problem I am having is the following: tapping a listview opens the linked page BUT not as an ajax call. The page loads but then no javascript (cordova.js, jquery.js app.js etc) is referenced in the page and hence I can't navigate back to the main menu. It seems like the jQueryMobile ajax navigation stops working when I open html files in the /Documents folder.
This happens only for the downloaded content in the /Documents folder (and hence outside Phonegap's www folder).
From the remote debugger, if I try to call the $.mobile.changePage('previousPage.html')* function, the console returns that $ is not defined, as if the page couldn't reference jQuery. But in none of the pages in the /www folder I need to re-reference the js files.
The app uses a multipage layout and each page has its own javascript after the <div data-role="page" id="pageid"> container.
Each .html in the /Documents folder is structured as a jQueryMobile page (with data-role attributes).
This is the code that creates the listviews:
<script type="text/javascript">
$('#content').live('pagebeforeshow', function(e) {
var curCat = parseInt(window.localStorage.getItem('currentCat'));
console.log('PAGE BEFORE SHOW: CONTENT');
db.db.transaction(function(tx) {
tx.executeSql('SELECT * FROM `content` WHERE `content`.`catID` = ?', [curCat],
function(tx, result) {
var path = window.localStorage.getItem('contentPath') + '/';
if (result.rows && result.rows.length) {
var html = '<ul data-role="listview" id="linkUl">';
for (var i = 0; i < result.rows.length; i++) {
var filename = result.rows.item(i).index_file.substr(result.rows.item(i).index_file.lastIndexOf('/'));
console.log(result.rows.item(i).id);
html += '<li id="' + result.rows.item(i).id + '">';
html += '<a href="' + path + filename +'">';
html += result.rows.item(i).title;
html += '</a></li>';
}
html += '</ul>';
console.log(html);
$('#contCnt').html(html);
$('ul#linkUl').listview();
}
},
function(tx, error) {
console.log(error.code);
var html = '<div id="errorDB">';
html += 'ERROR RETRIEVING FILES';
html += '</div>';
$('#contCnt').html(html);
}
);
});
});
$('div#content').live('pageshow', function(e) {
$('ul#linkUl').listview('refresh');
});
</script>
where the ContentPath variable is stored as a fileSystem object's directory.toUrl();
My fear is that jQueryMobile can't ajax-pull html from an external directory (the /Documents folder in iOS), or that I am missing some attribute or setting in order to do so.
Perhaps because I am using an absolute url? If so, how can I get the relative url from Phonegap's /www folder?
Do I have to declare something on the cordova.plist file?
Also, the downloaded content won't have to contain any js, they should be only plain html, but I need to keep jQuery Mobile header/footer and navigation system in all the pages.
I am using Cordova 2.2.0 and the latest releases of both jQuery and jQuery mobile.
Thanks in advance and sorry if something in the formatting goes wrong, I am new to SO (in case I'll edit asap).
You can open files from the documents folder (or any other folder the app has read access to).
There are two reasons that a link may not load as an ajax page
jQuery Mobile thinks that it isn't part of the app
There is a javascript error loading the page, which causes the default link click action to run instead of the ajax loader.
You could try using a call to $.mobile.changePage instead of just setting up the links - that gives you a little bit more visibility into what is going on.
I don't think a file url in a different folder should be treated as a different domain by jQuery Mobile, but to eliminate that possibility it should be reasonably easy to construct a relative url to the documents folder.
Solved, and thanks to Tom who led me through the right direction.
I guess the problem was that jQueryMobile was interpreting the absolute path as a an external link and thus the WebView was opening the html files as a new file, detaching it from the rest of the application.
What I did was substituting the absolute path file://localhost/var/mobile/Applications/APPID/Documents/subfolder
with a relative one, which in my case is './../../Documents/subfolder/filename.html
and now it works like a charm.
Im currently in the process of porting a completely static site using trigger io to convert it to an app. The site comprises of lots of folders in folders with index.html files in them to make the urls nice. The site uses absolute urls to include stylesheets, javascripts, on a tags, and images in every page.
I would like to set a root directory for trigger.io, but I cannot find any way of doing this. Is this even possible?
Cheers,
Rich
Edit:
Example:
<script src="/json.js" type="text/javascript"></script>
<img alt="Bar_hat" class="bar_hat" src="/assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
The script tag is in all of the files.
The img tag is used in 90% of the files. These are obviously not being found from within the app.
Copy your "assests" directory to the "src" directory and use without a "slash" before assets -
<img alt="Bar_hat" class="bar_hat" src="assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
Also, if you want to access via javascript you must use this pattern:
forge.file.getUrl("assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg",
function(file) {
// If using zepto or jquery
$("#whateverImage").attr("src", file);
},
function(err) {
// error
}
);
Edit: getUrl vs getLocal
I'm starting in web2py and I need to link my static files in my view files.
I'm trying to use URL() helper to make the links but I doesn't work properly...
My application is called red, my controller default and my function index.
My view is called index.html and is inside default folder, when I go to the page I see the view correctly but my URL are all wrong...
So far I tryed:
URL('static', 'css/bootstrap.min.css')
which gave back: "/static/css/bootstartp.css"
URL(a=request.application, args='static/css/bootstrap.css')
which gave: "/default/red/static/css/bootstrap.min.css"
URL(r=request, arg='static/css/bootstrap.min.css')
which gave: "/index/static/css/bootstrap.min.css"
URL('static/css/bootstrap.min.css')
which gave: "/default/static/css/bootstrap.min.css"
URL(a=request.application, c='static/css/bootstrap.min.css', f='')
which gave: "/red/red/static/css/bootstrap.min.css"
I may have tried some more but with no success...
My index function only returns dict().
And my router:
routers = dict(
# base router
BASE = dict(
applications = ['red', 'admin'],
default_application = 'red',
default_controller = 'default',
default_function = 'index',
map_static = True
)
)
I think it's also important to say I'm testing it on google app engine.
I want to get "/red/static/css/bootstrap.min.css".
I hope you want to link the css files in your view.
You can do this is tow ways.
1.In controller file (inside index():)
response.files.append(URL(request.application,'static/css','bootstrap.min.css'))
the same command you can use in view (index.html) also:
{{response.files.append(URL(request.application,'static/css','bootstrap.min.css'))}}
2.in the view (index.html) you can mention the normal css linking.
<LINK rel="stylesheet" type="text/css" href="{{=URL('static/css','bootstrap.min.css')}}">
if you want to link this file for the entire application. Then mention the above line in the layout.html page.
To get "/red/static/css/bootstrap.min.css":
URL('red/static', 'css/bootstrap.min.css')
I found the solution.
URL('static', 'css/bootstrap.min.css')
This line is correct, however I needed to turn map_static off in the routers file.