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

Question

I'm trying to implement a JSON viewer chrome extension. I already have the Viewer implemented with Vue (http://treedoc.org). Now the problem is how can I can inject the Vue page with Chrome extension content script.

I found this post is very helpful to inject normal javascript file in the extension. But this is with a known javascript file name.

I found this post and this vue-cli-plugin-browser-extension is helpful to use Vue for extension options page and override page, etc, as the entry point for them are HTML files. but the content script entry point is a javascript, to inject a javascript file in the content script, you need to know the exact file name. With the plugin and Webpack, the generated javascript files are appended with hash such as "override.0e5e7d0a.js" which is not known upfront.

Javascript Hupp Technologies · Accepted Answer · 2020-01-23T07:55:17.640

8

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 })

edited Jan 23 '20 at 07:55

answered Jan 22 '20 at 08:03

Javascript Hupp Technologies

1,997
2
12
27

This option works. But how can "popup.css" get referenced from "popup.js". In the HTML version, it's referenced as: , but with content script, the base URL is the current page URL instead of popup.js, so we can't use relative path. – Jianwu Chen Jan 31 '20 at 06:57
Do you want to inject vue app in web page or new empty tab? – Javascript Hupp Technologies Jan 31 '20 at 09:20
FYI `popup.html` is not in use when we go through this approach. All CSS you write and imports will be placed in popup.css so you can mention `popup.css` in CSS of content scripts as I showed in answer. – Javascript Hupp Technologies Feb 03 '20 at 12:28
Could you post the code about how did you solve the "router" issue? – sparkle Mar 24 '21 at 15:37
@sparkle I just changed router mode to **abstract** and put `router.replace("/")` after initialising vue app in main file and that will be initial route. – Javascript Hupp Technologies Mar 25 '21 at 11:47

score 0 · Answer 2 · answered Jan 20 '20 at 08:55

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.js
module.exports = {
  //...
  pluginOptions: {
    browserExtension: {
      componentOptions: {
        background: {
          entry: 'src/background.js'
        },
        contentScripts: {
          entries: {
            'content-script': [
              'src/content-scripts/content-script.js'
            ]
          }
        }
      }
    }
  }
}

Thanks for the suggestion. However, what I need is to inject a Vue page into the existing content page. So content script needs to update the DOM with the content of a Vue page. The Vue page generated by Webpack includes one entry HTML page and a JS file with hash code in the name. It seems I find a way to do that with iframe. I still experiment with it, will update once I can make it work. — Jianwu Chen, Jan 20 '20 at 18:34

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

2 Answers2

Linked