I am trying to build a chrome extension that uses firebase as a db in my content.js file but it doesn't work. I am using v3 manifest. But I am unable to import firebase.
I tried setting up firebase in my project using this resource. I also tried downloading the source code from firebase-app.js and firebase-database.js, and imported it using
const firebase = chrome.extension.getURL('./firebase-app.js');
but this file has imports from
https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js
this violates the content_security_policy and I get this error
Refused to load the script ‘https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js’ because it violates the following Content Security Policy directive: “script-src ‘self’ ‘wasm-unsafe-eval’“. Note that ‘script-src-elem’ was not explicitly set, so ‘script-src’ is used as a fallback.
I am aware of the external code restrictions.
Is there any workaround for this in vanilla JS implementation?
As the ECRs state, you cannot load these scripts from a CDN.
Instead you must install a JavaScript build pipeline (such as webpack or Rollup) to compile an application bundle of your extension's code.
Firebase has documentation on this process and link to relevant resources that are worth reviewing.
Related
I searched whole stackoverflow to fix it, but cant. So... I need to use NPM module in browser (index.html).
Getting error "require is not defined" if using
<script src="./script.js"></script>
in html file, and using const { WebcastPushConnection } = require('tiktok-livestream-chat-connector'); in script.js.
Tried to use browserify, and when i use outputed js script getting error "require.resolve is not a function"
Can anyone help?
tiktok-livestream-chat-connector is described, by its website, as:
A Node.js module to receive and decode livestream events like comments and gifts in realtime from TikTok LIVE by connecting to TikTok's internal WebCast push service.
At no point in its documentation does it mention compatibility with web browsers.
Browserify (and similar tools) can bundle up CommonJS modules into a single file so that they can run in environments which don't support CommonJS modules (e.g. browsers). They can't polyfill all the Node.js features that browsers don't support (like the ability to make raw socket network connections).
If a module needs to run on Node.js then you can't just move it to the browser.
You could write a program for Node.js that runs as a web service and operates as a bridge to whatever the module does. The the browser could connect to your web service with WebSockets or Ajax requests. The project links to an example of one.
I am using Angular 5 + Webpack for one of my projects. Now I want to load all assets with JS files (including lazy loaded .chunks.js files) from a CDN.
For CSS and images, I have changed the publicPath option of the webpack so I am able to load CSS and images from the CDN, but the problem is with JS files.
For JS file I have changed the <base href="{{CDN-PATH-HARE}}"> but it gives me this error
I also tried renaming the JS file using webpack but that trick also didn't work.
I just want to know whether I am going in a right direction or I should think it in a different way.
Thanks.
I imagine the "using CDN when performing tree-shaking" discussion could be a fairly involved one...
This answer assumes that the break happens only when switching to the CDN, and that your app is properly served otherwise. Are you sure your app is being served?
The history API is used by angular, but because the origin is different, it's being treated as a security issue.
Assuming external cache-able libraries in a CDN should be included in your bundling, you can try a couple options listed below. I would revisit that assumption first. The point of webpack is to treeshake and then bundle, so I would make sure you are convinced of the benefit of bundling files that are cached and bundled on CDN already.
If you are sure you want to take this approach, you can do a couple things. You can either use hashlocationstrategy on your angular router:
imports [
RouterModule.forRoot(routes, {useHash: true})
]
Or, you can fully host your app when building it, using node's http-server, and play with the host baseUrl in your app's index.html.
Finally, if none of that works for you, you could try using a htaccess file, or doing some manual routing, but I have found those approaches to be a little brittle.
There's a couple pre-existing questions on SO that handle this issue somewhat, but I thought the CDN wrinkle warranted a fresh response.
Angular 5 : Failed to execute 'replaceState' on 'History': A history state object with URL cannot be created in a document with origin 'null'
ng build failed to execute 'replaceState' on 'History': A history state object with URL cannot be created in a document with origin 'null' and URL
How to perform redirects in NodeJS like a .htaccess file?
Maybe a better answer would be to ask this question: If your libraries never change, and you have a version update of your app, why would you force your users to re-download your libraries?
I am going to be working on an angular project without internet access, so my links to the cdn will not function. I would like to save the angularjs library to a folder inside of my project. Here is what I have tried:
I went to the cdn link, copied all of the text, pasted it into a file, and saved that file as angular.min.js . I then commented out the script tag for the cdn in my index.html file, and put in a new script tag specifying the path to the new saved file. When I open my project, I get the error "Uncaught ReferenceError: angular is not defined."
Here are the relevant pieces of my project's file/folder structure:
project
|_core
| |_public
| |_app
| |_index.html
|_libraries
|_angular.min.js
And here is my script tag:
<script src="./../../../libraries/angular.min.js"></script>
And here is the link to the cdn from which I copied the text:
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js
Are you using a local webserver of any kind? Angular and many scripts need to be loaded from http and not file://. For this, you could use python's SimpleHTTPServer: python -m SimpleHTTPServer 8080 -- will open an http server on http://localhost:8080, open the url in your browser and you should be good to go. Also note that the order in which you load the scripts in your HTML is important, and Angular needs to be loaded before all modules of code that use it.
<script src="../../../libraries/angular.min.js"></script>
How about this ?
Have you just tried this?
<script src="/libraries/angular.min.js"></script>
Maybe your server start website (localhost:80) from the root of your project
You can use Grunt task to minify and concatenate all files. You can read the docs of GruntJS. Very useful.
http://gruntjs.com/sample-gruntfile
see the concatenate section.
if you do that manually you have check the sequence of lib files. Angularjs lib need to be on top.
There are chances of errors.
yes just to include a file you don't need Grunt
check in chrome inspect developer tool in network tab if your file angular.min.js loaded properly. If not you can change the path and try but if it is loading and still you are getting same error so please create jsfiddle or plunker of your file so that we can look it in detail.
I'm attempting to use URI.js with the Firefox Addon SDK.
I've include the URI.js file (built from https://medialize.github.io/URI.js/build.html) in my Addon SDK index.js file - but I keep getting the following error:
Module ./punycode is not found at resource://uw-cashback-wizard/punycode.js
As a workaround, I thought I might use a worker, but workers only allow async messaging, and I'm trying to use it as part of synchronous methods.
I'm attempting to build my first phonegap application using the phonegap build cloud compiler. In the instructions there it says to remove phonegap.js before uploading... Where is this mystery file? I downloaded the latest phonegap and nothing in the /Libs/ looks right. There seems to be no documentation on how to setup your root HTML page properly to be compiled with phonegap.
"Once you've included the necessary assets, remove the phonegap.js (cordova.js) as Build will automatically inject it during compile time." - https://build.phonegap.com/docs/preparing-your-app#what_do_i_upload
I'm under the impression that I just need to use the JS API for code completion and then let the cloud compiler do its work, but all the documentation revolves around installing an SDK for each platform. I don't want to use xCode or eclipse-- I just want to write javascript.
What is the bare minimum resources I need to include on my root HTML file?
What is the bare minimum resources I need to include on my root HTML
file?
You need just 2 files: index.html (may be the name "index.html" is configurable in the config.xml, I am not sure) and config.xml.
Here is a starter app: https://github.com/phonegap/phonegap-start, take a look in the www folder.