I'm trying to build a chrome extension using React and I managed to get my manifest.json set up as such:
{
"short_name": "GitMap",
"name": "GitMap",
"manifest_version": 2,
"browser_action": {
"default_popup": "index.html",
"default_title": "GitMap"
},
"permissions": [
"tabs"
],
"version": "1.0"
}
. I want to access the url of the currently active tab using chrome.tabs.query({ "currentWindow":true}, function(tab) { blahblahblah}
within my React application's app.js file, but i'm receiving this error:
TypeError: Cannot read property 'query' of undefined.
How do i access the 'chrome' method from within a react file? Thank you
try this solution
chrome.tabs.getCurrent(function(tab){console.log(tab.url);});
Related
I am using Firebase for the first time and I deployed a react app I know to be working and have hosted on github pages. I followed the instructions provided by Firebase docs and deployed the app to their website. On loading the website I am greeted with a blank page.
the link: https://monsterpwa.web.app/
the firebase.json file:
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
The previous posts on here are all bout the public sections being changed to build. Other then that I could not find anyone else with a similar question.
The console logs and error that there is an unexpected token '<' in line one column 1, but I also cannot see that.
The manifest file:
{
"short_name": "Monster App",
"name": "Monster App D&D Spells and Items",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "/public/media/800x800.png",
"type": "image/png",
"sizes": "800x800"
}
],
"start_url": "./index.html",
"display": "standalone",
"background_color": "#2d4059;",
"theme_color": "#2d4059",
"orientation": "portrait-primary"
}
build
Build
--> Media -- > *empty*
--> static -- > css / js --> each contains two files. main.7bf83f0f & the map version & main.3267ab84 and the map version.
asset-manifest.json
favicon.ico
index.html
manifest.json
service-worker.js
worker.js
Kind regards,
Snow
The issue is that you've configured your app to look for assets in a /MonsterPWA directory but that doesn't appear to exist.
For example, your index.html file has
<script type="text/javascript" src="/MonsterPWA/static/js/main.3267ab84.js"></script>
but the file is actually available at /static/js/main.3267ab84.js.
Your rewrite rule is catching all non-existent file requests and returning index.html, hence the warnings about <.
Check your homepage configuration in package.json and / or your PUBLIC_URL environment variable.
If you check the JavaScript console of your browser it shows there's a problem loading the CSS.
Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css".
Uncaught SyntaxError: Unexpected token '<'
From looking at the Network tab, we can see that it is loading this URL https://monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css, but that is returning HTML (due to your rewrite rule).
Make sure that your CSS is generated to build/MonsterPWA/static/css/main.7bf83f0f.css, since that's where Firebase Hosting looks for it.
Edit: a quick check shows that the CSS actually exists at https://monsterpwa.web.app/static/css/main.7bf83f0f.css so at build/static/css/main.7bf83f0f.css.
Do the following:
run the command: npm run build
check firebase.json file to ensure it says "public":"build".. if not make the change
run the command: firebase deploy
Go grab a coffee!
I am using react with loopback. I wanted to integrate react code in loopback.
if i do these 3 steps
1)middleware.json - put this
"files": {
"loopback#static": {
"params":"$!../client"
}
},`
2)root.js
router.get('/');
3)front end code
"build": "react-scripts build && cp -r build/* ../client/",
That didopen my react site on localhost:3000 .Now issue is when i do this
i cant access my loopback on :3000/explorer
So my first question is in this scenario, how to access explorer.
But then i rolled it back , because i wanted to use loopback explorer again.
So, i deleted all these added code and explorer came back
but when i added it again
Now, i dont see my react code
I can still see explorer at http://localhost:3000/explorer/
if i go to http://localhost:3000/apphome
i see 404 error
Right now, my middleware.json file for loopback is
{
"initial:before": {
"loopback#favicon": {}
},
"initial": {
"compression": {},
"cors": {
"params": {
"origin": true,
"credentials": true,
"maxAge": 86400
}
},
"helmet#xssFilter": {},
"helmet#frameguard": {
"params": [
"deny"
]
},
"helmet#hsts": {
"params": {
"maxAge": 0,
"includeSubdomains": true
}
},
"helmet#hidePoweredBy": {},
"helmet#ieNoOpen": {},
"helmet#noSniff": {},
"helmet#noCache": {
"enabled": false
}
},
"session": {},
"auth": {},
"parse": {
"body-parser#json": {},
"body-parser#urlencoded": {
"params": {
"extended": true
}
}
},
"routes": {
"loopback#rest": {
"paths": [
"${restApiRoot}"
]
}
},
"files": {
"loopback#static": {
"params":"$!../client"
}
},
"final": {
"loopback#urlNotFound": {},
"./LoopbackUrlNotFoundCatch.js": {}
},
"final:after": {
"strong-error-handler": {}
}
}
root.js file
'use strict';
//router.get('/', server.loopback.status());
module.exports = function(server) {
// Install a `/` route that returns server status
var router = server.loopback.Router();
router.get('/');
server.use(router);
};
-edit
I made some changes. Now, i have react components showing, I can also see data when i use api routes. But, explorer is still missing.
middleware.json
"files": {
"loopback#static": [
{
"name": "publicPath",
"paths": ["/"],
"params": "$!../client"
},
{
"name": "reactRouter",
"paths": ["*"],
"params": "$!../client/index.html",
"optional":true
}
]
},
I have also changed named of root.js to root_something.js . In documentation, its written, no need of root.js
First of all you Should be create react app in an other director like
Root ->
|-- client // emply
|-- clint_src // react app
and getting build react app and copy build files to client
now you should be remove server.loopback.status() in "server/boot/root.js" file
Example:
router.get('/', server.loopback.status());
To :
module.exports = function(server) {
// Install a `/` route that returns server status
var router = server.loopback.Router();
router.get('/');
server.use(router);
};
after that you need say to loopback middleware which file should be load in your path
go to middlware /server/middleware.json and replace blow code to "files": {}
"files": {
"loopback#static": [
{
"paths": ["/"],
"params": "$!../client"
},
{
"paths": ["*"],
"params": "$!../client"
}
]
},
on "paths": ["*"], all route will be open react file exeption the "/api" and "explorer" so you should be handle page notfound inside react app
Hope This was help full
Good Luck
I suspect React's default service worker intercepts and tries to cache /explorer. It skips urls prefixed with __ so this might fix the need to clear browser:
In component-config.json:
{ "loopback-component-explorer": {
"mountPath": "/__explorer" }}
Then access explorer at /__explorer.
As the instructions for adding a GUI to a loopback application state, you need to remove the root.js '/' route completely, by either renaming the root.js file to something without a .js extension, or deleting the file altogether.
$ rm root.js
### or, you can do this
$ mv root.js root.js.old
In the loopback 3 server configuration, the client folder has to be setup as a middleware route in middleware.json, like so:
"files": {
"loopback#static": {
"params": "$!../client"
}
},
Now, your client application is served from the /client folder, and by default the static files are served with Express -- so, it will look for index.html when you hit localhost:3000/
Structure of my Application:
In my app.json file I did following configuration for pointing to index.jsp file
"indexHtmlPath": "../../iris_app.war/WEB-INF/views/jsp/app/index.jsp",
"output": {
"base": "${workspace.build.dir}/${build.environment}/${app.name}",
"page": {
"path": "index.jsp",
"enable": true
},
"manifest": "${build.id}.json",
"js": "${build.id}/app.js",
"appCache": {
"enable": false
},
"resources": {
"path": "${build.id}/resources",
"shared": "resources"
}
},
When I refresh my app using sencha app refresh it updates classic.json file
With following paths
{"paths":
{
"Dimension":"../../../../../iris_s.war/regshoapp/app/view/components/popups/SelectDimensionsWindow.js",
"Ext":"../../../../../iris_s.war/ext/classic/classic/src",
"Ext.AbstractManager":"../../../../../iris_s.war/ext/packages/core/src/AbstractManager.js",
"Ext.Ajax":"../../../../../iris_s.war/ext/packages/core/src/Ajax.js"
….etc.
When I deployed this application on server and run on browser then I use this
url
localhost:7001/iris_ops_app/
When I run application on browser it throws file not found error on console for each Ext File which is mentioned in “classic.json” file but these files exist under “http://localhost:7001/iris_ops_app/regshoapp” path.
Please let me know how can I resolve this path issue on browser. Actually “iris_s.war” should be replaced by “iris_ops_s/regshoapp” in “classic.json” file only then it will resolve all paths.
I am using sencha cmd 6 and trying to build native app with help of -
https://docs.sencha.com/cmd/6.x/cordova_phonegap.html
I have generated Ext 6+ universal application using following command:
sencha -sdk /path/to/Framework generate app MyApp /path/to/MyApp
Then I have added following code in app.json -
"builds": {
"classic": {
"toolkit": "classic",
"theme": "theme-triton",
"sass": {
// "save": "classic/sass/save.json"
}
},
"native": {
"toolkit": "modern",
"theme": "theme-cupertino",
"packager": "phonegap",
"phonegap": {
"config": {
"platforms": "ios android",
"id": "com.mydomain.MyApp"
}
}
}
}
But after running sencha app build android, I am getting following exception -
BUILD FAILED
java.lang.NullPointerException
at org.a
pache.tools.ant.helper.SingleCheckExecutor.executeTargets(SingleCheckExecutor.java:38)
Also as per suggestion in Developing a PhoneGap application from sencha doc, i have modified app.json with following code -
"builds": {
"native": {
"packager": "phonegap",
"phonegap" : {
"config": {
"platforms": "ios android",
"id": "com.mydomain.MyApp"
}
}
}
}
But after this, following exception is coming on my console -
Failed to resolve dependency Ext.app.Application for file MyApp.Application
BUILD FAILED
com.sencha.exceptions.ExNotFound: Unknown definition for dependency : Ext.app.Application
I know this is a late answer, but it might help someone else landing on this page.
To resolve the dependency, we need to include the toolkit and theme in our build profile:
"native": {
"toolkit": "modern",
"theme": "theme-cupertino",
"packager": "cordova",
"cordova": {
"config": {
"platforms": "android",
"id": "com.mydomain.NewApp"
}
}
}
In context, the build profile should look like:
Please find the answer to this question on following link -
https://www.sencha.com/forum/showthread.php?304530-Unable-to-create-Native-app-using-command-sencha-app-build-native
I want to use socket.io in my sencha touch application
I added socket.io in my app.json js array :
"js": [
{
"path": "touch/sencha-touch.js",
"x-bootstrap": true
},
{
"path": "bootstrap.js",
"x-bootstrap": true
},
{
"path": "lib/socket.io.js"
},
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
}
here is where I want to create var socket :
var socket = io.connect('http://localhost:3000');
when I open index.html in browser I get this error :
ReferenceError: Can't find variable: io
how can I fix my application?