原理
页面渲染后,使用vue给页面动态注入一个div#app
document.addEventListener('DOMContentLoaded', () => {
// https://stackoverflow.com/questions/59816151/in-chrome-extension-how-to-use-content-script-to-inject-a-vue-page
const el = document.createElement('div');
el.id = 'app';
document.body.insertBefore(el, document.body.firstChild);
new Vue({
el: el,
render: h => {
return h(App);
},
});
})
访问扩展的本地资源
因为chrome extension是注入到当前网页的,所以不能用以前的根路径/资源路径
这样的url来访问,解决方法,加前缀chrome-extension://__MSG_@@extension_id__/
例如本地图片访问
利用<img>
标签
<img src="chrome-extension://__MSG_@@extension_id__/assets/local_image.png" alt="local_image"/>
或者利用background
.local_imgage{
background:url(chrome-extension://__MSG_@@extension_id__/assets/local_image.png)
}
这样就会访问扩展下的路径资源,但是资源还没有向外公开,需要在manifest.json
中添加
"web_accessible_resources": ["assets/*"]