sdk/pageload-require is not defined - javascript

I have SDK 1.13 and I want to use pageload API to give the alert message when html form is loaded in firefox browser. but I'm getting an error on console: require is not defined.
I have linked cfx file of add on SDK to file system directory:
ln -s PATH_TO_SDK/bin/cfx ~/bin/cfx
Still, I am not able to solve this error. Here is my code (Included in XUL file):
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: "*.html",
contentScript: 'window.alert("Page matches ruleset");'
});

I assume you've installed the SDK and have run bin\activate within your extension before trying cfx run, right?
You can't run this stuff from an XUL file, which is why require... wont work. All of this needs to be in a main.js (in the lib folder). You'll need to communicate via the content script that you'll write (in the data folder). When the html loads (I'd add a window.listener or something from the content script) you'll use port.emit("loaded") or something similar and then you'll have to listen in the main.js with something like addon.port("loaded",somefunction). There's a lot of good documentation on this!

XUL files is quite an opposite of SDK modules. SDK and XUL Comparison.

Related

Can I monkeypatch a function in another webpack bundle at runtime?

I am writing a plugin for a third-party web application, whose code I can see but can't modify. I'm running it in Chrome. The main webapp and the plugin are both (separate) webpack bundles. At runtime when the page loads, the webapp fetches the plugin bundles from the same server, and initialises them.
My objective is to make my plugin patch/wrap a function in the third-party application, in the module webapp/utils/target.tsx, such that calls to that function from within the webapp have my modified behaviour. Something like this:
// somehow import the `target` module (this is the problem, see below...)
oldFunc = target.targetFunc;
target.targetFunc = function targetFunc(args) {
// do extra stuff here
return oldFunc(args);
}
But I don't know how to import the target module or whether this is possible. Specifically:
I can't just import target, because application/webapp is not a dependency of my plugin
Plugins are meant to access limited entrypoints that get attached to window by the webapp, so they have no direct dependency on the webapp
I don't think I can add application/webapp as a dependency because
it's not a published package (perhaps I can add it as a github link?) and
I don't want webpack to include it in the bundle, so I think I'd have to specify it as an external dependency, but I don't know how to do that...
I can't modify application to do any extra things in its webpack (like exposing target in a different way)
I thought perhaps I could import it dynamically at runtime:
import(/*webpackIgnore: true*/ '/application/webapp/utils/target').then({
...
})
This gives me the error Expected a JavaScript module script but the server responded with a MIME type of "text/html".
If it helps, when the page is fully loaded and the app has loaded my plugin, in Chrome developer tools under Sources -> Page, I see a tree structure like this:
- localhost:port
- .
- com.mydomain.myplugin
- <modules for my plugin>
- application
- webapp
- .
- <other modules>
- utils
- target.tsx
- <other files>
- webpack
Meanwhile the original html page source seems to load the webapp via this tag in the header:
<script defer="defer" src="/static/main.c4e2eaf1d8c47b01fa6c.js"></script>
The Chrome devtools say "Source map detected".
Is it even possible to do what I'm trying to do?
From what i understand, you can import the module object, edit with the Object. library and return the edited module. If you don't understand nothing but knows the core, these references should helpful to solve this.
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/import
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/export
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties

Running server-side python in JS: difficulty with pico

I have webpage that needs to run some computation on start up. I want to keep this computation on the server side so the client cannot access the source code. I discovered pico, a module that is supposed to be "a bridge between server-side python and client side JavaScript".
I have a simply test.py:
import pico
def hello():
return "Hello World"
My JavaScript is also simple:
pico.load("../../../test.py");
pico.main = function() {
var displayMessage = function(message){
console.log("hello2");
console.log(message);
}
test.hello(displayMessage);
}
"../../../test.py" is the relative location of the python script to the pico folder
I then run "python -m pico.server" on the command line. When I go to my web page, open inspector, and go to the console I get the error: "Uncaught SyntaxError: Unexpected token i". 'i' is presumably from the first line import. Note that this same error happens if I don't run the pico.server command.
Any help would be great, as well as suggestions for alternative methods of doing this serverside vs clientside.
I may have an answer for you, however I have not been able to replicate the same error.
pico.load does not seem to work when file extensions are included in the argument, this is due to the function being designed to load sub-modules directly (i.e. module.sub_module) as in the pico API:
pico.load(module, [callback])
Load the Python module named module. The module will be available as a global >variable of the same name.
Submodules may be loaded by using dotted notation e.g. module.sub_module
To make sure I included ".py" file extension on the pico test page I have been working on and it failed to load the module, so this may be a problem if you are using the file extension.
Another possible issue was mentioned in a comment by holderweb. In the first pico example HTML the file client.js is included in an external <script> tag, this includes the functionality required to use pico. So you must have something similar to the following tag in your index.html head section:
<script type="text/javascript" src="/pico/client.js"></script>
For more insight I would be interested in seeing what/if the server logs at command line when the error occurs, and also the contents of your index.html page. Hope this helped!

Including JS files to Crossrider project

I'm working on Crossrider extension, I'm new in extension development. I've create basic project based on demos and even included Jasmine for testing.
Unfortunately I stucked on creating own resources.
Here's my debug project's structure:
resources\
lib\
spec\
test-runner.js
src\
js\
App.js
popup.html
background.js
extension.js
test-runner.js:
(function() {
appAPI.resources.includeCSS('lib/jasmine/jasmine.css');
appAPI.resources.includeJS('lib/jasmine/jasmine.js');
appAPI.resources.includeJS('lib/jasmine/jasmine-html.js');
appAPI.resources.includeJS('lib/jasmine/boot.js');
$('body').html('');
appAPI.resources.includeJS('spec/App-spec.js');
})();
And here it is how I include this file:
appAPI.resources.includeJS('spec/test-runner.js');
And everything works fine.
Problems start when I'm trying to include App.js. I read that it should be done like this:
appAPI.resources.addInlineJS('src/js/App.js');
But it's not working.
Here's my App.js:
var App = {
init: function() {
console.log('App initialized');
}
};
$(document).ready(App.init);
Is it possible to include resources files inside extension.js or background.js, and also how to add more js files to project resources?
If I understand what you are trying to achieve correctly (i.e. add a resource script to the extension code), I think you have a scope issue.
appAPI.resources.addInlineJS adds the resource script to the HTML Page scope and once added, the code is not accessible by the Extension Page scope. To add the resource script to your extension code (i.e. extension.js code), use appAPI.resources.includeJS as follows:
appAPI.resources.includeJS('src/js/App.js');
[Disclosure: I am a Crossrider employee]

Why source maps does not work?

I have chrome 39.0.2171.71, and I have enable source mapping check box enabled, but hx files are empty in debugger, any one can help explain why source mapping does not work?
EDIT
I am not using a server, I am opening the HTML file directly in chrome
In chrome network tab, I can see:
(failed)
net::ERR_FILE_NOT_FOUND
file:///C:/Users/samir.s.MOTAHIDAEDU/Documents/haxe/quiz-generator/bin/file:/C:/Users/samir.s.MOTAHIDAEDU/Documents/haxe/quiz-generator/src/com/quiz/Question.hx
I compile the js project, like this:
haxe -debug --each -lib createjs -lib Actuate -cp src -js C:/Users/samir.s.MOTAHIDAEDU/Documents/haxe/quiz-generator/bin/Quizgenerator.js -main Main -resource quiz.txt#quiz_text_file -lib random
EDIT 2
Where can I set the source map of my project? I think I just have to set the path correctly, I am on Windows 7
I believe this is a Google Chrome bug, since it cannot load the local files.
You could try to compile with the compiler flag -D source-map-content. This include the hx sources as part of the JS source map. For me this works pretty good.

Firefox add-on to add a .css and a .js file to a page

I want to make a Firefox add-on that adds a custom CSS and JavaScript file to the pages on http://*.example.com. Doing it with Chrome Extensions is pretty simple, but Firefox add-ons are a little bit confusing. What is the most simple way to do that? How can I make that add-on, step by step?
You should use the page-mod api, here is the documentation ( including simple code examples ):
https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/page-mod
In particular, you add js files using the contentScriptFile option, and css files using the contentStyleFile option. Here's a very simple example:
var data = require('sdk/self').data;
require('sdk/page-mod').PageMod({
include: ["*"],
contentScriptFile: [data.url('script.js')],
contentScriptFile: [data.url('style.css')],
attachTo: ["existing", "top"]
});
This code should be in ./lib/main.js in your add-on project directory and the files script.js and style.css should be located in the ./data/ sub-folder of your add-on project directory.

Categories