Develop Reference

Chrome Extension Top Visited List

I'm trying to make an extension that looks at your most visited sites and then tells you things about yourself given those sites.
I'm a bit lost with how to go about this and was wondering, do I run the script with the background.js file? or when they click the popup?
This is the code I'm looking to replicate,
// Event listener for clicks on links in a browser action popup.
// Open the link in a new tab of the current window.
function onAnchorClick(event) {
chrome.tabs.create({ url: event.srcElement.href });
return false;
}
// Given an array of URLs, build a DOM list of these URLs in the
// browser action popup.
function buildPopupDom(mostVisitedURLs) {
var popupDiv = document.getElementById('mostVisited_div');
var ol = popupDiv.appendChild(document.createElement('ol'));
for (var i = 0; i < mostVisitedURLs.length; i++) {
var li = ol.appendChild(document.createElement('li'));
var a = li.appendChild(document.createElement('a'));
a.href = mostVisitedURLs[i].url;
a.appendChild(document.createTextNode(mostVisitedURLs[i].title));
a.addEventListener('click', onAnchorClick);
}
}
chrome.topSites.get(buildPopupDom);
This is sort of not working at the moment.

jscript to run at window.onload AND item.onchange

I'm using jscript to load a string in to several elements of an array, then display the useful element in html.
There's a pulldown menu that causes the string to change. So, I need the function to be re-run when that happens.
I have been able to successfully display the element using window.onload
and, I have been able to successfully display the element AFTER the pulldown menu has been changed.
But, I can't seem to display the element with window.onload and subsequently after item.onchage
If anyone has any suggestions, I'd be grateful.
Here is the code that works for window.onload
window.onload = function() {
var selectedOptionId = jQuery('select').val();
var optionPartNumber = jQuery('input[name="OptID_' + selectedOptionId + '"]').val();
//loads the string in to an array and returns the 2nd element
var optionPartNumber = optionPartNumber.split(".")[1];
document.getElementById("MASNUM").innerHTML=optionPartNumber;
}
Here is the code that works for pulldown.onchange
jQuery(function(){
jQuery('.dropdownimage-format select').on('change', function(){
var selectedOptionId = jQuery('select').val();
var optionPartNumber = jQuery('input[name="OptID_' + selectedOptionId + '"]').val();
var optionPartNumber = optionPartNumber.split(".")[1];
document.getElementById("MASNUM").innerHTML=optionPartNumber;
});
In both cases, the element is displayed in html by
<a id="MASNUM">

run a Js script bot every time that a page is loaded

i'm new in firefox add-on dev
I'm triyng to run a contentscriptScript in a active tab which click on a random link into the tab, it's works
But i'm trying to repeat this operation in the new webpage in an endlessly way, like a kind of WebBot.
i dont know if i have to implement this setting in the contentScript or in the Main.js , SetInterval and SetTimeOut seems to doesnt work.
Here the ContentScript.
var webs = []; // all links
var l = document.links; //get all links
var unwebs; //new WebPage
function browse(){
// find links
for(var i=0; i<l.length; i++) {
webs.push(l[i].href);
}
//pick a random link
unwebs = webs[Math.floor(Math.random()*webs.length)];
}
function clickLink(){
//redirection
window.location.href = unwebs ;
}
$(document).ready(function(){
browse();
clickLink();
}
thank you.

See the tabs docs
main.js
var tab = require('sdk/tabs').activeTab;
tab.on('ready', function() {
//attach content script with tab.attach
});

changes not reflected in JS

I am trying to setup a new "a" component using JS function which is called , using following :
function add_div(data){
mydiv = document.getElementById("new_twt");
var link =document.createElement("a");
var text = "you have new conversations";
link.setAttribute("name",text);
link.onclick=function(){new_tweet(data);};
mydiv.appendChild(link);
}
Changes are not reflecting on the webpage , however if I use some other element such as button or new div it gets created instantly, am I missing something?

This works for me:
function add_div(data){
var mydiv = document.getElementById("new_twt");
var link = document.createElement("a");
var text = "you have new conversations";
link.name = text;
link.href = '#';
link.innerHTML = 'link';
link.onclick=function(){ new_tweet(data); return false; };
mydiv.appendChild(link);
}
I've added link text (innerHTML) so you can actually see the link
I've also added "href" so the link behaves as a link (with this you need to prevent default link action, like "return false" in the event listener, to prevent browser from jumping to the top)

Try this:
var mydiv = document.getElementById("new_twt");
var aTag = document.createElement('a');
aTag.setAttribute('href',"yourlink.htm"); //or #
aTag.innerHTML = "you have new conversations";
aTag.onclick=function(){new_tweet(data);};
mydiv.appendChild(aTag);
Here is working JS Fiddle.

Removing element from web page through firefox extension

I'm going to develop a firefox extension which adds a button beside the file input fields (the <input type="file"> tag) when a file is selected.
The file overlay.js, which contains the extension's logic, manages the "file choose" event through this method:
var xpitest = {
...
onFileChosen: function(e) {
var fileInput = e.explicitOriginalTarget;
if(fileInput.type=="file"){
var parentDiv = fileInput.parentNode;
var newButton = top.window.content.document.createElement("input");
newButton.setAttribute("type", "button");
newButton.setAttribute("id", "Firefox.Now_button_id");
newButton.setAttribute("value", "my button");
newButton.setAttribute("name", "Firefox.Now_button_name");
parentDiv.insertBefore(newButton, fileInput);
}
}
...
}
window.addEventListener("change", function(e) {xpitest.onFileChosen(e)},false);
My problem is that, everytime I choose a file, a new button is being added, see this picture:
http://img11.imageshack.us/img11/5844/sshotn.png
If I select the same file more than once, no new button appears (this is correct).
As we can see, on the first file input, only one file has been selected.
On the second one I've chosen two different files, in effect two buttons have been created...
On the third, I've chosen three different files.
The correct behavior should be this:
when a file is chosen, create my_button beside the input field
if my_button exists, delete it and create another one (I need this, beacuse I should connect it to a custom event which will do something with the file name)
My question is: how can I correctly delete the button? Note that the my_button html code does not appear on page source!
Thanks

Pardon me if I'm thinking too simply, but couldn't you just do this?
var button = document.getElementById('Firefox.Now_button_id')
button.parentNode.removeChild(button)
Is this what you were looking for? Feel free to correct me if I misunderstood you.

Solved. I set an ID for each with the following method:
onPageLoad: function(e){
var inputNodes = top.window.content.document.getElementsByTagName("input");
for(var i=0; i<inputNodes.length; i++){
if(inputNodes[i].type=="file")
inputNodes[i].setAttribute("id",i.toString());
}
}
I call this method only on page load:
var appcontent = document.getElementById("appcontent"); // browser
if(appcontent)
appcontent.addEventListener("DOMContentLoaded", xpitest.onPageLoad, true);
Then I've modified the onFileChosen method in this way:
onFileChosen: function(e) {
var fileInput = e.explicitOriginalTarget;
if(fileInput.type=="file"){
var parentDiv = fileInput.parentNode;
var buttonId = fileInput.id + "Firefox.Now_button_id";
var oldButton = top.window.content.document.getElementById(buttonId);
if(oldButton!=null){
parentDiv.removeChild(oldButton);
this.count--;
}
var newButton = top.window.content.document.createElement("input");
newButton.setAttribute("type", "button");
newButton.setAttribute("id", buttonId);
newButton.setAttribute("value", "my button");
newButton.setAttribute("name", "Firefox.Now_button_name");
parentDiv.insertBefore(newButton, fileInput);
this.count++;
}
}