How to import npm packages in Chrome Extension

Question

I am building an Chrome Extension which uses a GraphModel loaded from tensorflowjs. However, I will need to use the tensorflowjs package to import my model using the function tf.loadGraphModel. Is there a way to import the packages to my chrome extension so that I can load my model? Thank you.

Answer 1

first of all run npm init so you will have package.json file in your folder and then install the package you need (npm i [yourPackage])

then - you need to add the path to the package to manifest.json for example if you are using content_scripts - you can add it like this:

"content_scripts": [
{
  "matches": ["https://*/*"],
  "js": [
    "node_modules/axios/dist/axios.js",
    "content-script.js"
    ]
  }
]

Answer 2

You could use 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

After you have done that you can proceed to set up your npm package. You will need to run the right npm command.

npm install ...

Continuing the setup of webpack, you will need to create a webpack.config.js file and there set the entry and the output. 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 use the tensorflowjs functions.