Getting the above error on page refresh, but i am not using localStorage in my Code.
Perform operations only possible in the browser within the following if statement:
if (process.client) {
localStorage...
}
See: https://nuxtjs.org/api/context/
another option is to only call it in the beforeMount or mounted functions, since they always happen on the client side.
Your app is running on a server so there is no browser or window, which means you do not have access to the APIs provided by the browser.
You can prevent this error by checking if the window object is available before try to access it. for example:
const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;
//OR
if (typeof window !== 'undefined') {
const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;
}
Well What I did was that I created a state like
const thisWindow = useState('thisWindow')
and in app.vue onMounted set window like
onMounted( () => {
thisWindow.value = window
})
and just called it in my function and globally
Related
I created an Outlook add-in and posted it using Integrated Apps in the admin center. I created the add-in using Yeoman. The application status is OK and appears in the Outlook of relevant users, but I get the following error message when trying to execute it's function:
Apologies for the blur, I can't seem to fix that though my source image is fine
I have the following line in my manifest.xml file calling the function:
<Action xsi:type="ExecuteFunction">
<FunctionName>action</FunctionName>
</Action>
And I have the following code in that specific function:
function action(event) {
const message = {
type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
message: "Web URL opened.",
icon: "Icon.80x80",
persistent: true,
};
// Show a notification message
window.open("https://myurl.com");
Office.context.mailbox.item.notificationMessages.replaceAsync("action", message);
// Be sure to indicate when the add-in command function is complete
event.completed();
}
function getGlobal() {
return typeof self !== "undefined"
? self
: typeof window !== "undefined"
? window
: typeof global !== "undefined"
? global
: undefined;
}
const g = getGlobal();
// The add-in command functions need to be available in global scope
g.action = action;
Does anyone know how what could be going wrong here? And how I can fix this to execute the redirect when the button is clicked?
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.
As in the question... how to get the window object from an event fired in the window scope for example:
handleEvent: function(event) {
// is window object available here and can we get it from event
}
I can get the window object from other APIs. I was wondering if it was possible to get it from the fired event.
Reference:
handleEvent
Code Snippet using handleEvent
I found out the answer ... any of these will get the window object from the event
event.view event.view
event.target.ownerDocument.defaultView event.target
event.originalTarget.ownerGlobal event.originalTarget (Non-standard)
It depends on the event. But most usually yes you can. Do a console.log on the event then you might something like targetChromeWindow or something, this one I can't remember i came across it once though while doing something.
Most usually though, get event.target or relatedTarget or originalTarget (theres one more target i forgot what it is) and do ownerDocument.defaultView
If you want the chrome window from that you can get that by doing this:
var DOMWin = win.QueryInterface(Ci.nsIInterfaceRequestor)
.getInterface(Ci.nsIWebNavigation)
.QueryInterface(Ci.nsIDocShellTreeItem)
.rootTreeItem
.QueryInterface(Ci.nsIInterfaceRequestor)
.getInterface(Ci.nsIDOMWindow);
The following will populate the window and document variables if they do not already exist. It should work from any scope/context:
if (typeof window === "undefined") {
//If there is no window defined, get the most recent.
var window = Components.classes["#mozilla.org/appshell/window-mediator;1"]
.getService(Components.interfaces.nsIWindowMediator)
.getMostRecentWindow("navigator:browser");
}
if (typeof document === "undefined") {
//If there is no document defined, get it
var document = window.content.document;
}
Here are some additional variables which might be useful to have available, depending on what you are doing:
if (typeof gBrowser === "undefined") {
//If there is no gBrowser defined, get it
var gBrowser = window.gBrowser;
}
var tab = gBrowser.selectedTab;
var browserForTab = gBrowser.getBrowserForTab( tab );
var notificationBox = gBrowser.getNotificationBox( browserForTab );
var ownerDocument = gBrowser.ownerDocument;
I am using the Firefox Add-on SDK, and I am attempting to open a tab as soon as my Firefox extension gets installed for the first time. The code below is in my main.js, but it doesn't seem to work. Any tips?
main.js:
var ss = require("simple-storage");
var tabs = require('tabs');
if (typeof(ss.storage.firstRun) === undefined) {
ss.storage.firstRun = false;
alert('First run');
tabs.open("http://www.google.com");
}
Try using the load install reason: https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/load-and-unload.html
Your approach is correct but the typeof operator gives you a string so you have to compare it to a string:
if (typeof ss.storage.firstRun == "undefined") {
This way it should work.
I want to inject stylesheets and scripts before DOMContentLoaded.
In Google Chrome it is possible using run_at = document_start.
Is there something similar in Firefox addons? Can I run things before gBrowser.addEventListener("DOMContentLoaded" ? How?
The current workaround I'm using is the following
gBrowser.addEventListener("DOMNodeInserted",
function (e)
{
if (typeof(e.relatedNode.tagName) != "undefined" &&
e.relatedNode.tagName == "DIV")
{
var window = e.relatedNode.ownerDocument.defaultView;
if (window.MyScript) return; // if it was injected
// ignore other events
if (/siteregex/i.test(window.location.href))
{
Initialize(window); // inject scripts
}
}
},
true);
DIV is the first element on body, so it will load right after this node. I won't have to wait for the whole page.