使用 chrome 扩展连接 firebase 时出错（本地）

Question

我已尝试在互联网上找到的所有方法来在我的 chrome 扩展中启用 firebase，但似乎没有任何效果。我无法获取 firebase 对象。

我现在面临的错误：

错误 1：未捕获的 ReferenceError：firebase 未定义在 firebase.js:11

Image Reference Here!

manifest.js

这是manifest.js文件。

    {
        "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)

Answer 1

我考虑了您的实施，并找到了一种可以实现您想要的目标的快速方法。简而言之，您需要安装 webpack，它是一个模块捆绑器（这意味着它的主要目的是捆绑 JavaScript 文件以供在浏览器中使用）。如果你已经设置了 npm，你可以在你的项目中执行这个命令：

npm install webpack

如果你还没有设置npm，网上有很多教程（如果你不明白，尽管问我;）完成后，您可以继续设置 firebase。您将需要运行另一个命令：

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 扩展！

希望我能够回答您的问题！如果您需要任何帮助，请随时发表评论并提出问题。

祝你好运！

使用 chrome 扩展连接 firebase 时出错（本地）

Getting error while connecting firebase with chrome extension (locally)

firebase

google-chrome-extension