I'm writing the extension which will change layout of google in my browser.
My script using external css file when browser shows google.com. And it works fine before I opening a new tag - css is cleared. How can I match my css only for google search page?
window.addEventListener("load", function() { myExtension.init(); }, false);
var myExtension = {
init: function() {
var appcontent = document.getElementById("appcontent"); // browser
if(appcontent)
appcontent.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true);
var messagepane = document.getElementById("messagepane"); // mail
if(messagepane)
messagepane.addEventListener("load", function(event) { myExtension.onPageLoad(event); }, true);
},
onPageLoad: function(aEvent) {
var patt_g=new RegExp('google.com','g');
Firebug.Console.log('Hide my ass started');
this.doc = aEvent.originalTarget; // doc is document that triggered "onload" event
CSSProvider.init();
if(patt_g.test(this.doc.location.href)) {
Firebug.Console.log('Hide my ass -> in');
CSSProvider.loadCSS();
} else {
Firebug.Console.log('Hide my ass -> out');
CSSProvider.unloadCSS();
}
// add event listener for page unload
aEvent.originalTarget.defaultView.addEventListener("unload", function(event){ myExtension.onPageUnload(event); }, true);
},
onPageUnload: function(aEvent) {
Firebug.Console.log('Hide my ass deleted');
if(patt_g.test(this.doc.location.href) ) {
Firebug.Console.log('Hide my ass -> out');
CSSProvider.unloadCSS();
}
}
};
var CSSProvider = {
init: function(){
this.sss = Components.classes["#mozilla.org/content/style-sheet-service;1"]
.getService(Components.interfaces.nsIStyleSheetService);
this.ios = Components.classes["#mozilla.org/network/io-service;1"]
.getService(Components.interfaces.nsIIOService);
this.uri = this.ios.newURI("chrome://hms/content/style.css", null, null);
this.isRegistered = this.sss.sheetRegistered(this.uri, this.sss.USER_SHEET)
},
loadCSS: function(){
if(!this.isRegistered){
this.sss.loadAndRegisterSheet(this.uri, this.sss.USER_SHEET);
}
},
unloadCSS: function(){
if(this.isRegistered){
this.sss.unregisterSheet(this.uri, this.sss.USER_SHEET);
}
}
};
Don't load/unload the CSS file each time a tab is opened - adding a user stylesheet will always apply it to all existing tabs, unloading it will remove it from all tabs. Simply add the stylesheet when your extension loads and put the CSS rules in the stylesheet into a #-moz-document section:
#-moz-document domain(google.com)
{
...
}
Documentation: https://developer.mozilla.org/en/CSS/#-moz-document
Related
I'm trying to build a browser for extension for myself. The idea is that when I click the icon of the plugin, it opens a page. I then want to execute some code after that new page has finished loading but somehow it doesn't work.
var result;
chrome.browserAction.onClicked.addListener(function() {
chrome.history.search(
{ text: "", maxResults: 100}, //object
function(results) { //callback
for(var item in results) {
var currItem = results[item];
if (currItem.url.indexOf("some_domain") > -1) {
result = results[item];
break;
}
}
//Go to website
chrome.tabs.create({
'url': result.url
}, function(tab) {
new_tabId = tab.id;
});
}
);
});
Now here comes the part that fails:
chrome.webNavigation.onCompleted.addListener(function(details) {
// if (check for correct URL here) {
var videos = document.getElementsByTagName("video");
var video = videos[0];
alert(videos.length); <--- always Zero! Why??
video.load();
video.play();
video.addEventListener("ended", function() { ... });
// }
});
They are both in the same background script and I do not have a content script.
The permissions in the manifest are "tabs", "history", "webNavigation"
When I check with the developer console and do:
document.getElementsByTagName("video").length I do get the correct number.
As implied by wOxxOm, what will prevent your code from working is that you are attempting to access the DOM from a background script. Specifically, the code:
var videos = document.getElementsByTagName("video");
var video = videos[0];
alert(videos.length); <--- always Zero! Why??
video.load();
video.play();
video.addEventListener("ended", function() { ... });
will not function in a background script. If you want to do this you will need to load/execute a content script.
Hi I'm trying to use modernizer load (yepnope.js) to conditionally load history.js (via AJAX) only when the browser does not natively support the HTML5 history API....
However in my tests on IE9/IE8 modernizer appears to load the history.js file successfully (at least I can see the HTTP request in the IE9 developer tools) However i still get an error (unrecognised method) when I try to use history.pushState or History.pushState.... can anyone suggest why this might be?
Modernizr.load([{
//test
test : Modernizr.history,
//if yes then do nothing as nothing extra needs loading....
//if no then we need to load the history API via AJAX
nope : ['/js/asm/vendor/history.js'],
complete : function() {
Tabs.init();
}
}])
var Tabs = {
init: function() {
this.bindUIfunctions();
this.pageLoadCorrectTab();
},
bindUIfunctions: function() {
.......
},
changeTab: function(hash) {
var anchor = $("[href='" + hash + "']");
var div = $(hash);
function displayTab(anchortab) {
// activate correct anchor (visually)
........
}
displayTab(anchor);
// update history stack adding additional history entries.
if (typeof history.pushState !== "undefined") {
// pushState is supported!
window.history.pushState(null, null, hash);
} else {
//use history API instead
History.pushState(null, null, hash);
}
//We also need to handle the backstate by telling the brower to trigger the tab behaviour!
window.addEventListener("popstate", function(e) {
anchor = $('[href="' + document.location.hash + '"]');
if (anchor.length) {
displayTab(anchor);
} else {
defaultAnchor = $('.transformer-tabs li.active a');
displayTab(defaultAnchor);
}
});
// Close menu, in case mobile
},
// If the page has a hash on load, go to that tab
pageLoadCorrectTab: function() {
......
},
toggleMobileMenu: function(event, el) {
......
}
}
I found I got on much better with the following lib (although IE8 still does not allow me to use the back and forward browser button to go between tabs).... at least there are no JS errors and it works for me in IE9 https://github.com/devote/HTML5-History-API
Modernizr.load([{
//test
test : Modernizr.history,
//if yes then do nothing as nothing extra needs loading....
//if no then we need to load the history API via AJAX
nope : ['/js/asm/vendor/history.min.js'],
complete : function() {
var location = window.history.location || window.location;
Tabs.init();
}
}])
//responsive tabs API code.
var Tabs = {
init: function() {
this.bindUIfunctions();
this.pageLoadCorrectTab();
},
bindUIfunctions: function() {
// Delegation
$(document)
.on("click", ".transformer-tabs a[href^='#']:not('.active')", function(event) {
Tabs.changeTab(this.hash);
event.preventDefault();
})
.on("click", ".transformer-tabs a.active", function(event) {
Tabs.toggleMobileMenu(event, this);
event.preventDefault();
});
},
changeTab: function(hash) {
var anchor = $("[href='" + hash + "']");
function displayTab(anchortab) {
var url = anchortab.attr("href");
console.log("url" + url);
var div = $(url);
// activate correct anchor (visually)
anchortab.addClass("active").parent().siblings().find("a").removeClass("active");
// activate correct div (visually)
div.addClass("active").siblings().removeClass("active");
anchortab.closest("ul").removeClass("open");
}
displayTab(anchor);
// update history stack adding additional history entries.
// pushState is supported!
history.pushState(null, null, hash);
//We also need to handle the backstate by telling the brower to trigger the tab behaviour!
$(window).on('popstate', function(e) {
anchor = $('[href="' + document.location.hash + '"]');
if (anchor.length) {
displayTab(anchor);
} else {
defaultAnchor = $('.transformer-tabs li.active a');
displayTab(defaultAnchor);
}
});
// Close menu, in case mobile
},
// If the page has a hash on load, go to that tab
pageLoadCorrectTab: function() {
this.changeTab(document.location.hash);
},
toggleMobileMenu: function(event, el) {
$(el).closest("ul").toggleClass("open");
}
}
I'm trying to write an addon for a certain file type, and I would like to add an "Send to MyAddonName" option to the download file dialog, under the "Open with" and "Save file" options. Not referring to the Download Manager.
Is there any way to achieve this using the Firefox Addon SDK? This is my first extension so I am not extremely familiar with the SDK or the more advanced XUL addons.
I'm not sure how to do this with addon sdk. But this is how i would do it from a bootstrap addon.
I would use Services.wm.addEventListener to add this and listen to window load of chrome://mozapps/content/downloads/unknownContentType.xul
var windowListener = {
//DO NOT EDIT HERE
onOpenWindow: function(aXULWindow) {
// Wait for the window to finish loading
let aDOMWindow = aXULWindow.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowInternal || Ci.nsIDOMWindow);
aDOMWindow.addEventListener('load', function() {
aDOMWindow.removeEventListener('load', arguments.callee, false);
windowListener.loadIntoWindow(aDOMWindow);
}, false);
},
onCloseWindow: function(aXULWindow) {},
onWindowTitleChange: function(aXULWindow, aNewTitle) {},
register: function() {
// Load into any existing windows
let DOMWindows = Services.wm.getEnumerator(null);
while (DOMWindows.hasMoreElements()) {
let aDOMWindow = DOMWindows.getNext();
windowListener.loadIntoWindow(aDOMWindow);
}
// Listen to new windows
Services.wm.addListener(windowListener);
registered = true;
},
unregister: function() {
// Unload from any existing windows
let DOMWindows = Services.wm.getEnumerator(null);
while (DOMWindows.hasMoreElements()) {
let aDOMWindow = DOMWindows.getNext();
windowListener.unloadFromWindow(aDOMWindow);
}
for (var u in unloaders) {
unloaders[u]();
}
//Stop listening so future added windows dont get this attached
Services.wm.removeListener(windowListener);
},
//END - DO NOT EDIT HERE
loadIntoWindow: function(aDOMWindow) {
if (!aDOMWindow) {
return;
}
if (aDOMWindow.location == 'chrome://mozapps/content/downloads/unknownContentType.xul'); {
//check file type
var fileName = aDOMWindow.document.getElementById('location').value;
var fileType = fileName.substr(fileName.lastIndexOf('.'));
if (fileType == 'zip') {
var myxul = document.createElementNS('xul namescpae here look it up', 'element you want');
aDOMWindow.document.insertBefore(elementToInsertBefore, myXul);
}
}
},
unloadFromWindow: function(aDOMWindow) {
if (!aDOMWindow) {
return;
}
}
}
};
I've developed a firefox add on . In main.js when I'm calling a js file using contentScriptFile it is unable to call , The function(addEventListener) get never called
*** Edit 1 ***
Sorry for missing what I actually need .
In get-text.js I need to send a XMLHttpRequest using GET method . If I attach my javascript in panel.html , then I'm unable to receive the request thereby ,
I'm attaching the whole file here
main.js file
var { ToggleButton } = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var self = require("sdk/self");
var data=require("sdk/self").data;
var button = ToggleButton({
id: "my-button",
label: "my button",
icon: {
"16": "./icon.png",
"32": "./icon.png",
"64": "./icon.png"
},
onChange: handleChange
});
var panel = require("sdk/panel").Panel({
width:350,
contentURL: data.url("panel.html"),
contentScriptFile: data.url("get-text.js"),
onHide: handleHide
});
function handleChange(state) {
if (state.checked) {
panel.show({position: button});
}
}
function handleHide() {
button.state('window', {checked: false});
}
get-text.js file
(function(){
var init = function() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.hackerearth.com/chrome-extension/events/", true);
xhr.send();
xhr.onreadystatechange = function () {
if(xhr.readyState===4) {
if(xhr.status===200) {
console.log("hello2");
var json = JSON.parse(xhr.responseText);
console.log(json);
} else {
console.log("Status is :"+xhr.status);
}
}
};
};
console.log("function passing");
document.addEventListener('DOMContentLoaded', function () {
console.log("pankaj \t");
init();
});
});
* edit 1*
If you need to catch the DOMContentLoaded event of panel's document, then drop contentScriptFile and include get-text.js from panel.html.
(the script will behave the same, with a subtle difference regarding the port mechanism)
Keep in mind that DOMContentLoaded will be fired once, when you call the Panel constructor. Subsequent calls to show/hide will not trigger it.
I'm trying to develop a firefox toolbar ;)
so my structure is
In the options.xul is an PrefWindow which i'm opening over an
<toolbarbutton oncommand="esbTb_OpenPreferences()"/>
function esbTb_OpenPreferences() {
window.openDialog("chrome://Toolbar/content/options.xul", "einstellungen", "chrome,titlebar,toolbar,centerscreen,modal", this);}
so in my preferences i can set some checkboxes which indicates what links are presented in my toolbar. So when the preferences window is Closed or the "Ok" button is hitted I want to raise an event or an function which updates via DOM my toolbar.
So this is the function which is called when the toolbar is loaded. It sets the links visibility of the toolbar.
function esbTB_LoadMenue() {
var MenuItemNews = document.getElementById("esbTb_rss_reader");
var MenuItemEservice = document.getElementById("esbTb_estv");
if (!(prefManager.getBoolPref("extensions.esbtoolbar.ShowNews"))) {
MenuItemNews.style.display = 'none';
}
if (!(prefManager.getBoolPref("extensions.esbtoolbar.ShowEservice"))) {
MenuItemEservice.style.display = 'none';
}
}
So I tried some thinks like adding an eventlistener to the dialog which doesn't work... in the way I tried...
And i also tried to hand over the window object from the root window( the toolbar) as an argument of the opendialog function changed the function to this.
function esbTB_LoadMenue(RootWindow) {
var MenuItemNews = RootWindow.getElementById("esbTb_rss_reader");
var MenuItemEservice = RootWindow.getElementById("esbTb_estv");}
And then tried to Access the elements over the handover object, but this also not changed my toolbar at runtime.
So what i'm trying to do is to change the visibile links in my toolbar during the runtime and I don't get it how I should do that...
thanks in advance
-------edit-------
var prefManager = {
prefs: null,
start: function()
{
this.prefs = Components.classes["#mozilla.org/preferences-service;1"]
.getService(Components.interfaces.nsIPrefService)
.getBranch("extensions.esbtoolbar.");
this.prefs.QueryInterface(Components.interfaces.nsIPrefBranch2);
this.prefs.addObserver("", this, false);
},
end: function()
{
this.prefs.removeObserver("", this);
},
observe: function(subject, topic, data)
{
if (topic != "nsPref:changed")
{
return;
}
//Stuff what is done when Prefs have changed
esbTB_LoadMenue();
},
SetBoolPref: function(pref,value)
{
this.prefs.setBoolPref(pref,value);
},
GetBoolPref: function(pref)
{
this.prefs.getBoolPref(pref);
}
}
So this is my implementation.
The trick is to listen to preference changes. That way your toolbar updates whenever the prefs change -- regardless if it happened through your PrefWindow, about:config or some other mechanism.
In Toolbar.js you do the following
var esbTB_observe = function(subject, topic, data) {
if (topic != "nsPref:changed") {
return;
}
// find out which pref changed and do stuff
}
var esbTB_init = function() {
prefs =
Components.classes["#mozilla.org/preferences-service;1"]
.getService(Components.interfaces.nsIPrefService)
.getBranch("extensions.esbtoolbar.");
prefs.QueryInterface(Components.interfaces.nsIPrefBranch2);
prefs.addObserver("", esbTB_observe, false);
}
// Init addin after window loaded
window.addEventListener("load", esbTB_init, false);
Now, when the window loads, the esbTB_init() function is called in which the observer to the pref branch "extensions.esbtoolbar." is added. Later, when a pref in the branch is changed, the esbTB_observe() function is automatically called.
In esbTB_observe() you have to read the values of your prefs and adjust the toolbar.