我已经尝试了在互联网上找到的一切来在我的chrome扩展中启用firebase，但似乎什么都不起作用。我找不到燃烧弹。
我现在面临的错误：
错误1:未捕获引用错误：firebase未在firebase中定义。js:11
此处为图片参考！
manifest.js
这是manifest.json文件。
{
"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
这是home.html文件。
<!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
这是firebase.js文件。
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)我考虑了您的实现，发现了一种快速实现您想要的方法。简而言之，您需要安装webpack，这是一个模块捆绑器(这意味着它的主要目的是捆绑JavaScript文件以在浏览器中使用(。如果你已经设置了npm，你可以在你的项目中执行这个命令：
npm install webpack
如果你还没有建立npm，网上有很多教程(如果你不明白，可以问我；(完成后，你可以继续设置燃烧基地。您需要运行另一个命令：
npm install firebase
继续设置webpack，您需要创建一个webpack.config.js文件，然后设置条目和输出。同样，你可以在网上找到很多教程，但这里有一个快速的实现示例：
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()
],
};
一旦你完成了，在你的入口文件(入口点(中，你可以导入firebase并设置它：
main.js
import { initializeApp } from 'firebase/app';
// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
//...
};
const app = initializeApp(firebaseConfig);
接下来，您将在html弹出窗口中将输出文件设置为源文件(在这种情况下，它将是"main.budle.js"(。当您运行npm start时，webpack将创建另一个文件夹("dist"文件夹(。这个文件夹是用firebase设置的chrome exstance！
我希望我能回答你的问题！如果您需要任何帮助，请随时发表意见并提出问题。
祝你好运！