I have tried everything I could find on the internet to enable firebase in my chrome extension, but nothing seems to be working. I couldn't get the firebase objects.
The errors that I am facing right now:
Error 1: Uncaught ReferenceError: firebase is not defined at firebase.js:11
manifest.js
Here is the manifest.json file.
{
"version": "1.0.0",
"manifest_version": 2,
"name": "Chrome Proxy",
"permissions": [
"proxy",
"tabs",
"unlimitedStorage",
"storage",
"<all_urls>",
"webRequest",
"webRequestBlocking"
],
"browser_action": {
"default_popup": "home.html",
"default_icon": "logo.png"
},
"background": {
"scripts": ["background.js"]
},
"content_security_policy": "script-src 'self' https://www.gstatic.com/
https://*.firebaseio.com https://www.googleapis.com; object-src 'self'"
}
home.html
Here is the home.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="https://www.gstatic.com/firebasejs/9.6.7/firebase.js"></script>
<script type="module" src="https://www.gstatic.com/firebasejs/9.6.7/firebase-app.js"></script>
<script type="module" src="https://www.gstatic.com/firebasejs/9.6.7/firebase-database.js"></script>
<script type="module" src="firebase.js"></script>
<title>CPM Extension</title>
</head>
<body>
<p id="hasham">Hasham Here!</p>
</body>
</html>
firebase.js
Here is the firebase.js file.
const firebaseConfig = {
apiKey: "my_api_key",
authDomain: "my_auth_name",
databaseURL: "my_database_url",
projectId: "my_project_id",
storageBucket: "my_storage_bucket",
messagingSenderId: "my_messaginge_sender_id",
appId: "my_app_id"
}
firebase.initializeApp( firebaseConfig )
console.log(firebase)
CodePudding user response:
I thought about your implementation and I found a quick way you could achieve what you want. In short, you will need to install webpack, which is a module bundler (it means that its main purpose is to bundle JavaScript files for usage in a browser). If you have npm already set up, you can execute this command in your project:
npm install webpack
If you haven't set up npm yet, there are plenty of tutorials online (and if you don't understand, feel free to ask me ;) After you have done that you can proceed to set up firebase. You will need to run another command:
npm install firebase
Continuing the setup of webpack, you will need to create a webpack.config.js file and there set the entry and the output. Again, you can find plenty of tutorials online, but here's a quick example implementation:
webpack.config.js:
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
module.exports = {
mode: 'production',
entry: {
main: './src/main'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
],
},
],
},
devServer: {
contentBase: './dist',
overlay: true,
hot: true
},
plugins: [
new CopyWebpackPlugin({
patterns: [
{ from: 'manifest.json', to: 'manifest.json' },
],
}),
new CopyWebpackPlugin({
patterns: [
{ from: 'images', to: 'images' },
],
}),
new CopyWebpackPlugin({
patterns: [
{ from: 'popup.html', to: 'popup.html' },
],
}),
new webpack.HotModuleReplacementPlugin()
],
};
Once you've done that, in your entry file (the entry point), you can import firebase and set it up:
main.js
import { initializeApp } from 'firebase/app';
// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
//...
};
const app = initializeApp(firebaseConfig);
Next, you will set the output file as a source in your html popup (in this case it will be 'main.budle.js'). When you run npm start
, webpack will create another folder (the 'dist' folder). This folder is the chrome exstension with firebase set up!
I hope I was able to answer your question! If you need any help, feel free to comment and ask questions.
Best of luck!