在chrome扩展程序中，如何使用内容脚本注入Vue页面 [英] In chrome extension, how to use content script to inject a Vue page

问题描述

我正在尝试实现JSON查看器chrome扩展.我已经使用Vue实现了查看器( http://treedoc.org ).现在的问题是，如何才能将带有Chrome扩展程序内容脚本的Vue页面注入.

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.

我发现了这篇文章在扩展中注入普通的javascript文件非常有用.但这是已知的javascript文件名.

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

我找到了 vue-cli-plugin-browser-extension 有助于将Vue用于扩展选项页面和替代页面等，因为它们的入口点是HTML文件.但是内容脚本入口点是javascript，要在内容脚本中注入javascript文件，您需要知道确切的文件名.使用该插件和Webpack，生成的javascript文件将附加诸如" override.0e5e7d0a.js "之类的哈希，这些哈希是预先未知的.

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.

推荐答案

最近，我正在使用vuejs开发chrome扩展程序，并且具有与将整个Vue应用程序注入特定网页(即google.com)相同的要求，但遗憾的是vue-路由器不起作用.

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.

使用此样板创建Vue项目后，您需要更新src/popup/popup.js才能在网页中注入vue应用.

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

将vue应用作为内容脚本添加到manifest.json中，而不是使用browser_action或page_action.

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"]
}]

vue应用将仅在google.com上注入.如果要插入所有网页，则从content_scripts中删除匹配项

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

PS

被管理为以抽象模式工作的vue路由器，并在 new Vue({...，router})之后调用 router.replace("/")

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

这篇关于在chrome扩展程序中，如何使用内容脚本注入Vue页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！