In chrome extension, how to use content script to inject a Vue page

Recently I was developing chrome extension with vuejs and has the same requirement that need to inject whole Vue app to specific web page i.e. google.com, but sadly vue-router doesn't work.

I used this boilerplate to get it working easily with least changes.

Once you created Vue project with this boilerplate then you need to update src/popup/popup.js to inject vue app in web page.

...const div = document.createElement("div")document.body.insertBefore(div, document.body.firstChild);new Vue({   el: div,   render: h => { return h(App); }});

Add vue app as content scripts in manifest.json instead of browser_action or page_action.

"content_scripts": [{    "matches": ["*://*.google.com/*"],    "js": [        "popup/popup.js"    ],    "css": ["/popup/popup.css"]}]

Here vue app will be injected on google.com only. If you want to inject in all web pages then remove matches from content_scripts

P.S.

Managed to vue router working with mode abstract and call router.replace("/") after new Vue({ ..., router })

The vue-cli-plugin-browser-extension does not include a hash in the filename of content scripts, so no need to worry.

To add content scripts, configure the plugin's componentOptions.contentScripts, as shown in this example (generated from vue add browser-extension from the root of a Vue CLI project):

// vue.config.jsmodule.exports = {  //...  pluginOptions: {    browserExtension: {      componentOptions: {        background: {          entry: 'src/background.js'        },        contentScripts: {          entries: {            'content-script': [              'src/content-scripts/content-script.js'            ]          }        }      }    }  }}