Question

我正在编写一个Chrome扩展程序，该程序从队列中获取URL，在新窗口中打开它，运行内容脚本，然后重复。为了简化开发，我已经开始将其迁移到Webpack和Typescript的任务，但是我遇到了一个问题，即在编译所有内容后，内容脚本无法加载。

此扩展程序不在Webpack和Typescript中运行时可以正常工作。将预先存在的代码与样板集成后，除内容脚本之外的所有内容都可以正常工作。

src / content_script.ts

import extactor from './scripts/extractor';

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.extractData) {
    console.log("received data extraction request", request);
    extactor().then(data => {
      sendResponse(data);
    });
    return true;
  }
});

webpack / webpack.common.js

  context: path.join(__dirname, "../"),
  entry: {
    popup: path.join(__dirname, srcDir + "popup.ts"),
    background_script: path.join(__dirname, srcDir + "background_script.ts"),
    content_script: path.join(__dirname, srcDir + "content_script.ts")
  },
  output: {
    path: path.join(__dirname, "../dist/js"),
    filename: "[name].js"
  },
  optimization: {
    splitChunks: {
      name: "vendor",
      chunks: "initial"
    }
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        options: {
          transpileOnly: true
        },
        exclude: /node_modules/
      }
    ]
  }
};

和manifest.json

{
    "manifest_version": 2,
    "permissions": ["<all_urls>", "tabs", "notifications", "storage", "downloads"],
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
    "background": {
        "scripts": [
            "js/background_script.js"
        ]
    },
    "content_scripts": [
        {
            "matches": ["*://*/*"],
            "js": [
                "js/content_script.js"
            ]
        }
    ]
}

在非typescript / webpack分支中，扩展正常运行，尝试运行已转码的代码将导致popup.js和后台脚本正常运行，但是由于content_script.js未运行，因此后台页面返回

Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

为什么在编译后不加载内容脚本？

0 个答案: