将 firebase 与 chrome 扩展连接时出现错误（本地）

发布于 2025-01-10 02:47:04 字数 2551 浏览 1 评论 0原文

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

我现在面临的错误：

Error 1: Uncaught ReferenceError: firebase is not Define at 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)

原文

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

Image Reference Here!

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)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

这个俗人 2025-01-17 02:47:04

我考虑了您的实施，并找到了一种可以实现您想要的目标的快速方法。简而言之，您需要安装 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 扩展！

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

祝你好运！

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!

回复收藏 0 原文

~没有更多了~