I am trying to pass a value from one tab to another.
I tried sessionStorage and clipboard, but no luck so far. Here is the demo, and the code as well:
https://builder.addons.mozilla.org/package/154290/latest/
What it tries to do is get the selected text, and pass it to the opened tab:
// Create a new context menu item.
var menuItem = contextMenu.Item({
label: "Check with Proofread Bot",
context: contextMenu.SelectionContext(),
contentScript: 'self.on("click", function () {' +
' var text = window.getSelection().toString();' +
' sessionStorage.setItem("proofread_bot_chrome", text);' +
' self.postMessage(text);' +
'});',
onMessage: function(text) {
clipboard.set(text);
//sessionStorage.setItem("proofread_bot_chrome", text);
tabs.open({
url: "http://proofreadbot.com",
onOpen: function onOpen(tab) {
// do stuff like listen for content
// loading.
alert(clipboard.get());
alert(selection.text);
sessionStorage.setItem("proofread_bot_chrome", clipboard.get());
}
});
}
});
sessionStorage and localStorage are always bound to a domain. Content scripts run with the privileges of the web page meaning that they access the session storage for that web page - not very useful to pass data around. And they simply don't have clipboard access.
This means that you can't get around "traditional" messaging. When you open the tab you should attach a content script, wait for it to be ready (the content script can send a message to indicate that) and send it the text. Something like this:
onOpen: function(tab) {
var worker = tab.attach({
contentScript: "self.on('message', function(text) {alert(text);});" +
"self.postMessage(null);",
onMessage: function() {
worker.postMessage(text);
}
});
}
For reference: Communicating using postMessage()
You should try localStorage instead of sessionStorage. localStorage is shared between the documents from same origin.
Although it persists even on tab close, which may or may not be desirable depending on your requirement.
sessionStorage is per document, and hence not shared between tabs.
Related
Is there an API that makes it possible to get the current tab's history in a Web Extension in Firefox? Just like when clicking and holding on the Back button, a dropdown will appear to show the current tab's history.
No. You cannot ask for the list for a certain tab by default.
You can, however, listen for the tab events onUpdated, onCreated etc. Using the tabId which stays the same, you can keep a list of URLs in a background script (background.js) which is always running if the addon is enabled.
You would do it like this:
let arr=[]; // At the top of background.js
browser.tabs.onCreated.addListener(handleCreated); // Somewhere in background.js
function handleCreated(tab) {
let tabId = tab.id;
if(arr[tabId]==null) arr[tabId] = [];
arr[tabId].push(url);
}
function getHistoryForCurrentTab(){
function currentTabs(tabs) {
// browser.tabs.query returns an array, lets assume the first one (it's safe to assume)
let tab = tabs[0];
// tab.url requires the `tabs` permission (manifest.json)
// We will now log the tab history to the console.
for(let url of arr[tab.id]){
console.log(url);
}
}
function onError(error) {
console.log(`This should not happen: ${error}`);
}
browser.tabs.query({currentWindow: true, active: true}).then(currentTabs, onError);
}
The above code is a proof of concept. Some improvements you will need to consider: implement onClosed which resets the tab history for that id (arr[tabId] = null), implement onUpdated (will be needed for sure, same logic as in handleCreated).
Links:
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs
I'm porting a Chrome extension to a Firefox extension and due to the nature of the website that it runs on, I need to monitor the pushState.
Chrome Extensions has a handy way to handle this: chrome.webNavigation.onHistoryStateUpdated. The way that I use it in the Chrome extension is as follows:
chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) {
var tabUrl = details.url;
if (isTabUrlValid(tabUrl)) {
$.get(tabUrl, function(data) {
var videoUrl = $(data).find('meta[itemprop=contentURL]').prop('content');
videoUrl = validateUrl(videoUrl);
videoUrl5k = make5kUrl(videoUrl);
});
}
});
I need to do the same thing for the Firefox Extension, but I haven't found any good answers. I've tried doing the answer mentioned here: How to get notified about changes of the history via history.pushState?
(function(history) {
var pushState = history.pushState;
history.pushState = function(state) {
if (typeof history.onpushstate == "function") {
history.onpushstate({state: state});
}
var tabUrl = tabs.activeTab.url;
console.log("UPDATED TAB URL: " + tabUrl);
if (isTabUrlValid(tabUrl)) {
$.get(tabUrl, function(data) {
var videoUrl = $(data).find('meta[itemprop=contentURL]').prop('content');
videoUrl = validateUrl(videoUrl);
videoUrl5k = make5kUrl(videoUrl);
});
}
return pushState.apply(history, arguments);
};
})(window.history);
The problem is that when I do cfx run it complains that history/window is undefined and therefore never gets detected. I think this is due to it being within the SDK, but I don't know of a good workaround.
Any thoughts?
Edit: I looked at #willma's answer below and I don't think that would work for me. The issue is that the URL is updated via pushState and the DOM is not... Is there any good way replicate what I do in the chrome extension?
Edit: Here's the pageMod portion
pageMod.PageMod({
attachTo: 'top', // Don't attach to iFrames --> http://goo.gl/b6b1Iv
include: [URLs],
contentScriptFile: [data.url("jquery-2.1.1.min.js"),
data.url("csScript.js")],
onAttach: function(worker) {
worker.port.on('url', function(url) {
var videoUrl = validateUrl(url);
videoUrl5k = make5kUrl(videoUrl);
console.log("--5K URL--: " + videoUrl5k);
});
}
});
That history code needs to get injected into a tab using a content script. Right now your logic says when the history event occurs, check to see if the tab URL is valid.
In Firefox, the logic will be the other way around: when a tab is opened, check if its URL is valid, and if so, then attach a script to it that will monitor for the history event. To do so you'll need to use a Page Mod.
Edit: All the code
One key concept you're missing is the difference between a content script and a main/library script. The library scripts are stored in lib and have access to all the SDK modules, but don't have access to the DOM, window object… The content scripts are stored in data, are injected into a page using the PageMod or tabs modules, can access the dom and window objects, but have no access to any SDK modules. Content scripts are essentially like the page scripts you'd attach your standard HTML page (with <script></script>) with the caveats that they can't share variables other page scripts but they can communicate with the main scripts.
The only reason I bring this up is because your initial problem was trying to access the window object from a main script and the problem in your fiddle is that you're trying to access the tabs module inside a content script. It's worth reading the topmost link in this answer if this is still confusing.
main.js
const { PageMod } = require('sdk/page-mod');
var sendXHR = function(url) {
// Do something with the new URL
// See Request Module docs (below) for sending XHRs from main script.
}
const pageMod = PageMod({
attachTo: 'top',
include: '*',
onAttach: function(worker) {
worker.port.on('newURL', sendXHR);
}
});
content.js
var sendNewUrlToMain = function() {
self.port.emit('newURL', location.href);
}
var pushState = window.history.pushState;
window.history.pushState = function(state) {
if (typeof history.onpushstate == "function") {
history.onpushstate({state: state});
}
sendNewUrlToMain();
return pushState.apply(history, arguments);
}
window.addEventListener('hashchange', sendNewUrlToMain);
Here are the request module docs, for making XHRs.
NB: if you don't want to use the request module (the only reason being that you already have standard XHR code for your chrome extension and don't want to take the time to learn/rewrite that code), you can send a standard XHR from the content script, but in doing so, you risk allowing the user to close the tab and thus destroy the script before your XHR callbacks are executed.
I am developing an extension for Firefox that needs to open a standard Javascript popup window that can be a custom size. I have looked all around and I can't seem to figure out how to do it. My code for a contextual menu works good, but it seems like Firefox is blocking the window.open snippet needed to accomplish this.
Is there a way todo it via XUL, or any other SDK modules?
We need a bit more details, here's what I think you're going for.
require("sdk/context-menu").Item({
label: "Open Window",
contentScript: 'self.on("click", function (node, data) {' +
' window.open("http://stackoverflow.com/questions/14572412/how-to-open-a-popup-window-via-firefox-addon-contextual-menu");' +
'});'
});
This code would open up a new window (or tab) when the user clicks on the Open Window item. The window.open function works in this context but I'm not sure what context you're not seeing it work in.
Hope this helps you.
If you want open not a popup window but panel, here's an example:
var self = require("sdk/self");
var panels = require("sdk/panel");
var panel = panels.Panel({
contentURL: self.data.url("panel.html")
// , onHide: handleHide
});
require("sdk/context-menu").Item({
label: "Open Window",
contentScript: 'self.on("click", function (node, data) {' +
' self.postMessage(node.innerHTML);' +
'});',
onMessage: function (data) {
console.log('posted retrieved: '+data);
panel.show();
}
});
And some reference
You can also use:
`<popupset>
<panel id="some">
</panel>
<popupset>`
In the JavaScript write:
document.getElementById('some').openPopup(...)
I just started using the FireFox Builder to build a simple addon. I realised that I cannot get direct access to the window object.
What I want to do is to get the window object and pollute it with some classes and functions so I can call them from the page itself.
Below is the current code:
// This is an active module of the ritcoder Add-on
require("widget").Widget({
id: "widgetID1",
label: "My Mozilla Widget",
contentURL: "http://www.mozilla.org/favicon.ico",
onClick: function(evt){
var tabs = require("tabs");
var activeTab = tabs.activeTab;
var notifications = require("notifications");
notifications.notify({
title: "Jabberwocky",
text: "'Twas brillig, and the slithy toves",
data: "did gyre and gimble in the wabe",
onClick: function (data) {
console.log(data);
// console.log(this.data) would produce the same result.
}
});
activeTab.window.a=20; //this fails
context.alert('yesx');
}
});
How do I do this? Inject some code into the active page so that it can be called.
regards,
You need to use tab.attach() to run a content script in the tab's context, and then use unsafeWindow to add properties the page's script can see. (You should also read the introduction to Content Scripts.)
The Addon SDK doesn't provide a direct access (without the content script) to the page from the add-on's code because it tries to be forward compatible with the plans to make web pages run in processes separate from the browser's and the add-on's process.
I would like to write a firefox extension. This extension is not a generic extension but work specifically for a domain where I need to highlight specific html components.
How should I do that? I just want the js loaded when the user is browsing a specific domain.
My current overaly.js is basically empty (generated by the Extension Wizard):
var myextension = {
onLoad: function() {
// initialization code
this.initialized = true;
this.strings = document.getElementById("myextension-strings");
},
onMenuItemCommand: function(e) {
var promptService = Components.classes["#mozilla.org/embedcomp/prompt-service;1"]
.getService(Components.interfaces.nsIPromptService);
promptService.alert(window, this.strings.getString("helloMessageTitle"),
this.strings.getString("helloMessage"));
},
onToolbarButtonCommand: function(e) {
// just reuse the function above. you can change this, obviously!
myextension.onMenuItemCommand(e);
}
};
window.addEventListener("load", myextension.onLoad, false);
And my ff-overlay.xul is:
myextension.onFirefoxLoad = function(event) {
document.getElementById("contentAreaContextMenu")
.addEventListener("popupshowing", function (e){ myextension.showFirefoxContextMenu(e); }, false);
};
myextension.showFirefoxContextMenu = function(event) {
// show or hide the menuitem based on what the context menu is on
document.getElementById("context-myextension").hidden = gContextMenu.onImage;
};
window.addEventListener("load", myextension.onFirefoxLoad, false);
I was thinking to go neanderthal and do a check inside myextension.onFirefoxLoad to see if the currentpage is the one I want but that requires the user to click the proper item on the context menu.
I'm not totally following what you have because both of those look like JS files, not XUL files. But what you probably want to do is listen for the load event coming from the web pages that are loaded. Then, in your event loader, just look at each page that loads and see whether it's coming from the specific domain you want.
A great (though not always quite as easy as it sounds) way to find out how to do something in a Firefox addon is to find another addon that does something similar. DOM Inspector and Inspect Context are your friends! The first such addon that comes to mind in this case is WikiTrust so you could try looking at that one to see if it gives you any inspiration.