I'm developing a Firefox Add-on, i'm failing to send request from popup script. it is showing some error
Error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource
In chrome extension working fine.
Popup script
$.ajax({
url: 'http://localhost/api/user/66f041e16a60928b05a7e228a89c3799/emailtemplate/c60d870eaad6a3946ab3e8734466e532',
type: 'GET',
dataType: 'json',
headers: { 'accessToken': 'Krc7YPoZPaYiy37O', 'appID': '28fdd9c013e37bca7dd875b10817b694', 'appSecret': '15798907115476fdf1de7a8' },
success: function(eventSettingsResponse) {
buildTemplate(eventDetailsResponse, eventSettingsResponse);
console.log('This is content script testing...', eventDetailsResponse);
},
error: function() { }
//beforeSend: setHeader
});
Package.json
{
"title": "First",
"name": "test",
"version": "0.0.1",
"description": "Just for testing",
"main": "index.js",
"author": "Bharath",
"engines": {
"firefox": ">=38.0a1",
"fennec": ">=38.0a1"
},
"permissions": {
"cross-domain-content": ["http://localhost/*"]
},
"license": "MIT"
}
Main.js
pageMod.PageMod({
include: ["https://mail.google.com/*"],
contentScriptFile: data.url("js/content.js"),
contentScriptWhen: 'end',
onAttach: function(worker) {
worker.port.emit("init", urls);
worker.port.on("showPopup", function() {
console.log('port received');
windows.open(data.url('popup/popup.html'), {
name: 'jetpack window',
features: {
width: 500,
height: 500,
popup: false
}
});
});
worker.port.on("returnHtml", function() {
console.log('Html returnde.');
});
}
});
I read here that I could add the following to package.json
"permissions": {
"cross-domain-content": ["https://data.com"]
}
Related
I've been trying to make a Firefox extension. I've had success with doing stuff after a user interaction (like a browser action). But I want my extension to do something without user interaction. But no matter what I do, I can't get anything to happen on page load. Here is my super reduced code:
manifest.json
{
"name": "Test",
"version": "0.1",
"manifest_version": 2,
"background": {
"scripts": ["test.js"]
}
}
test.js
document.addEventListener("DOMContentLoaded", init);
function init() {
document.body.innerHTML = "Hello world!";
}
What am I doing wrong here? It works in the toolbox, just not anywhere else!
I've also tried adding host permissons like this:
"permissions": [
"*://*.facebook.com/*"
],
Try this:
manifest.json
{
"name": "Test",
"version": "0.1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"permissions": ["webNavigation", "*://*.facebook.com/*"]
}
background.js
browser.webNavigation.onDOMContentLoaded.addListener(handleOnDOMContentLoaded, {
url: [{ hostEquals: 'www.facebook.com' }],
});
function handleOnDOMContentLoaded({ tabId }) {
browser.tabs.executeScript(tabId, { file: 'test.js' });
}
test.js
document.body.innerHTML = 'Hello world!';
I try to fill a treelist with remote data via a ajax proxy but the treelist shows only the first level and try to reload the sub levels even though the json response contain a complete tree structure. Fiddle link: https://fiddle.sencha.com/#view/editor&fiddle/33u9
When i try to expand the node 'SUB a' (or set the expanded property to true) the store trys to reload the node.
Why is the tree structure from the json response not honored?
Thanks in Advance.
The backend response looks like:
{
"data": {
"root": [
{
"leaf": true,
"text": "Server"
},
{
"leaf": true,
"text": "Storage"
},
{
"text": "SUB a"
"children": [
{
"leaf": true,
"text": "Modul A - 1"
},
{
"leaf": true,
"text": "Modul A - 2"
}
],
},
{
"leaf": true,
"text": "Modul B"
}
]
},
"success": true
}
The used reader config is
reader: {
type: 'json',
rootProperty: 'data.root',
successProperty: 'data.success',
},
After playing around i use the following workaround:
getNavigation: function() {
var me = this,
tree = me.getView().down('navigationtree'),
store = tree.getStore(),
node = store.getRoot();
Ext.Ajax.request({
url: '/getnav',
method: 'POST',
success: function(response) {
var obj = Ext.decode(response.responseText),
childs = obj.data.root;
tree.suspendEvents();
node.removeAll();
childs.forEach(function(item) {
node.appendChild(item);
});
tree.resumeEvents();
},
failure: function(response) {
//debugger;
console.log('server-side failure with status code ' + response.status);
}
}).then(function() {
//debugger;
}
);
}
The funny things is that only the first level of the tree has to be added all following sub-levels are added automaticaly.
I am developing a project with nuxt. I installed Service Worker to this project using this package. The nuxt.config.js file is like this:
export default {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: 'my_project',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1'},
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
'~/static/css/base.css',
'~/static/css/hooper.css',
'~/static/css/font-awesome/css/all.min.css',
],
/*
** Plugins to load before mounting the App
*/
plugins: [
{ src: '~plugins/ga.js', ssr: false }
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/axios',
// Doc: https://bootstrap-vue.js.org/docs/
'bootstrap-vue/nuxt',
'#nuxtjs/pwa',
'#nuxtjs/device',
],
manifest:{
"short_name": "my_project",
"name": "my_project",
"icons": [
{
"src": "/static/icon.png",
"type": "image/png",
},
],
"start_url": "/",
"background_color": "white",
"display": "standalone",
"scope": "/",
"theme_color": "white"
},
workbox:{
},
/*
** Axios module configuration
*/
axios: {
// See https://github.com/nuxt-community/axios-module#options
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
}
},
hooks:{
// This hook is called before generatic static html files for SPA mode
'generate:page': (page) => {
if(page.path.includes('/amp/')){
page.html = modify_html(page.html)
}
},
// This hook is called before rendering the html to the browser
'render:route': (url, page, { req, res }) => {
if(url.includes('/amp/')){
page.html = modify_html(page.html)
}
}
}
}
But Service Worker is so slow. for example:
In this example normal query to the server takes 1.43 seconds and Service Worker query takes 1.37 seconds. How can i make Service Worker faster?
I have a simple website where I'm trying to Add To Homescreen function to the website. I'm using Visual Studio to code then I host it in Azure.
For some reason, it keep giving me this Failures: Manifest start_url is not cached by a Service Worker. every time I audit my website using Lighthouse.
I've make sure that all my page is cache by the service worker.
I'm not sure if it's my start_url or my service-workerproblem. Below is my code.
manifest.json
{
"short_name": "MY EXPERTS",
"name": "MYEXPERT",
"icons": [
{
"src": "Images/petronas_logo_192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "Images/petronas_logo_192.png",
"type": "image/png",
"sizes": "512x512"
}
],
"background_color": "#FFFFFF",
"theme_color": "#67BCFF",
"display": "standalone",
"start_url": "/Home/Index"
}
AddServiceWorker.js
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').
then(function (registration) {
// Registration was successful``
console.log('ServiceWorker registration successful with scope: ',
registration.scope);
}).catch(function (err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
}
service-worker.json
self.addEventListener('install', e => {
e.waitUntil(
caches.open('airhorner').then(cache => {
return cache.addAll([
'/',
'/?utm_source=homescreen',
'/Home/About',
'/Home/Index',
'/Home/Contact'
])
.then(() => self.skipWaiting());
})
)
});
self.addEventListener('activate', event => {
event.waitUntil(self.clients.claim());
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
This is my jquery code
$('.typeahead', this).autocomplete({
source: function(request, response) {
$.ajax({
url: 'includes/stations.json',
dataType: 'json',
data: request,
success: function(data) {
response($.map(data, function(item, i) {
return {
label: item.name,
value: item.code
}
}));
},
});
},
minLength: 3
});
My Json File is
[
{
"code": "9BP3",
"name": "9Bp No3"
},
{
"code": "AA",
"name": "Ataria"
},{
"code": "BILA",
"name": "Bheslana"
},
{
"code": "BILD",
"name": "Bildi"
},{
"code": "HRI",
"name": "Hardoi"
},
{
"code": "HRM",
"name": "Hadmadiya"
}
]
When i typing any three letter its returns whole json file values
q: request.term this is the string for filter returned values from stations.json. You must pass variable like this to filter results. stations.json must be dynamically generated file like php with json header. q is $_GET parameter and must be parsed. Try to change the code like this:
$.ajax({
url: "includes/stations.json",
dataType: "json",
data: {
q: request.term // here is the string for filter returned values from stations.json. You must pass variable like this to filter results. stations.json must be dynamically generated file like php with json header. q is $_GET parameter and must be parsed.
},
success: function(data) {
response(
$.map(data, function(item, i) {
return {
label: item.name,
value: item.code
}
})
);
}
});
},
minLength: 3,