Content Script fails to load

[ghost]

Describe the bug Boilerplate gives an option to support a content script, but it does not load by the background.

To Reproduce Simply use the plugin with a fresh template

Expected behavior Console should print the content output.

vue.config.js:

module.exports = {
  pages: {
    popup: {
      template: 'public/browser-extension.html',
      entry: './src/popup/main.js',
      title: 'Popup'
    },
    options: {
      template: 'public/browser-extension.html',
      entry: './src/options/main.js',
      title: 'Options'
    },
    devtools: {
      template: 'public/browser-extension.html',
      entry: './src/devtools/main.js',
      title: 'Devtools'
    }
  },
  pluginOptions: {
    browserExtension: {
      componentOptions: {
        background: {
          entry: 'src/background.js'
        },
        contentScripts: {
          entries: {
            'content-script': [
              'src/content-scripts/content-script.js'
            ]
          }
        }
      }
    }
  }
}

Error from background script message: "Failed to load file: "content-script.js". "

[ghost]

Looking at the dist directory I noticed content-script.js is never created.. as a workaround im manually inserting one..

[jatanassian]

Can you share what's on your src/manifest.json file?

[ghost]

{
  "manifest_version": 2,
  "name": "__MSG_extName__",
  "homepage_url": "http://localhost:8080/",
  "description": "A Vue Browser Extension",
  "default_locale": "en",
  "permissions": [
    "<all_urls>",
    "*://*/*"
  ],
  "icons": {
    "16": "icons/16.png",
    "48": "icons/48.png",
    "128": "icons/128.png"
  },
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": false
  },
  "devtools_page": "devtools.html",
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "__MSG_extName__",
    "default_icon": {
      "19": "icons/19.png",
      "38": "icons/38.png"
    }
  },
  "options_ui": {
    "page": "options.html",
    "browser_style": true
  }
}

[jatanassian]

I think you need to add content script in your manifest.json, the file should look like this:

  "manifest_version": 2,
  "name": "__MSG_extName__",
  "homepage_url": "http://localhost:8080/",
  "description": "A Vue Browser Extension",
  "default_locale": "en",
  "permissions": [
    "<all_urls>",
    "*://*/*"
  ],
  "icons": {
    "16": "icons/16.png",
    "48": "icons/48.png",
    "128": "icons/128.png"
  },
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": false
  },
  "content_scripts": [
    {
      "js": ["js/content-script.js"]
    }
  ],
  "devtools_page": "devtools.html",
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "__MSG_extName__",
    "default_icon": {
      "19": "icons/19.png",
      "38": "icons/38.png"
    }
  },
  "options_ui": {
    "page": "options.html",
    "browser_style": true
  }
}

Then in the dist directory you should have a js folder with your content script inside.

[trgkyle]

config include content-scripts is needed, beside cause build to compress to dist folder need be support, does I change the content-scripts file after that will be reloaded?, currently I config in mainifest.json it same work but hot reload is not, my content-scripts need include jquery how do I do that

[trgkyle]

![Uploading Screen Shot 2020-09-21 at 17.33.05.png…]()

[trgkyle]