0

我有一个 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",
4

1 回答 1

1

虽然 Webpack 不允许我动态设置公共路径，但我通过使用下面的 stackoverflow 答案使 chrome 扩展 ID 更可预测来解决这个问题（顺便说一下，它具有其他不同的解决方法）。

如何更改 chrome 打包的应用程序 ID 或者为什么我们需要 manifest.json 中的 key 字段？

ID 源自您（或 Chrome 网上应用店）第一次将扩展打包到 .crx 文件中时创建的 .pem 文件。当您以“解压模式”加载扩展时，会以不可预知的方式自动生成一个 ID。正如文档所建议的那样，在开发过程中控制扩展 ID 的唯一方法是在清单文件中设置“key”字段。

[...有关获取源 URL 中的密钥的更多信息]

以及下面的谷歌支持页面。

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

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

转到您的用户数据目录。MacO 上的示例：~/Library/Application\ Support/Google/Chrome/Default/Extensions 列出已安装的应用和扩展，并将您在应用和扩展管理页面上的应用 ID 与此处的相同 ID 匹配。转到已安装的应用程序目录（这将是应用程序 ID 中的一个版本）。打开已安装的 manifest.json（pico 是打开文件的快捷方式）。复制已安装 manifest.json 中的“密钥”并将其粘贴到应用的源清单文件中。

于 2016-11-10T13:25:42.370 回答