Question

我有一个chrome扩展程序，发布了不稳定，稳定和夜间版本，我需要能够动态设置扩展资源的公共路径。我一直试图以多种方式添加它，通过js条目直接进入webpack.config.js，从我的ts条目导入，直接放入ts文件..

我只是想将__webpack_public_path__全局更改为我不能指望在构建之间始终相同的东西。

我试过这样的话：

__webpack_public_path__ = chrome.extension.getURL("");
var __webpack_public_path__ = chrome.extension.getURL("");
let __webpack_public_path__ = chrome.extension.getURL("");
window.__webpack_public_path__ = chrome.extension.getURL("");

有人知道自Webpack 2.x以来这是否有所改变？

更新！

这是我的webpack.config.development.js

var path = require('path');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var WebpackNotifierPlugin = require('webpack-notifier');
var RawLoader = require('raw-loader');
var CssLoader = require('css-loader');
var TextLoader = require('text-loader');
var VendorChunkPlugin = require('webpack-vendor-chunk-plugin');
var webpack = require('webpack');
var ngtools = require('@ngtools/webpack');
var exec = require('child_process').exec;

var webpack_devtool = "source-map";
var webpack_name = "development";
var webpack_build_title = "Webpack Development Build";
var webpack_app_dir = "app";
var webpack_build_dir = "build";
var webpack_public_path = ""

module.exports = [
    {
        name: webpack_name,
        devtool: webpack_devtool,
        context: path.join(__dirname, webpack_app_dir),
        entry: {
            "webpack-setups": './webpack-setups.js',
            "fa": "font-awesome-webpack2!./font-awesome.config.js",
            "content_script": './hp.my.content_script.com_console.ts',
            "content_script2": './hp.my.content_script2.ts',
            "popup": './popup.ts',
        },
        output: {
            path: path.join(__dirname, webpack_build_dir),
            filename: '[name].bundle.js',
            publicPath: webpack_public_path
        },
        resolve: {
            modules: [
                path.resolve(__dirname, "app"),
                "node_modules",
                "modded_node_modules"
            ],
            extensions: [".webpack.js", ".web.js", ".js", ".ts"]
        },
        plugins: [
            function () {
                this.plugin('watch-run', function (watching, callback) {
                    console.log('Watch triggered! Begin compile at ' + new Date());
                    callback();
                });
                this.plugin('done', function () {
                    console.log('Finished compile at ' + new Date());
                });
            },
            new WebpackNotifierPlugin({ title: webpack_build_title })
        ],
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    use: ["ts-loader"]
                },
                { test: /\.css$/, use: ["style", "css"] },
                { test: /\.jpe?g$|\.gif$|\.png$/, use: "url" },
                { test: /\.html/, use: 'file?name=[path][name].[ext]' },
                { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
                { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
            ]
        }
    }
];

webpack-setups.js的内容

__webpack_public_path__ = chrome.extension.getURL("");

package.json片段：

"webpack": "^2.1.0-beta.25",
"webpack-manifest-plugin": "^1.0.1",
"webpack-notifier": "^1.4.1",
"webpack-shell-plugin": "^0.4.3",
"webpack-vendor-chunk-plugin": "^1.0.0",

Answer 1

虽然Webpack没有让我动态设置公共路径，但我通过使用下面的stackoverflow答案（通过其他不同的方式来解决此问题）使得chrome扩展ID更具可预测性来解决这个问题。

How to change chrome packaged app id Or Why do we need key field in the manifest.json?

ID源自第一次创建的.pem文件   您（或Chrome网上应用店）将扩展名打包在.crx文件中。   在“解压缩模式”下加载扩展时，会自动生成ID   以不可预测的方式产生。控制的唯一方法   开发期间的扩展ID是通过设置中的“key”字段   清单文件，如文档所示。

[...有关在源网址中获取密钥的详细信息]

以下google support page。

将密钥复制到您的清单   当您在申请中注册申请时   Google OAuth控制台，您将提供您的应用程序ID   在令牌请求期间检查。因此，拥有一个很重要   开发过程中一致的应用程序ID。

要使应用程序ID保持不变，您需要复制密钥   将manifest.json安装到源清单中。这不是最多的   优雅的任务，但这是怎么回事：

转到您的用户数据目录。 MacOs上的示例：   〜/ Library / Application \ Support / Google / Chrome / Default / Extensions List   已安装的应用和扩展程序，并在应用上匹配您的应用ID   和扩展管理页面到这里相同的ID。去吧   已安装的应用程序目录（这将是应用程序ID中的版本）。   打开已安装的manifest.json（pico是一种快速打开的方法   文件）。复制已安装的manifest.json中的“密钥”并将其粘贴到   你的应用程序的源清单文件。

Webpack 2.x，__ webpack_public_path__仍然可以工作吗？

更新！

1 个答案: