将扩展与webpack捆绑后,无法与chrome扩展的javascript文件通信

laik7k3q  于 2023-02-20  发布在  Go
关注(0)|答案(1)|浏览(100)

我尝试在我的chrome扩展上使用firebase进行身份验证,但我收到了关于以下内容的错误
未捕获的语法错误:不能在模块外部使用import语句
搜索后,我被告知,我将需要捆绑我的应用程序,以便能够使用导入语句
在安装webpack,配置和运行npm run build时,我的service_worker和内容脚本与我的popup.js文件失去了通信。发送到文件中的所有消息都不起作用。
这是我的webpack.config.js设置

const path = require('path');

module.exports = {
  // The entry point file described above
  entry:{
    background: './background.js',
    content: './index.js'
  },
  // The location of the build folder described above
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
  // Optional and for development only. This provides the ability to
  // map the built code back to the original source format when debugging.
  devtool: 'eval-source-map',
};

index.html链接到javascript文件

<script src="./dist/content.js"></script>

请问我做错了什么?这是我第一次既使用webpack又配置chrome扩展。
注意:我的index.html被声明为web_accessible_resource文件,并使用iframe注入到网页中。只是为了给这个问题提供更多的上下文。

6ie5vjzr

6ie5vjzr1#

这就是我解决问题的方法。
我将popup.jsbackground.js文件都添加到webpack.config.js的entry对象中,并将原始文件路径替换为已编译文件的路径。
webpack.config.js

module.exports = {
  //...
  entry: {
    background: './background.js',
    index: './index.js',
  },
  //...

manifest.json

//...
   "background": {
    "service_worker":"./dist/background.bundle.js" //path to webpack bundled service worker file
  },
  //...

index.html

<script src="./dist/index.bundle.js"></script> <!--path to bundled popup javascript file--->

相关问题