I'm trying to use web components inside a Firefox extension but i always get errors trying to add the needed polyfills to make web components work on firefox.
Polyfill using
"webcomponents/webcomponentsjs": "^2.0.3"
First Attempt - webcomponents-sd-ce.js
"content_scripts": [
{
"matches":["<all_urls>"],
"js": ["bundles/webcomponents-sd-ce.js", "contentScript.js"],
"run_at": "document_end"
}
The error i get is
TypeError: "importNode" is read-only webcomponents-sd-ce.js:100:457
Its failing at using the library. The example code i was working with worked on chrome. Chrome needed this polyfill because in the context scripts windows there was no 'customElements' property. Something that is normally default on the user window property list.
Second Attempt - webcomponents-bundle.js
"content_scripts": [
{
"matches":["<all_urls>"],
"js": ["webcomponents-bundle.js", "contentScript.js"],
"run_at": "document_end"
}
The error i get is
TypeError: "importNode" is read-only webcomponents-bundle.js:169:460
I don't normally have problems with these file, so i don't exactly know where the problem originates. If its a problem between the context's window and the normal window or just in how i'm using it.
Related
I am using ACE editor in my browser extension. It all works fine in a Chrome/Chromium browser, but when I try the extension in Firefox (latest version), only ace.define and ace.require are available (ace.edit is needed, at least, to initialize).
Here is the part of the manifest (MV2) file involved:
"content_scripts" :
[
{
"matches": ["*://example.com/*"],
"all_frames": true,
"js": [
"ace-min/ace.js",
"myscript.js"
],
"run_at": "document_end"
},
]
What could be done wrong? Both files are being read, but only a part of ace.js seems to be executed. Imagine that myscript.js contains a console.log(ace), to see which functions can I use.
Thanks in advance!
I posted an issue on the ACE's GitHub repository. The response was very quick and polite.
All is explained in this comment: https://github.com/ajaxorg/ace/issues/4898#issuecomment-1217887526
Just a side note, use noconflict ace instead of normal ace. The function you need to change is at the bottom.
I have basically the same problem as this guy. I have a page, accessed over the web (well, local intranet, if that matters), and it needs to reference images on the client's machine. I know those images are going to be in C:\pics. Internet Explorer lets you just reference them, but I'm having trouble printing properly with internet explorer, so I want to try firefox. The answer on that question says you can create a "resource" with a firefox add-on that pages will be able to reference. However, it doesn't seem to be working. I followed the guide for how to make your first add-on and got the red border to work on mozilla sites. I tried editing that add-on to include a chrome.manifest file that just says this:
resource exposedpics file:///C:/pics
and then the page (an asp page) references exposedpics.
<img align=left border="0" src="resource:///exposedpics/<%=Request("Number")%>.jpg" style="border: 3 solid #<%=bordercolor%>" align="right" WIDTH="110" HEIGHT="110">
the page doesn't show the picture. If I go to View Image Info on the image, I'll see the address is "resource:///exposedpics/8593.jpg" (in my example where I input 8593), but it doesn't show the image here. (yes, the image does exist under c:\pics. if I go to file:///C:/pics/8593.jpg, it loads.)
so maybe I don't know how to use a chrome.manifest. (I'm not sure if I need to reference it somehow in my manifest.json, I'm not.) That stack overflow question also says it's possible to dynamically create resources. so I tried to make my manifest.json say:
{
"manifest_version": 2,
"name": "FirefoxPixExposer",
"version": "1.0",
"description": "allows websites to access C:\\pics",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["expose.js"]
}
]
}
and expose.js says
// Import Services.jsm unless in a scope where it's already been imported
Components.utils.import("resource://gre/modules/Services.jsm");
var resProt = Services.io.getProtocolHandler("resource")
.QueryInterface(Components.interfaces.nsIResProtocolHandler);
var aliasFile = Components.classes["#mozilla.org/file/local;1"]
.createInstance(Components.interfaces.nsILocalFile);
aliasFile.initWithPath("file:///C:/pics");
var aliasURI = Services.io.newFileURI(aliasFile);
resProt.setSubstitution("ExposedPics", aliasURI);
but the same thing happens, the image doesn't display. I did notice that if I put document.body.style.border = "5px solid red"; at the top of expose.js, I do see a border around the body, but if I move it to below the line Components.utils.import("resource://gre/modules/Services.jsm"); it doesn't show up. Therefore, I suspect the code to dynamically create a resource is broken.
What am I doing wrong? Ultimately, how can I get an image on the client's machine to show up on a page from the internet?
You are writing a WebExtensions so none of the APIs you are trying to use exist.
This includes Components.utils.import, Components.classes etc. You should read Working with files on MDN to get an idea, what is still possible.
I created my first Meteor package for fullPage.js. This package uses Meteor's new packaging system.
On first page load the package works great. Normal autoscrolling between sections as expected.
Linking to another page within the app will initialize fullPage without any errors. However, after scroll or down arrow click, the page autoscrolls and skips sections. Refreshing the page fixes the problem.
Setting "autoScrolling: false" will stop the page from scrolling to the bottom after initial scroll. However, this then causes the app to use normal scrolling.
Package dependencies:
[
"jquery",
"1.0.0"
],
[
"meteor",
"1.0.2"
],
[
"mrt:jquery-ui",
"1.9.2"
],
[
"underscore",
"1.0.0"
]
An example of the problem: http://fullpagetest.meteor.com/
The package: https://github.com/lawshe/full-page
The problem is caused because you are initializating the plugin each time you click in a menu.
You don't want to initialize fullpage.js more than once.
I would recommend you to avoid using AJAX and just use normal links for each section.
Otherwise, you should make use of the function $.fn.fullpage.destroy('all'); every time you click in a link and then initialize fullpage.js again as you are doing right now.
The destroy('all') function will remove all the plugin events (mousewheel, scroll...) and all the changes made over your original structure (addition of classes, inline styles...).
In other words, it will just restart your HTML structure as it was before applying fullpage.js.
Once that is done, fullpage.js can be initialized again.
I am building Firefox extension, that creates single XMPP chat connection, that can be accessed from all tabs and windows, so I figured, that only way to to this, is to create connection in javascript module and include it on every browser window. Correct me if I am wrong...
EDIT: I am building traditional extension with xul overlays, not using sdk, and talking about those modules: https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules
So I copied Strophe.js into js module. Strophe.js uses code like this:
/*_Private_ function that creates a dummy XML DOM document to serve as
* an element and text node generator.
*/
[---]
if (document.implementation.createDocument === undefined) {
doc = this._getIEXmlDom();
doc.appendChild(doc.createElement('strophe'));
} else {
doc = document.implementation
.createDocument('jabber:client', 'strophe', null);
}
and later uses doc.createElement() to create xml(or html?) nodes.
All worked fine, but in module I got error "Error: ReferenceError: document is not defined".
How to get around this?
(Larger piece of exact code: http://pastebin.com/R64gYiKC )
Use the hiddenDOMwindow
Cu.import("resource://gre/modules/Services.jsm");
var doc = Services.appShell.hiddenDOMWindow.document;
It sounds like you might not be correctly attaching your content script to the worker page. Make sure that you're using something like tabs.attach() to attach one or more content scripts to the worker page (see documentation here).
Otherwise you may need to wait for the DOM to load, waiting for the entire page to load
window.onload = function ()
{
Javascript code goes here
}
Should take at least diagnose that issue (even if the above isn't the best method to use in production). But if I had to wager, I'd say that you're not attaching the content script.
I have a few multiselect boxes from the Jquery UI on a page that work perfectly well in Chrome & Safari but not in Firefox for some reason... when I load the Error Console in Firefox I see:
Error: $.widget is not a function
Source File: http://localhost:3000/javascripts/jquery.multiselect.js?1302660373
Line: 563
Any ideas why?
edit: the line itself is within the open function right where it says "// react to option changes after initialization"
// open the menu
open: function(e){
var self = this,
button = this.button,
menu = this.menu,
speed = this.speed,
o = this.options;
widget: function(){
return this.menu;
},
// react to option changes after initialization
_setOption: function( key, value ){
var menu = this.menu;
switch(key){
case 'header':
menu.find('div.ui-multiselect-header')[ value ? 'show' : 'hide' ]();
I am assuming you are using the jQuery Multiselect plugin… which depends on jQuery UI.
Sounds like you have not included enough of the jQuery UI library or just none of it. You need to include the core parts of jQuery UI (including Widget) if you build a custom download. Or just download the whole jQuery UI and include it instead.
For anyone else who is getting this but has the requirements; make sure you are including the Javascript files in the correct order. This error was being caused by my jquery-ui.js being included after the multiselect js file.
This answer is probably unrelated to the situation of the questioner, but I put it here for the sake of others Googling the question.
I got this error using Rails 3.2 and fixed it by deleting (renaming) the public/assets folder. It seems there are a lot of problems with the assets pipeline still. I don't know the details but have had other Javascript failures that are fixed this way.
Actually if you are getting this error then it's either
a) per #andyb answer - you haven't included the correct jQuery UI components
OR
b) your DOM is not loaded yet with the correct $.widget and therefore your function is attempting to call before $.widget has loaded. to fix the problem, ensure $.widget is called BEFORE your function