I have an addon that places an ActionButton on the toolbar. When the ActionButton is clicked the code below is run.
The code opens a new tab and provides some html and js, this acts as the addon's UI.
The url of the new tab is:
resource://jid1-qljswfs6someid-at-jetpack/addon-firefox/data/html/view.html
If I copy/paste that url into another new tab manually, the html displays but the js logic is not loaded. Is there a way to do this without clicking the ActionButton? So I could maybe bookmark the addon instead of having the ActionButton take up space.
Code:
Tabs.open({
url: require("sdk/self").data.url('html/view.html'),
onReady: function onReady(tab) {
worker = tab.attach({
contentScriptFile: [
require("sdk/self").data.url.get('lib/lib1.js'),
require("sdk/self").data.url.get('js/lib1.js')
],
onMessage: function(message) {
console.log('stuff done');
}
});
}
});
In order to run it whenever the site from data.url('html/view.html') is loaded you would have to use page-mod instead of manually attaching to the document to the tab.
Your include pattern would be something like data.url('html/view.html') + "*", so it also attaches to the page if there is a hash or a query to the document.
Related
I am trying to create a chrome kiosk app that will open a webpage that contains links in a webview and then load the links within the same webview. However, the links on the webpage that I am working with are target="_blank" and I am getting the error <webview>: A new window was blocked wehn they are clicked. I found a solution to this here and tried to implement its suggestion like this:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create(
'window.html',
{ 'width': 1000, 'height': 1000 },
function(win) {
win.contentWindow.onload = function() {
var webview = win.contentWindow.document.querySelector('#webview');
webview.addEventListener('newwindow', function(e) {
chrome.app.window.create(e.targetUrl,window.open()
});
};
}
);
});
However, I would like to have the link open not in the browser, but in the same webview that the link was launched from.
Is there some way to capture the target URL, strip it of its target="_blank" attribute, and then load the URL in the original webview?
An event listener in the content script will capture the URL when the newwindow event is fired. Once the URL is captured, it's a simple thing to set the URL as the webview's source.
var webview = document.querySelector('#webview');
webview.addEventListener('newwindow', function (e) {
//prevent the link from attempting to open a new window
e.preventDefault();
webview.src = e.targetUrl;
});
Because this script doesn't open any new windows, it doesn't have to be run specifically in the app's background script.
I would like to build an Firefox extension which after users click it, a web page is dynamically constructed and opened in a new tab.
In "tab" API, I only saw tab.open() open a hyperlink to a remote website. Can I construct a JavaScript variable contains all the HTML contents (Like var page = "blahblah....") and open it? How to do that?
You don't have to dynamically construct it, just put a htm page in your addon and then the link to it will be resource://your addon id/blah.htm. This addon here creates a page: addons.mozilla.org/en-US/firefox/addon/twitch-alarm
You can also create an about:blah url to your page, this shows how to do it without the sdk: github.com/Noitidart/ZooniverseXpert
You don't have to create a html page dynamically but put a html page in your addon and refer it when you open a tab.
tabs.open({
url : self.data.url("js/error.html"),
onReady : function(tab) {
var errorWorker = tab.attach({
contentScriptFile : self.data.url("js/error.js")
});
errorWorker.port.emit("error_page",message);
}
});
Here I am displaying an error page which is stored in my addon and attaching a content script file to dynamically change the contents of html page through message passing between main.js and error page.
Hope it is of some use to you.
I have 3 links made as tabs in my jsp page. Every link goes into a servlet and fetches the data. However when i try the same in IE-7, I don't see that tab content is getting loaded every-time i clicked the tab.
When i try the same page in Firefox i see that page is getting dynamically loaded every time i click the tab. Can someone please help me how to make it work on IE. All these links get data from 3 different servlets Thank you!
I am using jquery-1.7.2, jquery-ui-1.8.22 and using the Le_Frog theme.
My tab code:
$("#main").tabs({
cache: false,
spinner: "Processing"
});
I added the following code and it worked fine.
$("#main").tabs({
cache: false,
spinner: "Retrieving data...",
ajaxOptions: { async: false,cache:false }
});
I am trying to create an add-on through Mozilla Add-On Builder. What I need to know is how to get the URL of a left clicked link in the active tab through the add-on and open it in a new tab.
I know this process involved adding an eventlistener through a page-mod and then using the tabs module, however I can't seem to get the syntax correct.
Edit: (This is what I have so far)
var Widget = require("widget").Widget;
var tabs = require('tabs');
var pageMod = require("page-mod");
exports.main = function() {
pageMod.PageMod({
include: '*',
contentScriptWhen: 'ready',
contentScript: "window.addEventListener('click', function(event) { self.port.emit( 'click',event.target.toString() )},false)",
onAttach: function(worker) {
worker.port.on("click", function(urlClicked) {
tabs.open(urlClicked);
});
}
});
};
The code you have there is mostly correct and works for me. There are two issues with your content script code however:
It needs to call event.preventDefault() to prevent the browser from following the link. Otherwise the linked page will be loaded both in the current tab and the new tab opened by your extension.
It doesn't check whether event.target is actually a link. It could be a child node of the link or it might not be a link at all.
Altogether, your content script should look like this:
window.addEventListener("click", function(event)
{
var link = event.target;
while (link && link.localName != "a")
link = link.parentNode;
if (link)
{
self.port.emit("click", link.href);
event.preventDefault();
}
}, false);
For a non-trivial content script like this, you shouldn't use contentScript parameter but rather put it into its own file in the data/ directory. You can then use contentScriptFile parameter when constructing the panel:
contentScriptFile: require("self").data.url("contentScript.js"),
I am trying to get page title on every page using new Firefox add-on builder. How can I do that?
Edit
More info
I want to get page title on every page load event .
It is actually the very first example for the tabs package:
var tabs = require("tabs");
for each (var tab in tabs)
console.log(tab.title);
See tab.title.
Edit: If you need to know the title of each page as it loads rather than capture the current state then you should use the page-mod package:
var pageMod = require("page-mod");
pageMod.PageMod({
include: "*",
contentScriptWhen: "end",
contentScript: 'console.log(document.title);'
});
The documentation has some info on how a content script can communicate with the add-on, e.g. to send it this page title.
If you are only interested in top-level documents then you can still use the tabs package:
var tabs = require("tabs");
tabs.on("ready", function(tab) {
console.log(tab.title);
});
"ready" events won't get fired if the page is served from back-forward cache.
'pageshow' event is the appropriate event to listen to.
var tabs = require("sdk/tabs");
function onOpen(tab) {
tab.on('pageshow', function(tab) {
console.log('title: '+ tab.title);
}
tabs.on('open', onOpen);