I have a file which overwrites overlay.xul that overwrites browser.xul. I want to implement message passing in a similar way as implemented in chrome extensions.
chrome.manifest-
content helloworld content/
overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul
overlay chrome://navigator/content/navigator.xul chrome://helloworld/content/overlay.xul
skin helloworld classic/1.0 skin/
style chrome://global/content/customizeToolbar.xul chrome://helloworld/content/overlay.css
How to I register content_script.js which in my case is overlay.js?
Overlay.xul -
<script type="application/x-javascript" src="chrome://helloworld/content/jquery.js" />
<script type="application/x-javascript" src="chrome://helloworld/content/overlay.js" />
<script type="application/x-javascript" src="chrome://helloworld/content/background.js" />
Now inside my overlay.js I'm using -
document.documentElement.addEventListener('click', function(e) {
messageManager.sendAsyncMessage('MyMessenger.MyMessage', {});
}, true);
And the background.js is-
addMessageListener("MyMessenger.MyMessage", function(obj) {
Firebug.Console.log(obj.name);
}, true);
What is the correct syntax for message passing?
How do I configure the connection between content script and browser script?
If all you are interested in is really injecting a content script and communicating with it then it should be easier to use the Add-on SDK, particularly the page-mod package. It allows injecting content scripts easily and provides a way to communicate (see "Communicating With Content Scripts" section in the docs I mentioned).
As to messageManager, it is meant for a multi-process environment but it will work in the current single-process Firefox as well. The main problem with your code above is: addMessageListener isn't a global function, you should call messageManager.addMessageListener(). But using messageManager to pass messages between scripts that are loaded into the same namespace and could call each other directly is an overkill anyway.
To communicate with a content script in the current tab the script in the overlay would do:
gBrowser.selectedBrowser.messageManager.sendAsyncMessage('MyMessenger.MyMessage', {});
And the content script would indeed have addMessageListener as a global function so this should work:
addMessageListener("MyMessenger.MyMessage", function(obj) {
console.log(obj.name);
});
Related
When I use monaco editor in a web app, the loader causes previously defined ajax script loads to no longer load. See example here
<script src="https://unpkg.com/jquery#3.2.1"></script>
<script src="https://unpkg.com/monaco-editor#0.8.3/min/vs/loader.js"></script>
<script>
$.ajax({
url: 'https://unpkg.com/vue#2.2.6/dist/vue.js',
dataType: 'script'
}).done(function() {
console.log('Vue', typeof Vue)
})
</script>
In this example, Vue is undefined, removing the loader.js tag, Vue is no longer undefined and it logs dev mode message to the console
I have tried loading as text and calling eval, eval.call with context, creating a script tag and appending, vanilla ajax call without jquery, using require(src) and the loader seems to be aggressively trapping all script loads.
I have an application that has been using the ace editor and am trying to switch out to monaco. The application is interactive, user writes queries and script and displays results. From the results, the user could make a selection which could call another query to update results.
The monaco loader.js is a small AMD loader - so use this:
require(['https://unpkg.com/vue#2.2.6/dist/vue.js'], function(theVue) {
console.log('the Vue is ' + theVue);
})
See the first part of the vue source file - it checks for AMD and inits another way if present.
I want to add a file(background.js) which is a background script for my firefox extension.
I added content scripts to my main.js using the following code.
var panel = panels.Panel({
contentURL: self.data.url("panel.html"),
onHide: handleHide,
contentScriptFile: [self.data.url("js/jquery.js"),
self.data.url("tipsy/jquery.tipsy.js"),,
self.data.url("js/settings.js")]
});
How do I add background scripts to the main.js file.
Simply place the file in the lib folder.
Except for scripts that interact directly with web content, all the JavaScript code you'll write or use when developing add-ons using the SDK is part of a CommonJS module.
Essentially, backend script don't share variables like content scripts/normal JS. You export and require variables between modules.
See adding local modules
I keep reading that the console.log needs to come after the onDeviceReady function, but I don't see any onDeviceReady functions in the cordova.js. Do I need to write my own? Does anybody know what the function would look like? What if I just wanted to console log "hello"?
Also, I noticed that cordova.js is not included as a script in the index.html. I'm assuming it needs to be if I want to see anything logged in the xcode console?
If you create the phonegap project by command line interface as described in their site
You should include cordova-3.x.x.js in your html head.
<head>
<script type="text/javascript" src="cordova-3.x.x.js"></script>
<script>
function onLoad() {
document.addEventListener(
'deviceready', onDeviceReady, false);
}
function onDeviceReady() {
// do Something!
// example: display a Cordova Console
// see docs.phonegap.com for full details
console.log("HELLO...");
}
</script>
</head>
<body onload="onLoad();">
Inorder to use the debug console in phonegap, you should add the plugin to the project by CLI
Type this command in Terminal
$ cordova plugin add org.apache.cordova.console
I'm trying to run Ace editor from file system for now and in Chrome I'm getting:
"SECURITY_ERR: DOM Exception 18"
FireFox doesn't mind it.
Found this on google groups:
due to same origin restrictions workers can't be loaded from cdn you
need to put them on your site, and add ace.config.set("workerPath",
"path/to/ace/src-min");
No joy.
I'm initializing the editor like so:
<script src="js/source-editor/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
ace.config.set( "workerPath", "js/source-editor/src-min-noconflict");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/css");
</script>
Am I missing something hopelessly simple?
This isn't a full solution but it may help:
editor.getSession().setUseWorker(false);
This turns off worker, probably destroying performance in the process. It should probably be conditional on whether you are a local file by checking the url.
For what's it worth, issue disappears one deployed to server.
im beginning with Ajax, i have problem with including Ajax files.
Ajax code written in original page (like index.php) and placed in (head) section works fine, but when i try to place code in external file (in js folder, where is placed prototype.js file), i don't get any response, not even in Firefox Error Console.
I haven't changed Ajax code except url for calling PHP function.
edit:
calling ajax files:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/myValidation.js"></script>
</head><body>
....
Username: <input type="text" name="uname" id='uname' />
Available?
<span id="result"></span>
Email address: <input type="text" name="email" />
...
I embaded this function call in html. Validate function is from book "PHP and Script.aculo.us Web 2.0 app interfaces"
myValidation.js
function Validate(){
var user=$('uname');
var name="uname="+user.value;
var pars=name;
new Ajax.Request(
'myValidation.php',
{
method:'post', parameters:pars, asynchronous:true, onComplete: showAvailable
}
);
}
function showAvailable(originalRequest){
var newData=originalRequest.responseText;
$('result').innerHTML=newData;
}
This example is from mentioned book
You haven't shown us your myValidation.js file, but here are the typical reasons I see when people move from inline script blocks to external files and things stop working:
They put script blocks in the external JavaScript files. You probably didn't do that, but I've seen it often enough to mention it. Your external script is pure JavaScript, so for instance it should be:
function Validate() {
// ...
}
not:
<script type='text/javascript'>
function Validate() {
// ...
}
</script>
I've seen the latter a fair bit.
They put the JavaScript file in a location that doesn't match their script tag src.
They left an opening <!-- or closing --> in the script. Important not to do that, in external JavaScript files those are syntax errors.
They're using a web server that's case sensitive and the src attribute and the file's actual name don't match.
They're using a web server sensitive to permissions and the file doesn't have the right permissions.
In the case of the last two above, it's easy to check: Just open a new tab and actually enter the URL of the JavaScript file. If you see the JavaScript, great; if not, you probably have more information.
For issues like this (and hundreds of others), there's nothing like having a decent toolset. For debugging JavaScript on browsers, there are quite a few. There's Firebug (a Firefox add-in), Chrome's and Safari's Development Tools (built into the browsers), Microsoft Visual Studio or Script Debugger for debugging with IE, etc. Firebug and Dev Tools would both tell you about broken src links, as well as any exceptions, etc.
Have you checked that those files are accessible from the HTML code? And more - have you placed you scripts in the bottom of the page - because AJAX will bind it's handlers only to existing elements?
Problem solved.
In /js/ folder i had one php file, that i put there just because of simplicity. After moving it to other location all worked. Don't know if that is rule, nut no php files in /js/ folder. Thanks T.J and Tomasz