Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

182
Views
How to import npm packages in Chrome Extension

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.

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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"
    ]
  }
]
about 4 years ago · Juan Pablo Isaza Report

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!