Addon - unable to add module in content_script for firefox addon - javascript

Below is the project structure of a addon I'm trying to develop.
.
├── sc_back.js
├── sc_cont.js
├── icons
│   ├── addon
│   │   ├── icon-48.png
│   │   └── icon-96.png
│   └── context
│   ├── d-16.png
│   ├── d-32.png
│   ├── e-16.png
│   └── e-32.png
├── manifest.json
├── modules
│   └── sc_de.js
└── popup
├── action.css
├── action.html
└── action.js
There is some JS code that is redundant between content script sc_cont.js and popup action script in popup/action.js so I decided to move that redundant part into a separate folder at modules/sc_de.js.
I added below lines at my content_script and at module script:
//sc_cont.js
import { xyz } from './modules/sc_de.js'
//modules/sc_de.js
export const xyz = {...}
I tried adding the modules script in manifest.json in the content_script array but it's not working. Haven't tried in web_accessible_resources as this is not supposed to be accessible from the DOM.
Problem is when I launch the addon debugger, it shows the following error:
SyntaxError: import declarations may only appear at top level of a module
SyntaxError: export declarations may only appear at top level of a module
How do I resolve these errors to make the addon work? Also, do I need to do anything special in case of popup/action.js as well?

Related

Assets path mismatch in Nuxt3 static generation

I develop my website using Nuxt3 and deploy it following the instructions here: https://v3.nuxtjs.org/getting-started/deployment#static-hosting
I successfully get dist and node server hosted web (running npx serve -o dist) also works well, But directly opening index.html in brower leads to a webpage rendered without any CSS and images.
I checked the generated html and found the assets path is like:
<link rel="modulepreload" href="/_nuxt/entry-1f8b74a8.mjs" as="script" crossorigin>
while my dist folder looks like:
dist
├── _nuxt
│   ├── entry-1f8b74a8.mjs
│   ├── entry.ff9830ad.css
│   ├── index-a3c0d3be.mjs
│   ├── index-e5b9c659.mjs
│   ├── index.072137e3.css
│   ├── lcdp-c28417d3.mjs
│   ├── manifest.json
│   ├── paper-b4b64fe8.mjs
│   └── paper.6897f003.css
├── imgs
│   ├── bg1.png
│   ├── bg2.png
│   └── other images...
└── index.html
I guess maybe the reason is that the assets path is wrong? What is the correct way to do the static website generation using nuxt3?
OP achieved to properly deploy the app on Vercel, it's better than Github Pages on every way anyway.

Spring boot does not serve assets in resources folder when started with IntelliJ

I am doing pretty much this tutorial. Basically you have a pom which controls two modules, the frontend module and the backend module.
Environment: IDE: Intellij, spring-boot, Vue.js
I initialized the frontent module using vue init webpack frontend. I added the pom to the backend module which copies the assets into the backend module asset/public folder. After mvn clean install all the content is in the ressources/public folder, but when I view the browsers sources it does not show any of them.
The resources folder looks like this:
└── resources
├── application.properties
└── public
├── index.html
└── static
├── css
│   ├── app.30790115300ab27614ce176899523b62.css
│   └── app.30790115300ab27614ce176899523b62.css.map
└── js
├── app.b22ce679862c47a75225.js
├── app.b22ce679862c47a75225.js.map
├── manifest.2ae2e69a05c33dfc65f8.js
├── manifest.2ae2e69a05c33dfc65f8.js.map
├── vendor.42fc6c515ccdfe89bd76.js
└── vendor.42fc6c515ccdfe89bd76.js.map
I just noticed that running java -jar backend/target/backend-0.0.1-SNAPSHOT.jar solves the problem. But when I start the application using intellij it does not work out.
Full tree (directories only):
├── fileconverter
│   ├── backend
│   │   ├── src
│   │   └── target
│   ├── frontend
│   │   ├── build
│   │   ├── config
│   │   ├── node
│   │   ├── node_modules
│   │   ├── src
│   │   ├── static
│   │   ├── target
│   │   └── test
│   └── target
│   ├── classes
│   └── test-classes
Okay, as I am having two modules IntelliJ used the classpath of the whole project instead of the backend module.
After changing the path in the configuration to: Use classpath of module: backend everything works fine.

How and when are the esm5 and esm2015 directories of a "ng build"-generated lib folder used?

In the folder generated by ng build simple-lib, I see a more complex structure than my other node modules. Instead of an index.js exporting and importing other members, I see a bundles, esm2015, esm5, and public_api.d.ts.
I see the compiled versions of simple-lib in both the esm5 and esm2015 folders. I'm wondering how the esm .js files are used and when esm2015 would be used instead of esm5. From what I understand, esm2015 allows for smaller bundles and tree-shaking, but I'm not sure when the choice is made about which module to use. I'm hoping to generate a lib that I can use in a node project and any help to understand if and how that would be possible would be appreciated. Thanks.
$ tree simple-lib/
simple-lib/
├── bundles
│   ├── simple-lib.umd.js
│   ├── simple-lib.umd.js.map
│   ├── simple-lib.umd.min.js
│   └── simple-lib.umd.min.js.map
├── esm2015
│   ├── lib
│   │   ├── simple-lib.component.js
│   │   ├── simple-lib.module.js
│   │   └── simple-lib.service.js
│   ├── public_api.js
│   └── simple-lib.js
├── esm5
│   ├── lib
│   │   ├── simple-lib.component.js
│   │   ├── simple-lib.module.js
│   │   └── simple-lib.service.js
│   ├── public_api.js
│   └── simple-lib.js
├── fesm2015
│   ├── simple-lib.js
│   └── simple-lib.js.map
├── fesm5
│   ├── simple-lib.js
│   └── simple-lib.js.map
├── lib
│   ├── simple-lib.component.d.ts
│   ├── simple-lib.module.d.ts
│   └── simple-lib.service.d.ts
├── package.json
├── public_api.d.ts
├── simple-lib.d.ts
└── simple-lib.metadata.json
While updating my angular version, I think I may have found the answer. The library that will be used is dependent on the browser requesting the application - The esm5 build will be used for older browsers that require more polyfills and the esm2015 libraries will be used for newer browsers that require fewer polyfills
"The CLI's build command now automatically creates a modern ES2015 build with minimal polyfills and a compatible ES5 build for older browsers, and loads the appropriate file based on the browser. You may opt-out of this change by setting your target back to es5 in your tsconfig.json. Learn more on angular.io."
From https://update.angular.io/#7.1:9.0
As per the "Angular Package Format" specs -
In today’s JavaScript landscape, developers will consume packages in
many different ways. For example, some may use SystemJS, others could
use Webpack. Still, others might consume packages in Node or maybe in
the browser as a UMD bundle or through global variable access.
Read more from this link - https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview

webpage deployed on heroku shows blank background unless F5 refresh the page

I am doing a group chat program using Python microframework flask, vanilla JavaScript and Flask-SocketIO. I already deployed it on heroku: https://chat-ya.herokuapp.com/.
However, the question is:
it works fine on local machine before I deployed it. But when I deployed it, open the website, the background image is
not showing, or
sometimes only part of it is showing, or
sometimes just flickers and becomes blank
I have tried to optimize the image's size, but still not working.
the data structure tree is:
static
│   ├── css
│   │   ├── index.css(main page css)
│   │   ├── channel.css(channel page css)
│   │   ├── bootstrap.min.cs
│   │   └── all.css
│   ├── images
│   │   ├── aircraft.jpeg
│   │   ├── ....
│   ├── js
│   │   ├── index.js(main page js)
│   │   ├── channel.js(channel page js)
│   │   ├── bootstrap.bundle.min.js
│   │   ├── jquery-3.3.1.slim.min.js
│   │   └── socket.io.js
│   ├── music
│      └── GrandmaSaid.mp3
└── templates
├── base.html
├── channel.html(channel page)
└── index.html(main page, extended from base.html)
Thanks in advance!!!
That's really an unfixable error - it has to do with the time between the browser loading the page and saying, Hey, can you get this image for me? and the server going I'll look for it - OK, found it, here you go! And of course, it'll be impacted if multiple people are on the page as well. So unless you find a faster web server, it's not really capable of loading faster. And you and Bootstrap may have some conflicting rules in CSS which mean that your image is partially cut off.
Ask me if you need any help with this!

Setting up Angular phonecat application on node

Im newbie to Angular and trying to setup angular phonecat application.
I have downloaded the code from here
https://docs.angularjs.org/tutorial/
and installed a nodejs.
Now, I'm not sure how to map the angular application to run with nodejs.
From other links, I see everyone run a webserver.js file but I don't see anything under the scripts directory.
scripts]$ tree .
.
├── private
│   ├── old
│   │   ├── format-json.sh
│   │   ├── goto_step.bat
│   │   ├── goto_step.sh
│   │   ├── README.md
│   │   ├── ScrapeData.js
│   │   └── snapshot.sh
│   ├── push-to-github.sh
│   ├── README.md
│   ├── retag.sh
│   ├── test-all.sh
│   └── update-gh-pages.sh
└── update-repo.sh
How can I run the application in nodejs.
If you look at the page you linked, you are supposed to run npm start in the main directory after installing NPM dependencies with npm install.
EDIT: After checking their package.json, you can actually just run npm start. It will also run dependency installation.

Categories