Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 767
Jianwu Chen Avatar asked Jan 20 '20 02:01

Jianwu Chen


People also ask

How do you inject script contents?

The files are injected after any files in css , and at the time specified by run_at . Insert the content scripts into pages whose URL is "about:blank" or "about:srcdoc" , if the URL of the page that opened or created this page matches the patterns specified in the rest of the content_scripts key.

What is content JS in Chrome extension?

Content scripts are JavaScript files that run in the context of web pages. By using the standard Document Object Model (DOM), they can read details of the web pages the browser visits, or make changes to them.

What is a content script?

A content script is a part of your extension that runs in the context of a particular web page (as opposed to background scripts which are part of the extension, or scripts which are part of the website itself, such as those loaded using the <script> element).


1 Answers

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

like image 152
Javascript Hupp Technologies Avatar answered Nov 08 '22 01:11

Javascript Hupp Technologies