I'm trying to port my extension from Chrome to Firefox, however I have problem
with X-Frame-Options. My extension is pretty simple, all it does is create few
iframes, wait for them to load and then extract some data from the loaded pages.
This all works great it Chrome, however in Firefox I have problem that the page
does not load in the iframe (probably due to X-Frame-Options: ALLOW-FROM XXX).
In Chrome having
"permissions": {
"https://example.com/"
}
is enough to make browser ignore the X-Frame-Options, but in Firefox
it still does not work.
So, how can I force Firefox to ignore this X-Frame-Options for my extension (and
its pages)?
EDIT: I would just like to add that since I'm using injected content script anyway (to get data from the frame), I don't need it to be in an iframe. All I need is to render the page without it being visible to user (so new tabs etc. are no-go :/).
EDIT2: This 2 file extension works in chrome, but not in firefox:
manifest.json
{
"manifest_version": 2,
"name": "Iframe test",
"description": "foobar",
"version": "0.9.3",
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"https://jisho.org/"
]
}
popup.html
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<iframe src="https://jisho.org"></iframe>
</body>
</html>
It looks like it "just works" in Chrome because Chrome doesn't support "ALLOW FROM".
Firefox does the right thing here, but you can intercept this header like any other with the webRequest API, specifically webRequest.onHeadersReceived. Something like this (untested) should work:
browser.webRequest.onHeadersReceived.addListener((details) => {
let newHeaders = details.responseHeaders.filter(
header => !header.name.toLowerCase().endsWith('frame-options')
);
return {responseHeaders: newHeaders};
},
{
urls: [ 'https://jisho.org/*' ],
types: [ 'sub_frame' ]
},
['blocking', 'responseHeaders']
);
You also require the webRequest and webRequestBlocking permissions for this.
Related
I am working on a Mozilla Firefox extension that is creating a new alarm.
Here is the code in the manifest.json file:
{
"manifest_version": 2,
"name": "alarms-test",
"version": "1.0",
"content_scripts":
[
{
"matches": ["https://developer.mozilla.org/*"],
"js": ["alarms-test.js"]
}
],
"permissions":
[
"alarms"
]
}
Here is the code in the alarms-test.js file:
console.log("alarms-test: start");
const delayInMinutes = 1;
browser.alarms.create({delayInMinutes});
console.log("alarms-test: end");
Here are the steps that I am following:
In Mozilla Firefox, go to about:debugging
Click on This Firefox then Load Temporary Add-on...
Browse your local files to select the manifest.json file
Go to https://developer.mozilla.org/en-US/
Press F12 then click on the Console tab
See the output
Expected output:
alarms-test: start
alarms-test: end
Current output:
alarms-test: start
It means that something went wrong with the lines 2 and 3 of alarms-test.js.
Do you see what I forgot please?
Thank you.
Best regards.
I'm trying to install the pwa onto my mobile device. I only am able to add to home screen. Does anyone have any idea why this is happening?
To make your PWA installable you need to meet up the following requirments:
A web manifest,with the correct fields filled in.
The website to be served from a secure(HTTPS) domain.
An icon to represent the app on the device.
A service worker registered with a fetch eventhandler,to make the app work offline(this is only required by chrome for Android currently).
You must include your manifest file in section of your index.html,like this
<link rel="manifest" href="name.webmanifest">
Your manifest should contain the following fields,most of which are self explanatory.
{
"background_color": "purple",
"description": "Shows random fox pictures. Hey, at least it isn't cats.",
"display": "fullscreen",
"icons": [
{
"src": "icon/fox-icon.png",
"sizes": "192x192",
"type": "image/png"
}
],
"name": "Awesome fox pictures",
"short_name": "Foxes",
"start_url": "/pwa-examples/a2hs/index.html"
}
Now when the browser finds the manifest file with all requirements fulfilled,it will fire a beforeinstallprompt and accordingly you have to show the A2HS dialog.
NOTE:
Different browsers have different criteria for installation, or to trigger the beforeinstallprompt event.
Starting in Chrome 68 on Android (Stable in July 2018), Chrome will no longer show the add to home screen banner. If the site meets the add to home screen criteria, Chrome will show the mini-infobar.
For A2HS dialog:
Add a button in your document,to allow user to do the installation
<button class="add-button">Add to home screen</button>
Provide some styling
.add-button {
position: absolute;
top: 1px;
left: 1px;
}
Now in the JS file where you register your service worker add the following code
let deferredPrompt;
//reference to your install button
const addBtn = document.querySelector('.add-button');
//We hide the button initially because the PWA will not be available for
//install until it follows the A2HS criteria.
addBtn.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI to notify the user they can add to home screen
addBtn.style.display = 'block';
addBtn.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
addBtn.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
});
This may sound dumb, but I want to make a link open in a new tab whenever the icon in the toolbar is left-clicked. I've never made a Firefox addon before, and I'm pretty clueless on how you'd go about doing that.
You need browserAction in manifest.json, tabs.create and browserAction.onClicked.
Inside manifest.json:
"browser_action": {
"browser_style": true,
"default_icon": {
"32": "icons/icon-32.png"
}
}
Inside background.js:
browser.browserAction.onClicked.addListener((tab) => {
browser.tabs.create({url: "https://google.com"}); //
// or
browser.tabs.duplicate({tabId: tab.id}); // duplicate current tab, same as doing browser.tabs.create({url: tab.url}); but better (navigation history is kept)
});
Don't forget to ask for the "tabs" or "activeTab" permission in manifest.json.
"permissions": ["tabs", "activeTab"]
And don't forget to register background.js
"background": {
"scripts": ["background.js"]
}
I purchased a new macbook and I am now working on getting my apps to run on a 64bit mac.
However I haven't been able to remove the default menubar.
Is there anyway to change my app name from Electron to something else within Electron via app.js so I don't see Electron in Finder (revert to screenshot for better understanding)? Is there any way to remove the edit, view window, and help menus?
package.json:
{
"name": "hello",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"start": "electron ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron-prebuilt": "^0.33.0"
}
}
app.js:
var app = require("app"),
BrowserWindow = require("browser-window");
app.on("ready", function() {
var mainWindow = new BrowserWindow({
toolbar: false,
"skip-taskbar": true,
"auto-hide-menu-bar": true,
width: 800,
height: 600
});
mainWindow.loadUrl("file://" + __dirname + "/index.html");
mainWindow.setMenuBarVisibility(false);
mainWindow.setAutoHideMenuBar(true);
mainWindow.openDevTools();
});
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello</title>
</head>
<body>
Hello world!
</body>
</html>
After you create your browser window do the following:
mainWindow.setMenu(null);
Only works for Windows and Linux! - http://electron.atom.io/docs/api/browser-window/#winsetmenumenu-linux-windows
Otherwise you can create a custom menu of your own by checking out Electron's documentation on the Menu: http://electron.atom.io/docs/api/menu/.
I got same problem here with my electron app
I tried mainWindow.setMenu(null); but it didn't work
but I noticed that when app is running, there was an electron icon show in the dock which is your app
I think maybe this is the point to cause the problem here
just give it a try
app.dock.hide();
Notice: it's an os x only method (documentation)
there you go
after hide dock icon, you app no longer have default functions of ApplicationMenu or dockMenu, such as Quit, About, Hide etc...
so you can consider about give your app a Tray
The name Electron is in the Info.plist file inside Electron.app, change it to what you want.
Hi I have an app that is basically a html page.
I have a problem though as the html page is longer than the viewable screen and the page wont scroll.
Ive added this div:
<div id="scrollerId" style="width:320px; height:100px" x-mojo-element="Scroller">
<div >scrolling content</div>
</div>
but it doesn't do anything.
Please can someone help explain how to add one. or if i need to add anything to my javascript file or anything else ?
source/helloworld.js
enyo.kind({
name: "HelloWorld",
kind: enyo.VFlexBox,
components: [
{kind: "PageHeader", components: [
{content: "Page Header"}
]},
{flex: 1, kind: "Pane", components: [
{flex: 1, kind: "Scroller", components: [
//Insert your components here
]}
]},
{kind: "Toolbar", components: [
]}
]
});
Im a newbie to webos dev so go easy on me.
It might help to know what device(s) you're targeting. You've got a mix of a Mojo app and an Enyo app there, it looks like. Mojo is for the phones. If you're targeting the TouchPad, you should probably switch entirely to Enyo.
For the Mojo scroller to work in webOS you need to enable it as follows:
this.controller.setupWidget("myScroller",
this.attributes = {
},
this.model = {
scrollbars: true,
mode: "free"
});
You can read more about scrollers in Mojo here:
http://webos101.com/Scroller
However, I think you want an Enyo scroller so you get rid of the HTML in your app and use the method described above by XRay Enabler.
It is possible to use JavaScript functions to pull in content from a DIV in your HTML into an Enyo kind. Here's an example using jQuery:
this.$.myContent.setContent($("#someDiv").html());
Keep in mind you'll have to set allowHtml to true to allow HTML content.
First of all welcome to Enyo and webOS! Try to remember that Enyo is your framework that will create the elements of your HTML (the app). You generally do not manipulate it (HTML) directly.
As a simple example, you can create your content after the kind 'HelloWorld' has been rendered:
** your previous code **
{flex: 1, kind: "Scroller", components: [
//Insert your components here
{content: "", name:"myContent"}
]}
]},
{kind: "Toolbar", components: []}
],
create: function() {
this.inherited(arguments);
},
rendered: function() {
this.$.myContent.setContent("I can now add Content!");
}
});
Notice the added content container called myContent in the Scoller. Also, remove the previously created div's in your HTML file.
The content is then added in the rendered function.