Vue开发chrome extension

1,885 阅读1分钟

原理

页面渲染后,使用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/*"]