Firefox extension not working - javascript

I've created a Firefox extension but I can't use it (nothing happens).
Does someone know why ?
The module hierarchy
my_firefox_extension
chrome.manifest
install.rdf
chrome/
content/
locale.html
overlay.js
sample.xul
The code
chrome.manifest
content firefox_extension chrome/content/
overlay chrome://browser/content/browser.xul chrome://firefox_extension/content/sample.xul
install.rdf
<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest">
<em:id>displaypages#bruno.com</em:id>
<em:name>Display the page locale</em:name>
<em:description>Welcome to this extension that displays the page locale when a user opens a new tab or windows</em:description>
<em:version>0.1</em:version>
<em:creator>Bruno Da Silva</em:creator>
<em:homepageURL>https://www.example.com</em:homepageURL>
<em:type>2</em:type>
<!-- Mozilla Firefox -->
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>3.0</em:minVersion>
<em:maxVersion>4.0.*</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>
sample.xul
<?xml version="1.0"?>
<overlay id="firefox_extension-browser-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://firefox_extension/content/overlay.js"/>
</overlay>
overlay.js
function Read(file)
{
var ioService=Components.classes["#mozilla.org/network/io-service;1"]
.getService(Components.interfaces.nsIIOService);
var scriptableStream=Components
.classes["#mozilla.org/scriptableinputstream;1"]
.getService(Components.interfaces.nsIScriptableInputStream);
var channel=ioService.newChannel(file,null,null);
var input=channel.open();
scriptableStream.init(input);
var str=scriptableStream.read(input.available());
scriptableStream.close();
input.close();
return str;
}
gBrowser.addEventListener("DOMContentLoaded", function(e) {
var documentElement = e.originalTarget.defaultView.document;
var div = documentElement.createElement("div");
div.innerHTML = Read("chrome://firefox_extension/content/locale.html");
documentElement.body.appendChild(div);
});
locale.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Page displayed when a user opens a new tab or window</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p>Some text<p>
</body>
</html>

You missed one parameter which is probably causing the errors:
gBrowser.addEventListener("DOMContentLoaded", function(e) {
var documentElement = e.originalTarget.defaultView.document;
var div = documentElement.createElement("div");
div.innerHTML = Read("chrome://firefox_extension/content/locale.html");
documentElement.body.appendChild(div);
},
false // missing parameter on addEventListener
// add this and it might work
);

(Just guessing, no testing involved)
NS_ERROR_FILE_TARGET_DOES_NOT_EXIST might be caused by incorrect script file reference in sample.xul
<script type="application/x-javascript" src="chrome//firefox_extension/content/overlay.js"/>
src attribute is missing a colon after "chrome". It should be
src="chrome://firefox_extension/content/overlay.js"

The files in firefox could be corrected .
Try the following
Exit Firefox completely, then open your Firefox profile folder and delete or rename these files:
extensions.ini
extensions.cache
extensions.rdf
Starting in Firefox 4, also delete or rename:
extensions.sqlite
extensions.sqlite-journal (if found)
Note: Although the above files can be deleted, renaming them (e.g., "extensionsOLD.ini", "extensionsOLD.cache", etc.) is generally considered a safer option. This achieves the same result, but allows the user to retrieve any possibly required information from them later on.
Then try to restart the browser and install them
Else there is another method which may work (but dont know why/how they work)
Enable third party cookies - go to Tools -> Options -> Privacy and check the Accept third-party cookies box.

Does you extension work when using it in a live development environment, as opposed to having issues with the xpi installer?
With Firefox closed, create a
“pointer” file with the same name as
your extension’s Description:ID (as
found in your install.rdf) in profile
folder/extensions/ and edit it so that
it contains the path to your
extension’s folder (the root
containing containing install.rdf and
chrome.manifest files).
E.g. helloworld’s ID is
helloworld#mozilla.doslash.org and we
would like to register it in
X:\Dev\helloworld\ (i.e. there is
X:\Dev\helloworld\install.rdf file
etc.). Just put a single line into the
file at this path: profile
folder/extensions/helloworld#mozilla.doslash.org
X:\Dev\helloworld\ - note trailing
slash and no CR; this must be a SINGLE LINE
(Re)Start Firefox, and check that your
extension is installed.
This will help you make sure that the extension works, before you start tackling installation issues.

Related

JS and CSS not loading in html

I've been following this article (https://dev.to/programliftoff/create-a-basic-webpage-with-css-and-javascript--104i) to get started on building an interactive webpage, but I can't get the JS and CSS to work.
I'm working in Sublime, and I followed this tutorial (https://www.youtube.com/watch?v=oqD5C77Tk3I&feature=youtu.be) to run it through http rather than the file system.
I've double checked the folder paths fifty times (they're just saved on my desktop as 'scripts' and 'styles' in the same folder as my index.html doc), and tried different variations of dots at the start of the paths and slashes both ways, but the JS and CSS just won't load. I've also moved the 'link rel' and 'scripts async src' lines between the head and body tags, but it doesn't seem to make a difference.
My html doc looks like this,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Website</title>
<link rel=“stylesheet” type="text/css" href=“../styles/styles.css” />
<script async src="./scripts/index.js"></script>
</head>
<body>
<h1>Hello, World</h1>
<h4 id=‘date’></h4>
<img src="images/IMG_4945.jpg" alt="My test image">
</html>
My JS doc looks like this,
document.getElementById('date').innerHTML = new Date().toDateString();
My CSS doc looks like this,
body {
text-align: center;
background-color: #ffe6e6;
}
Hard to tell without looking at your file structure, but let's assume you have it like this:
|-Project
|-----css
|---------style.css
|-----js
|---------main.js
|-----index.html
in your index.html you should be calling your css like this:
<link rel="stylesheet" href="/css/style.css" />
in UNIX based OS's (and localhost Windows) / equates to document root. It's best to do this as you're guranteed to always call that file no matter where you copy + paste code to.
Note: In Windows servers / doesn't work - not sure why. Windows just sucks I guess.
Remove the async keyword from your script element. That isn't an asynchronous script and it modifies the DOM before it's ready.
Use jQuery $(document).ready(function() {}); or JS window.onload = function() {}; and remove that async attribute so your script is run in synch with the DOM.
In other words, you cannot edit the document before it has been created. But you are trying to do that with an async and no check for if the document is ready.
../ means parent folder. So:
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
<script src="scripts/index.js"></script>
Double quotation marks in your code are valid? “ -> " Pls check it.

javascript error - Scripts are not found

Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var path = '/Scripts/';
document.write('<base href="' + path + '"/>');
</script>
</head>
<body>
<h1>WELCOME</h1>
<script src="test.js"></script>
</body>
</html>
test.js
console.log("Message from external script");
output
error.png
Here you can see, first it try to load the script from body tag before it get the actual base href path from script section.
Is there any way to get come out from this error? I mean not to load body script until base href set.
Once the base href set, it executed successfully.
Thanks.
The behavior you're seeing is (somewhat) browser-specific, and is related to your use of document.write to set the base href dynamically.
Chrome and Firefox try to load the page resources before applying the document.write, then updates those urls and tries again after you set the page <base>. Safari appears to not do this; it uses the inserted base href immediately. I have not tested other browsers.
(In all browsers the <base> tag, whether static or dynamic, needs to appear in the document before any links that depend on it.)
Other than the extra network request this seems to be harmless (see below), but you could avoid it by using a static <base> tag instead of dynamically writing one in, or by setting the full path on the <script> tag instead of depending on the <base>.
(re "harmless": I checked the case where a test.js exists both at the root level and inside the "/Scripts" directory. Dynamically inserting the "/Scripts/" base href did not cause both scripts to execute in Chrome: successful network requests for both test.js files were made, but only the code in "/Scripts/" was executed. So the browser makers have handled that edge case already. Good job, browser makers!)
You Can use this code
<script src="./scripts/test.js" type="text/javascript"></script>

Delphi TWebBrowser Wont Run Javascript from LocalHost

I have a really simple Delphi XE7 program. It is basically just a TWebBrowser component embedded in a form with no extra code attached, other than a button that fires off the Browser.Navigate method. My understanding is that TWebBrowser is just an ActiveX wrapper for IE.
I am trying to use this to display a very simple page that references the D3 Javascript library (but so far doesn't do anything with it), and the web pages are served from a localhost webserver that is running on my PC using WAMPSERVER.
The web pages run just fine in Chrome or IE 11 (I have Windows 7, 64 bit). But when I try to view them within the Delphi/TWebBrowser program I get the IE error message "An error has occurred on the script on this page" (see image attached). The error seems to occur when trying to access the d3.js javascript library in the d3test/d3 folder on the local host. I have verified that the d3.js file does exist in this folder and this seems to be borne out by the fact that the page runs and displays just fine in both Chrome and IE.
Perhaps there is an issue with having an embedded web browser access locally hosted pages? Additional background -I have also cleared the IE cache, reset the Internet options on the Windows Control Panel, set IE security settings to the minimum level and temporarily disable my Norton Firewall/Virus scanner.
Does anyone have any thoughts on this? I'm really hoping to be able to get some D3 charts embedded in my Windows-based program.
Here also is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3\d3.js"></script>
</head>
<body>
Hello World
</body>
</html>
I added answer from your comments below the question so its may
helpful to others
add this meta tag into your web page
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
In this case you should add this class to your code:
type TBrowserEmulationAdjuster = class
private
class function GetExeName(): String; inline;
public const
// Quelle: https://msdn.microsoft.com/library/ee330730.aspx, Stand: 2017-04-26
IE11_default = 11000;
IE11_Quirks = 11001;
IE10_force = 10001;
IE10_default = 10000;
IE9_Quirks = 9999;
IE9_default = 9000;
/// <summary>
/// Webpages containing standards-based !DOCTYPE directives are displayed in IE7
/// Standards mode. Default value for applications hosting the WebBrowser Control.
/// </summary>
IE7_embedded = 7000;
public
class procedure SetBrowserEmulationDWORD(const value: DWORD);
end platform;
class function TBrowserEmulationAdjuster.GetExeName(): String;
begin
Result := TPath.GetFileName( ParamStr(0) );
end;
class procedure TBrowserEmulationAdjuster.SetBrowserEmulationDWORD(const value: DWORD);
const registryPath = 'Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION';
var
registry: TRegistry;
exeName: String;
begin
exeName := GetExeName();
registry := TRegistry.Create(KEY_SET_VALUE);
try
registry.RootKey := HKEY_CURRENT_USER;
Win32Check( registry.OpenKey(registryPath, True) );
registry.WriteInteger(exeName, value)
finally
registry.Destroy();
end;
end;
Finaly add to your OnCreate of the Form:
TBrowserEmulationAdjuster.SetBrowserEmulationDWORD(TBrowserEmulationAdjuster.IE11_Quirks);
This should solve your problem

letter in quotes appearing just after body tag

We've just launched our new Magento site and the letter 'c' is appearing in quotes immediately after the tag. It's not showing up before on my local machine or on our QA site, I've checked the template files and it is not there either. I'm almost certain it can not be a code issue as we have the same code running locally and on our QA site under version control with GIT.
We've cleared the cache and I've tried checking to see if JavaScript was inserting it with the chrome dev tools but could find nothing.
Strangely, the 'c' is not in the view source document but I can see it with the chrome inspector.
I also don't think it can be coming from Magento CMS Pages/Blocks as it loading immediately after the tag.
thanks for the link. after reviewing the page source, you have an extra c character in the header area:
<!-- END GOOGLE ANALYTICS CODE -->
c<script type="text/javascript">//<![CDATA[
var Translator = new Translate([]);
//]]></script>
Notice that c before the script tag?
Just in support to Benny Lin's very helpful answer.
What was happening was we had our Google Analytics code loading from a template file which contained the stray letter 'c'. We could see this on our local machines as this templates was disabled in the Magento admin settings, but not on production.
This issue seems to demonstrate that when a stray letter appears within the <body> tags on your dev tools inspector and not the view source page it may be because it is in the <head> section. The browser seems to push all poorly formatted html from the <head> section into the <body> section when rendering.
For example if you open the below html in the chrome browser you will see what I mean:
<!DOCTYPE html>
<html>
<head>
c<title>Title of the document in head</title>
<script type="text/javascript">
var test = "test";
</script>
</head>
<body>
The body of the document......
</body>
</html>
Also while we were searching for the stray letter, we were ably to remove it with the below JavaScript that targets the offending XML node in the DOM with an XPath expression and removes that node only.
<script type="text/javascript">
function _x(STR_XPATH) {
var xresult = document.evaluate(STR_XPATH, document, null, XPathResult.ANY_TYPE, null);
var xnodes = [];
var xres;
while (xres = xresult.iterateNext()) {
xnodes.push(xres);
}
return xnodes;
}
jQuery(_x('//html/body/text()[contains(.,"c")]')).remove();
</script>

Blank page with simplest possible pyjs (pyjamas) app

I'm trying to use pyjamas (http://pyjs.org/). My input file, named hi.py, looks like this:
from pyjamas import Window
from pyjamas.ui import RootPanel, Button
from pyjamas.ui import HTML
def greet(sender):
Window.alert("Hello!")
b = Button("Click me", greet)
RootPanel().add(b)
I run the following command:
python ~/pyjs-pyjs-07f54ad/bin/pyjsbuild hi.py
Building : hi
PYJSPATH : [
/Users/michaelnatkin/HelloPyjs
/Users/michaelnatkin/pyjs-pyjs-07f54ad/library
/Users/michaelnatkin/pyjs-pyjs-07f54ad/addons
]
Built to : /Users/michaelnatkin/HelloPyjs/output
Which appears to run without errors, and here is my resulting directory:
Michael-Natkins-MacBook-Pro-2:HelloPyjs michaelnatkin$ ls .
hi.js hi.py output
Michael-Natkins-MacBook-Pro-2:HelloPyjs michaelnatkin$ ls output
__init__.py gchart.gif hi.safari.cache.html
_pyjs.js hi.html history.html
bootstrap.js hi.ie6.cache.html tree_closed.gif
bootstrap_progress.js hi.mozilla.cache.html tree_open.gif
disclosurePanelClosed.png hi.nocache.html tree_white.gif
disclosurePanelClosed_rtl.png hi.oldmoz.cache.html
disclosurePanelOpen.png hi.opera.cache.html
I then direct my browser to one of the html files: file:///Users/michaelnatkin/HelloPyjs/output/hi.html
and I get... a blank page. The only error in my js console is:
Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
which I guess isn't too surprising since the html file says:
<html>
<!-- auto-generated html - You should consider editing and adapting this
to suit your requirements. No doctype used here to force quirks mode; see
wiki for details: http://pyjs.org/wiki/csshellandhowtodealwithit/
-->
<head>
<title>hi (Pyjamas Auto-Generated HTML file)</title>
<meta name="pygwt:module" content="hi">
</head>
<body style="background-color:white">
<script type="text/javascript" src="bootstrap.js"></script>
<iframe id="__pygwt_historyFrame" style="display:none;"></iframe>
<script type="text/javascript" src="bootstrap.js"></script>
<iframe id="__pygwt_historyFrame" style="display:none;"></iframe>
</body>
</html>
So.. I'm completely stuck. Can someone tell me how to get this bad boy to produce output? I've got a much more complicated app I want to create, but if I can't say "Hello" it isn't going to go well. Thank you!
Have you tried it in Firefox too? While nothing is displayed with Chrome, with Firefox I get an error message which comes from the way you import RootPanel and Button. You should replace your single line by:
from pyjamas.ui.RootPanel import RootPanel
from pyjamas.ui.Button import Button
After that your button greets me properly.
And regarding the Chrome issue, either launch it with --allow-file-access-from-files or run a local web server to display your page. More details there: https://github.com/pyjs/pyjs/wiki/googlechromeproblems

Categories

Resources