CODEWITHSUNDEEP
firefox-addon
rsk82
rsk82

Reputation: 29397

is there any ready example of firefox addon that can manipulate site content with js/css?

I know there are many tutorials but they concentrate on xul, and manipulating menus and examples are overcrowded with features.

What I need is a simple extension that will for example add a red border to all <body> elements of every page I'm visiting and js would show me alert when a page is finished loading. Just to show that it is working and I will have a point to start learning from.

I know that there are ready extensions like greasemonkey and user css but what I intend to do is to first make such functionality raw, without overhead of yet another extension. And second to have ha proof of concept code so I can learn other features of firefox api.

I know how to write chrome/opera extension. I know all the languages needed, and how to make a mock extension, so it show up in firefox addons list. Vut the problem is that I don't know what to put where to get to the content of actual web page.

I know that there is a file called main.js that I'm supposed to put somewhere with code like this:

var data = require("self").data;
var pageMod = require("page-mod");
pageMod.PageMod({
  include: "*",
  contentScriptFile: data.url("my_script.js"),
  contentStyleFile: data.url("my_style.css")
});

And that begin to look familiar, like in Chrome., my script code:

window.addEventListener("load", function() {
  alert("hello there!");
}, true);

But I don't know where to put these files. Are there some default location, or must I set some configuration file to let know the api where main.js is ?

I know that there are projects to make such css/js based extension simpler, like jetpack - but that still creates overhead. I want to learn, but also don't waste my time and create something useful while doing that based on the knowlegde I have from chrome API.

edit: I found this tutorial: https://developer.mozilla.org/en-US/Add-ons/SDK/Guides/Content_Scripts/Accessing_the_DOM - but there is nothing on where to put these files there is no example extension using these features.

edit2: https://github.com/mozilla/addon-sdk/tree/master/examples - there is no link for these in mozdev examples, one must search this thru google

Upvotes: 3

Views: 190

Answers (2)

Noitidart
Noitidart

Reputation: 37268

Are you still in need of a ready made example?

Here is a bootstrap addon template that does exactly this. You just need to edit the addDiv and removeDiv functions for starters.

https://gist.github.com/Noitidart/9287185

Upvotes: 2

willlma
willlma

Reputation: 7543

It's called the Add-on SDK. Start here

Upvotes: 0

Related Questions